Filter


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!