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 = "";
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

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

• javascript
• tableau-api

• Where are you calling filterSingleValue. Wherever that is happening, it's before filterSingleValue function is defined. – Leeish Commented Sep 17, 2014 at 22:47
• jsfiddle/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 Commented Sep 17, 2014 at 22:52
• stackoverflow./questions/20205091/… 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 Commented Sep 17, 2014 at 22:54
• Thanks Leeish, interesting link to that other stackoverflow article. I looked through some others and stumbled across this article further explaining the difference calling the function in html vs js. Very helpful. Cheers. – RHC1 Commented Sep 18, 2014 at 16:13

2 Answers 2

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);
   }

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