Filter


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

Apply a filter to a visualization using controls on the page.

 

Year: 

<!DOCTYPE html>
<html>

<head>
    <title>Filter</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
                };

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

        function yearFilter(year) {
            var sheet = viz.getWorkbook().getActiveSheet();
            if (year === "") {
                sheet.clearFilterAsync("Academic Year");
            } else {
                sheet.applyFilterAsync("Academic Year", year, tableau.FilterUpdateType.REPLACE);
            }
        }
    </script>
</head>

<body onload="initViz();">
    <div id="vizContainer" style="width:800px; height:700px;"></div>
    <div id="controls" style="padding:20px;">
        Year: <select id="changeYear" onchange="yearFilter(value);">
            <option value="">All</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
        </select>
    </div>
</body>

</html>

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