3 Replies Latest reply on Oct 18, 2018 8:33 AM by Tyler Meyers

    Passing Filters from One Embedded Visualization to Other Embedded Visualizations

    Tyler Meyers

      Hi,

      I am relatively new to JavaScript and the Tableau JS API.  I am trying to get the filters from one embedded visualization and pass it to other visualizations on the web page.

       

      I am initializing my main visualization with this code.

       

      function initViz() {

          var containerDiv = document.getElementById("vizContainer"),

              url = "https://tableau.Viz",

       

              options = {

                  hideTabs: true,

                  loadorder: -1,

                  hideToolbar: true,

                  onFirstInteractive: function () {

                      workbook=SumDash.getWorkbook();

                      activeSheet = workbook.getActiveSheet().getWorksheets()[0];

                      SumDash.addEventListener(tableau.TableauEventName.FILTER_CHANGE,onFilterChange);

                      console.log("Run this code when the viz1 has finished loading.");

                  }

              };     

          var SumDash = new tableau.Viz(containerDiv, url, options);

       

      When filters are changed on the main visualization I am getting the field names and applied values and updating the other visualizations with this code.

       

      This code works, but it is very slow.  I think part of my problem is that the dashboard I am getting the filters from has multiple worksheets and the below code is looping through each worksheet in the dashboard (21 worksheets on the dashboard and console.log(1) is printing 21 times). 

       

      Is there a way to only pass the field names and values from one worksheet and not each worksheet in the dashboard?  Is there a more efficient way to do this?

       

      function onFilterChange(){

           activeSheet.getFiltersAsync()

          .then(function(promise) {

              console.log(1);

              var fieldName = [];

              var fieldValArr = [];

              for (var i=0;  i< promise.length; i++) {

                  fieldName.push(promise[i].getFieldName());

                  var  fieldValues = [];

                  for (var j=0;  j< promise[i].getAppliedValues().length; j++) {

                      fieldValues[j] = promise[i].getAppliedValues()[j].value;

                  }

              fieldValArr.push(fieldValues);

              for (var k=0; k<fieldName.length; k++){

                  activeSheet1.applyFilterAsync(fieldName[k], fieldValArr[k], tableau.FilterUpdateType.REPLACE);

                  activeSheet2.applyFilterAsync(fieldName[k], fieldValArr[k], tableau.FilterUpdateType.REPLACE);

              }

          }

          })

      }

       

      Thanks!

      Tableau Desktop version =  2018.1

      https://public.tableau.com/javascripts/api/tableau-2.min.js

        • 1. Re: Passing Filters from One Embedded Visualization to Other Embedded Visualizations
          patrick.byrne.0

          Hi Tyler, .

           

          I found the following StackOverflow post that might be able to help: javascript - Setting tableau filters via JS across multiple dashboards/worksheets - Stack Overflow

           

          This post was also moved into the JavaScript API space of the Tableau Community. Hopefully someone here will be able to assist with your question.

           

          Hope this helps!

           

          Cheers,

          Byrne, Patrick

          • 2. Re: Passing Filters from One Embedded Visualization to Other Embedded Visualizations
            Man Tsui

            Hi Tyler,

             

            Try the following snippets.

             

            // Listen for filter change/selection for "Medicare Outpatient Charge Analysis 01"

            vizMedicareOP01.addEventListener('filterchange', function(filterEvent) {

                 //console.log('Event Listener Activated.'); //Debug code

             

                 var arrayFilterList = [];

                 filterEvent.getFilterAsync().then( function(field){

                      var field_name = field.getFieldName();

                      var field_type = field.getFilterType();

                      if (field_name == "Provider State") {

                           var data_values = field.getAppliedValues();

                           for (i = 0; i < data_values.length; i++) {

                                var selectedFilterSingle = data_values[i].value;

             

                                // Array manipulation: Concatenate multiple filter values into the array

                                arrayFilterList.push(selectedFilterSingle);

                           }

             

                      // Cross-filter: Apply "State" filter criteria to "Medicare Cost Report: Hospital Statistics"

                      // with single mark or multiple marks

                      setFilterTo(vizCMS_Cost_Hosp_Stat, 'Hosp Stat Map', 'State', arrayFilterList);

                      // Cross-filter: Apply "Provider State" filter criteria to "Medicare Inpatient Charge Analysis 01"

                      setFilterTo(vizMedicareIP01, 'IP Map', 'Provider State', arrayFilterList);

                 }

                 console.log(arrayFilterList);

                 });

            });

             

            // Filter the specified dimension to the specified value(s)

            function setFilterTo(vizName, sheetName, filterName, values) {

                 var sheet = vizName.getWorkbook().getActiveSheet().getWorksheets().get(sheetName);

                sheet.applyFilterAsync(filterName, values, tableau.FilterUpdateType.REPLACE);

            }

            2 of 2 people found this helpful
            • 3. Re: Passing Filters from One Embedded Visualization to Other Embedded Visualizations
              Tyler Meyers

              Thank you very much for the detailed response!  I ended up taking a slightly different route, but this was very helpful.