2 Replies Latest reply on Feb 13, 2018 7:14 AM by Michael Summons

    Creating global filters across multiple dashboards using quick filters and Javascript API???

    Michael Summons

      Hello All,

       

      So I've been a Tableau user for a couple of years now, but just now starting to explore how JavaScript API can be used to customize the user interface. It seems fairly straight forward, although there is one thing in particular that I am currently trying to do and don't see examples of any kind on. I have figured out how to display two dashboards together in a web object but only one has quick filters and parameters. The other dashboard does not have any filters in the view, but uses the same data source. It seems like a listener could be added along with a function to update the filters based on the selections of the dashboard containing the filters, but have yet to see any kind of example (been searching for a few days now).  I've only seen examples that manually assign values to a filter, but nothing dynamic. Is this even possible??

       

      <!DOCTYPE html>
      <html>

      <head>
          <title>PL Dash Testing</title>

       
          <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

      <script type="text/javascript">
        var viz;
        
         function initViz() {
          var containerDiv = document.getElementById("vizContainer"),
           url = "https://xxxtableau.xxx.org/views/PLDashBarInBarTEST/Dashboard5?",
           options = {
           hideToolbar: true
          };
          viz = new tableau.Viz(containerDiv, url, options);

       

       

          var containerDiv2 = document.getElementById("vizContainer2"),
           url = "https://xxxtableau.xxx.org/views/PLDashSummaryTEST/Dashboard4?",
           options = {
          };
          viz2 = new tableau.Viz(containerDiv2, url, options);
              
         }
        

        </script>
      </head>
       
      <body onload="initViz();">

      <div id="vizContainer"></div>
      <div id="vizContainer2></div> 
          
      </body>

      </html>

       

      Above is what I have so far, which basically shows the two dashboards. The dashboards in the above example will not show because I had to alter the https, but "viz" would contain the filters and "viz2" is the dashboard that I would like to have update based on the filter/parameter selections made in "VIZ".