How to update tableau extensions API graph after toggling dashboard filter?

Question

I am creating a dashboard in tableau and I am looking for the power of D3 in my dashboard and I created tableau extension viz and below is the functionality i have used 

$(document).ready(function () {
  console.log('were in again');
  tableau.extensions.initializeAsync().then(function () {

    // To get dataSource info, first get the dashboard.
    const dashboard = tableau.extensions.dashboardContent.dashboard;
    const worksheets = dashboard.worksheets;

    let underlyingDataFetchPromises = [];
    let dataObjects = {};
    let worksheetNames = [];

    // Save Promises to Array + Add Event Listeners
    dashboard.worksheets.forEach(worksheet => {
      worksheetNames.push(worksheet.name);
      underlyingDataFetchPromises.push(worksheet.getUnderlyingDataAsync());

      // add event listener too...
      worksheet.addEventListener(tableau.TableauEventType.FilterChanged, (filterEvent) => {
        clearChart();
        drawChart(dataObjects.dataA, dataObjects.dataB);
      });
    });

    // Maps dataSource id to dataSource so we can keep track of unique dataSources.
    Promise.all(underlyingDataFetchPromises).then(fetchedData => {

      // loop over the 2 fetchedData arrays [(1) dataA, (2) dataB]
      fetchedData.forEach((dataTable, i) => {
        let data = dataTable.data;
        let columns = dataTable.columns;
        let formattedData = formatData(data, columns);
        dataObjects[worksheetNames[i]] = formattedData;
      });

      // currently requires worksheets named "dataA" and "dataB"... not flexible atm
      drawChart(dataObjects.dataA, dataObjects.dataB);
    });

  }, function (err) {
    // Something went wrong in initialization.
    console.log('Error while Initializing: ' + err.toString());
  });
});

How can I re-fetch my viz correctly?

Answer 1

Try the following code:

//The following code is used to refresh the data source 
// Wrap everything in an anonymous function to avoid polluting the global namespace
function refreshMySql() {
  $(document).ready(function() {
      tableau.extensions.initializeAsync().then(function() {
          // Since dataSource info is attached to the worksheet, we will perform
          // one async call per worksheet to get every dataSource used in this
          // dashboard.  This demonstrates the use of Promise.all to combine
          // promises together and wait for each of them to resolve.
          let dataSourceFetchPromises = [];

          // Maps dataSource id to dataSource so we can keep track of unique dataSources.
          let dashboardDataSources = {};

          // To get dataSource info, first get the dashboard.
          const dashboard = tableau.extensions.dashboardContent.dashboard;

          // Then loop through each worksheet and get its dataSources, save promise for later.
          dashboard.worksheets.forEach(function(worksheet) {
              dataSourceFetchPromises.push(worksheet.getDataSourcesAsync());
          });
          Promise.all(dataSourceFetchPromises).then(function(fetchResults) {
              fetchResults.forEach(function(dataSourcesForWorksheet) {
                  dataSourcesForWorksheet.forEach(function(dataSource) {
                      if (!dashboardDataSources[dataSource.id]) { // We've already seen it, skip it.
                          dashboardDataSources[dataSource.id] = dataSource;
                          var datasourceName = dashboardDataSources[dataSource.id].name;
                          if (dashboardDataSources[dataSource.id].name == "ABC") {

                              refreshDataSource(dashboardDataSources[dataSource.id]);
                              console.log("refreshSql() was called for Datasource Name: 'ABC'");
                          }


                      }
                  });
              });
          });
      }, function(err) {
          // Something went wrong in initialization.
          console.log('Error while Initializing: ' + err.toString());
      });
  });
  // Refreshes the given dataSource.
  function refreshDataSource(dataSource) {
      dataSource.refreshAsync().then(function() {
          //alert(dataSource.name + ': Refreshed Successfully');
          console.log(dataSource.name + ': Refreshed Successfully');
      });
  }

Make the right move by enrolling now in Tableau Online Course to learn it.