Dynamic Parameter in Tableau

Question

So I'm under the impression that with JS in html you can do a dynamic parameter in Tableau. Here is my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://public.tableau.com/javascripts/api/tableau-2.0.0.min.js"></script>
<script>
$(function() {
    var url  = 'points to dashboard url';
    var vizOptions = {
        showTabs           : true,
        hideToolbar        : true,
        width              : "420px",
        height             : "420px"
    };

    currentViz = new tableauSoftware.Viz(document.getElementById('viz'), url, vizOptions);
 currentViz.addEventListener(tableauSoftware.TableauEventName.FILTER_CHANGE, onFilterChange);
});


function onFilterChange(e)
{
if (e.getFieldName() == 'Department') {
    e.getFilterAsync().then(function(filter) {
        var values = filter.getAppliedValues();
        var value = values[0]['value'];

        // Value of the parameter if "All" is selected in the filter.
        if (values.length > 1) {
            value = 'All';
        }

        currentViz.getWorkbook().changeParameterValueAsync('Parameter1', value);
    });
}
}

This code I got from https://www.interworks.com/blog/daustin/2015/12/17/dynamic-parameters-tableau and looks pretty plug and play. However, my parameters results are not changing. Note, possible cause for this is that the parameter is actually integer and a list, unlike the tutorial.

Any insight as to the problem?

Ripon Ripon · Accepted Answer · 2017-09-15T20:01:01

I also came across that link from interworks, but ran into some problems. I was able to leverage some of their code in order to use dynamic parameters. In the code below, update the urls with your server, point to your workbook, and the parameter & filter used in your workbook. My knowledge of html and javascript is minimal so the code may not be pretty or efficient, but it does work for me. Let me know if you run into any issues.

Note - In order to use the Tableau Javascript API, the workbook needs to be on a tableau server.

<!DOCTYPE html>
<html>

<head>
<title>Prototype</title>
<script type="text/javascript" src="https://yourserver/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
var viz, containerDiv
    function initViz() {
        containerDiv = document.getElementById("vizContainer"),
            url = "https://yourserver/views/yourworkbook/yourdashboard",
            options = {
                    onFirstInteractive: function () {
                    console.log("Run this code when the viz has finished loading.");
                    mainWorkbook = viz.getWorkbook();
                }
            }; // end options

        // Create a viz object and embed it in the container div.
        viz = new tableau.Viz(containerDiv, url, options);
        viz.addEventListener(tableauSoftware.TableauEventName.FILTER_CHANGE, function(e){
          if (e.getFieldName() == 'Filter1'){
            e.getFilterAsync().then(function(filter) {
              var values = filter.getAppliedValues();
              var value = values[0]['value'];
              // Value of the parameter if "All" is selected in the filter.
              if (values.length > 1) {
                  value = 'All';
              }
              viz.getWorkbook().changeParameterValueAsync('Parameter1', value);
            });
          } // end if statement
      }); // end event listener
    } // end initViz
</script>

<body onload="initViz();">
<div id="vizContainer" style="width:800px; height:700px;"></div>

</body>

</html>

Dynamic Parameter in Tableau

1 Answers