Select Marks

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).

Select a set of marks in a visualization.

<!DOCTYPE html>
<html>

<head>
    <title>Select Marks</title>

    <script type="text/javascript"
        src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

    <script type="text/javascript">
        var viz, sheet;

        function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
                url = "http://public.tableau.com/views/RegionalSampleWorkbook/College",
                options = {
                    "Academic Year": "",
                    hideTabs: true,
                    onFirstInteractive: function () {
                        sheet = viz.getWorkbook().getActiveSheet();
                    }
                };

            viz = new tableau.Viz(containerDiv, url, options);
        }

        function selectCollege(college_name) {
            sheet.selectMarksAsync("College", college_name, tableau.SelectionUpdateType.REPLACE);
        }

        function addCollegeToSelection(college_name) {
            sheet.selectMarksAsync("College", college_name, tableau.SelectionUpdateType.ADD);
        }

        function clearCollegeSelection() {
            sheet.clearSelectedMarksAsync();
        }
    </script>
</head>

<body onload="initViz();">
	<div id="vizContainer"></div>
    <br />
    <button onclick="selectCollege('Engineering');">Select a value</button>
    <button onclick="addCollegeToSelection('Business');">Add to the selection</button>
    <button onclick="clearCollegeSelection();">Clear all</button>
</body>

</html>

Thanks for your feedback!

Your feedback has been successfully submitted. Thank you!

Tableau JavaScript API Help

Select Marks