How can I filter two charts with different ways to get data with the same string filter?

Question

here's my code:

    google.charts.load('current', {'packages':['corechart', 'controls']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'ID');
      data.addColumn('string', 'Customer_Name');
      data.addColumn('number', 'Credits');
      data.addColumn('string', 'Date');
      data.addColumn('string', 'Seller');
      data.addColumn('string', 'Branch');

      data.addRows([
        [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
        [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
        [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
        [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
        [213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
      ]);

        var groupedBranch = google.visualization.data.group(data, [5], [{
          column: 0,
          type: 'number',
          label: data.getColumnLabel(0),
          aggregation: google.visualization.data.count
        }]);

        var branchFilter = new google.visualization.ControlWrapper({
            'controlType': 'StringFilter',
            'containerId': 'div_filter1',
            'options': {
                'filterColumnLabel': 'Branch',
                'matchType': ('any'),
                'ui': {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
            }

        });

        var branchChart = new google.visualization.ChartWrapper({
            'chartType': 'ColumnChart',
            'containerId': 'div_chart1',
            'options': {
            'animation':{duration:666, easing:'inAndOut', startup:true},
            'backgroundColor': {fill:'transparent' },
            'title': 'Branches',
            'hAxis': {title: 'Branch', titleTextStyle: {color: '#999'},   textStyle : {fontSize: 12}},
            'vAxis': {minValue: 0},
            'colors': ['#f39c12'],
            'legend': 'none'
            }

        });

        var tableChart = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'div_chart3',
            'options': {
            'animation':{duration:666, easing:'inAndOut', startup:true},
            'backgroundColor': {fill:'transparent' },
            'title': 'a',
            'hAxis': {title: 'Loja', titleTextStyle: {color: '#999'}, slantedText:true, slantedTextAngle:74, textStyle : {fontSize: 12}},
            'vAxis': {minValue: 0},
            'colors': ['#f39c12'],
            'legend': 'none'
            }

        });

And then below, the way that my dashboard is drawing (my problem).

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
  dashboard.bind(branchFilter, [branchChart, tableChart]);
  dashboard.draw(groupedBranch);
    }

here is my point.

I want to draw the Column Chart based on my var groupedBranch data and the Table based on my var data,

both using the same branchFilter

Image exemples:

The way my dashboard is now

The table now

The table I need

Answer 1

dashboards will only work with one data table

in this case, draw each chart independently, on the filter's 'statechange' event

google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);

when the event fires, use data table method getFilteredRows to build a view for each chart
you will have to manually account for the filter's matchType

var filterValue = branchFilter.getState().value;
viewBranch.rows = groupedBranch.getFilteredRows([{
  column: 0,
  test: function (value) {
    // same as matchType: 'any'
    return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
  }
}]);

see following working snippet...

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'ID');
  data.addColumn('string', 'Customer_Name');
  data.addColumn('number', 'Credits');
  data.addColumn('string', 'Date');
  data.addColumn('string', 'Seller');
  data.addColumn('string', 'Branch');

  data.addRows([
    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
    [213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
  ]);

  var groupedBranch = google.visualization.data.group(data, [5], [{
    column: 0,
    type: 'number',
    label: data.getColumnLabel(0),
    aggregation: google.visualization.data.count
  }]);

  var branchFilter = new google.visualization.ControlWrapper({
    controlType: 'StringFilter',
    containerId: 'div_filter1',
    dataTable: groupedBranch,
    options: {
      filterColumnLabel: 'Branch',
      matchType: 'any',
      ui: {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
    }
  });
  google.visualization.events.addListener(branchFilter, 'ready', drawCharts);
  google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);

  var branchChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'div_chart1',
    dataTable: groupedBranch,
    options: {
      animation: {duration: 666, easing: 'inAndOut', startup: true},
      backgroundColor: {fill:'transparent' },
      title: 'Branches',
      hAxis: {title: 'Branch', titleTextStyle: {color: '#999'}, textStyle: {fontSize: 12}},
      vAxis: {minValue: 0},
      colors: ['#f39c12'],
      legend: 'none'
    }
  });

  var tableChart = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_chart3',
    dataTable: data
  });

  branchFilter.draw();

  function drawCharts() {
    var filterValue = branchFilter.getState().value;
    var viewBranch = {};
    var viewTable = {};

    if (filterValue !== '') {
      viewBranch.rows = groupedBranch.getFilteredRows([{
        column: 0,
        test: function (value) {
          return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
        }
      }]);
      viewTable.rows = data.getFilteredRows([{
        column: 5,
        test: function (value) {
          return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
        }
      }]);
    }
    branchChart.setView(viewBranch);
    branchChart.draw();
    tableChart.setView(viewTable);
    tableChart.draw();
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_filter1"></div>
<div id="div_chart1"></div>
<div id="div_chart3"></div>