Respond to Events
Important changes for the Tableau JavaScript API
As of February 2024, the Tableau JavaScript API is deprecated. Use the Embedding API v3 instead for embedding interactive views into web pages and applications. For guidance on embedding Tableau views, see the Tableau Embedding API v3 Help(Link opens in a new window).
Display information about marks as you select them.
Information about selected marks displays here.
<!DOCTYPE html>
<html>
<head>
<title>Respond to Events</title>
<script type="text/javascript"
src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
var viz;
function initViz() {
var containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/College",
options = {
"Academic Year": "",
hideTabs: true,
onFirstInteractive: function () {
listenToMarksSelection();
}
};
viz = new tableau.Viz(containerDiv, url, options);
}
function listenToMarksSelection() {
viz.addEventListener(tableau.TableauEventName.MARKS_SELECTION, onMarksSelection);
}
function onMarksSelection(marksEvent) {
return marksEvent.getMarksAsync().then(reportSelectedMarks);
}
function reportSelectedMarks(marks) {
var html = "";
for (var markIndex = 0; markIndex < marks.length; markIndex++) {
var pairs = marks[markIndex].getPairs();
html += "<b>Mark " + markIndex + ":</b><ul>";
for (var pairIndex = 0; pairIndex < pairs.length; pairIndex++) {
var pair = pairs[pairIndex];
html += "<li><b>Field Name:</b> " + pair.fieldName;
html += "<br/><b>Value:</b> " + pair.formattedValue + "</li>";
}
html += "</ul>";
}
var infoDiv = document.getElementById('markDetails');
infoDiv.innerHTML = html;
}
</script>
</head>
<body onload="initViz();">
<div id="vizContainer"></div>
<br>
<div id="markDetails">Information about selected marks displays here.</div>
</body>
</html>