-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathrespondToEvents.html
56 lines (44 loc) · 2.02 KB
/
respondToEvents.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Respond To Events</title>
<script type="module">
// TableauEventType represents the type of Tableau embedding event that can be listened for.
import { TableauEventType } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.js";
// Display information about selected marks.
async function handleMarksSelection(e) {
const marksCollection = await e.detail.getMarksAsync();
const marksData = marksCollection.data[0];
let html = "";
for (let markIndex = 0; markIndex < marksData.totalRowCount; markIndex++) {
html += `<b>Mark ${markIndex}:</b><ul>`;
for (let columnIndex = 0; columnIndex < marksData.columns.length; columnIndex++) {
html += `<li><b>Field Name:</b> ${marksData.columns[columnIndex].fieldName}`;
html += `<br/><b>Value:</b> ${marksData.data[markIndex][columnIndex].formattedValue} </li>`;
}
html += "</ul>";
}
const infoDiv = document.getElementById("markDetails");
infoDiv.innerHTML = html;
}
const viz = document.getElementById("tableauViz");
// An event raised when the selected marks on a visualization have changed.
// You can use this event type with TableauViz objects.
viz.addEventListener(TableauEventType.MarkSelectionChanged, handleMarksSelection);
</script>
</head>
<body>
<div>
<!-- Initialization of the Tableau visualization. -->
<tableau-viz id="tableauViz" src="https://public.tableau.com/views/RegionalSampleWorkbook/College"
hide-tabs>
<!-- Add filter during initialization. -->
<viz-filter field="Academic Year" value="" />
</tableau-viz>
</div>
<br>
<!-- Placeholder for mark details. -->
<div id="markDetails">Information about selected marks displays here.</div>
</body>
</html>