Tableau API JavaScript Filter Example

Question

I am trying my had at the JavaScript API Tutorial that tableau provides. When I got to the filter portion I got a little lost and was hoping for some guidance. I have created a fiddle and trimmed down the code to the bare minimum:

var placeholderDiv = document.getElementById("tableauViz");
var url = "http://public.tableausoftware.com/views/WorldIndicators/GDPpercapita";
var options = {
  hideTabs: true,
  hideToolbar: true,
  width: "800px",
  height: "400px",
  onFirstInteractive: function () {
    workbook = viz.getWorkbook();
    activeSheet = workbook.getActiveSheet();
  }

};
viz = new tableauSoftware.Viz(placeholderDiv, url, options);

function filterSingleValue() {
  activeSheet.applyFilterAsync(
    "Region",
    "The Americas",
    tableauSoftware.FilterUpdateType.REPLACE);
}

When I run the consol debugger, I get the following error:

"Uncaught ReferenceError: filterSingleValue is not defined "

I am not sure what that means, but I am guessing that the filterSingleValue() function isn't actually passing any data. Is it because I don't have the first part wrapped in a function?

My goal is to just have my filter button filter on "The Americas" region. Appreciate any guidance or suggestions. Here is my fiddle

Where are you calling filterSingleValue. Wherever that is happening, it's before filterSingleValue function is defined. — Leeish, Sep 17 '14 at 22:47
http://jsfiddle.net/6wjv502o/1/ I got it to work without using the onclick but rather with a manual listener. I think I'm too tired to see the obvious error. — Leeish, Sep 17 '14 at 22:52
http://stackoverflow.com/questions/20205091/javascript-html-and-onclick-function-is-not-defined Maybe it's just bad to use. I never do but didn't know there were issues. Either way, your Tableau JS looks fine. — Leeish, Sep 17 '14 at 22:54
Thanks Leeish, interesting link to that other stackoverflow article. I looked through some others and stumbled across [this](http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick) article further explaining the difference calling the function in html vs js. Very helpful. Cheers. — RHC1, Sep 18 '14 at 16:13

score 1 · Accepted Answer · answered Oct 17 '14 at 14:28

I encountered a similar issue (with filtering on marks) and was getting the same error. I worked around it by accessing the individual worksheets within the activeSheet object and running the clearSelectedMarksAsync function belonging to each worksheet. You should be able to run the applyFilterAsync in the same way. Hope that works!

filterReset = function() {
     activeSheet.getWorksheets()[0].applyFilterAsync("Region", "The Americas", tableauSoftware.FilterUpdateType.REPLACE);
   }

score 1 · Answer 2 · answered Feb 28 '15 at 23:32

Here is a working version of what you are trying to do, save the code block as a html file an open it up in your web browser (only tested in ie11).

Note you can't call the initializeViz function until after the place holder is loaded. Also you need to ensure your global variables viz, workbook, activeSheet are global. (http://onlinehelp.tableau.com/samples/en-us/js_api/tutorial.js)

<html>
<head>
<meta charset="utf-8">
<title>Tableau 8 Javascrip API</title>
<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.js"></script>
<script type="text/javascript">
/////////////////////
// Global variables
var viz, workbook, activeSheet

// Change the region filter
function filterSingleValue(regionFilter) {
  activeSheet.applyFilterAsync(
    "Region",
    regionFilter.value,
    tableauSoftware.FilterUpdateType.REPLACE);
} 

// Initialise the viz to hold the workbook
function initializeViz(){
    //Get the region filter to be able to apply the filter on the initialisation of the viz
    var regionFilter = document.getElementById("regionFilter"); 
    var placeholderDiv = document.getElementById("tableauViz"); 
    var url = "http://public.tableausoftware.com/views/WorldIndicators/GDPpercapita?Region=" + regionFilter.options[regionFilter.selectedIndex].text; 
    var options = {
        width: "800px", //width: placeholderDiv.offsetWidth,
        height: "400px", //height: placeholderDiv.offsetHeight,
        hideTabs: true,
        hideToolbar: true,
        onFirstInteractive: function () {
            workbook = viz.getWorkbook();
            activeSheet = workbook.getActiveSheet();
        }
    };
    viz = new tableauSoftware.Viz(placeholderDiv, url, options);    
}
</script>
</head>
<body>
<!-- Dropdown Menu, the value corresponds with those found in the "region" filter -->
    <select id="regionFilter" onchange="filterSingleValue(this)">
        <option value="Europe">Europe</option>
        <option value="Middle East">Middle East</option>
        <option value="The Americas">The Americas</option>
        <option value="Oceania" selected="selected">Oceania</option>
        <option value="Asia">Asia</option>
        <option value="Africa">Africa</option>
    </select>
<!-- Tableau view goes here -->
    <div id="tableauViz" style="height:1200px; width:1200px"\></div>
    <script type='text/javascript'>
    //Initialize the viz after the div is created
    initializeViz();
    </script>
</body>
</html>

Tableau API JavaScript Filter Example

2 Answers2