How can I sum column values from a table view and display it in a label in Google Charts?

Question

So, I have a table that changes according to a String filter. This table has a column that shows some credit values in rows. How can I sum the values according to what it's displaying in my table and show it in a label?

Actually I'm getting only the total sum of the column, but the total isn't changing according to the column exhibition.

Here is my snippet code:

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', function() {
    drawCharts();
    getCreditSum();
  });
  google.visualization.events.addListener(branchFilter, 'statechange', function() {
    drawCharts();
    getCreditSum();
  });

  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();

  //I think I'm missing something here
  function getCreditSum() {
    var CurrentCreditSum = google.visualization.data.group(
      tableChart.getDataTable(), [{
        column: 5,
        type: 'string',
        modifier: function() {
          return 'Credit Sum'
        }
      }], [{
        aggregation: google.visualization.data.sum,
        column: 2,
        type: 'number'
      }]
    );
    document.getElementById('TotalSum').innerHTML = CurrentCreditSum.getValue(0, 1);
  }
  //
  
  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>
<br> current credit column sum
<div id="TotalSum"></div>

Here is an example:

Answer 1

let's move the credit calc down to drawCharts,
then we can create a data view, using the same filter rows as the table chart

var CurrentCreditView = new google.visualization.DataView(tableChart.getDataTable());
if (viewTable.hasOwnProperty('rows')) {
  CurrentCreditView.setRows(viewTable.rows);
}

then use the data view in the group method

var CurrentCreditSum = google.visualization.data.group(
  CurrentCreditView,
  [{column: 5, type: 'string', modifier: function () {return 'Credit Sum'}}],
  [{aggregation: google.visualization.data.sum, column: 2, type: 'number'}]
);
document.getElementById('TotalSum').innerHTML = CurrentCreditSum.getValue(0, 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();

    var CurrentCreditView = new google.visualization.DataView(tableChart.getDataTable());
    if (viewTable.hasOwnProperty('rows')) {
      CurrentCreditView.setRows(viewTable.rows);
    }

    var CurrentCreditSum = google.visualization.data.group(
      CurrentCreditView,
      [{column: 5, type: 'string', modifier: function () {return 'Credit Sum'}}],
      [{aggregation: google.visualization.data.sum, column: 2, type: 'number'}]
    );
    document.getElementById('TotalSum').innerHTML = CurrentCreditSum.getValue(0, 1);
  }
});

<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>
<br>
current credit column sum <div id="TotalSum"></div>