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



<!DOCTYPE html>


    <script type="text/javascript"

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

        function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
                url = "",
                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);

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


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