Respond to Events

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>

Thanks for your feedback!Your feedback has been successfully submitted. Thank you!