Google Charts - Sum of displayed columns with slider

Question

I have produced a dashboard with a date slider that changes what is shown by the graph. I couldn't find a way to sum the total of the columns shown.

https://jsfiddle.net/2uktvcut/

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Date", "Total"],
    [new Date("1/1/17"), 13],
    [new Date("1/2/17"), 15],
    [new Date("1/3/17"), 15],
    [new Date("1/4/17"), 23],
    [new Date("1/5/17"), 51],
    [new Date("1/6/17"), 17],
    [new Date("1/7/17"), 11],
    [new Date("1/8/17"), 18],
    [new Date("1/9/17"), 8],
    [new Date("1/10/17"), 34],
    [new Date("1/11/17"), 13],
    [new Date("1/12/17"), 21]
  ]);

  var dashboard = new google.visualization.Dashboard(document.getElementById('marketingChartHolder'));

  var dateSlider = new google.visualization.ControlWrapper({
    'controlType': 'DateRangeFilter',
    'containerId': 'marketingChartControl',
    'options': {
      'filterColumnLabel': 'Date',
    }
  });

  var stockChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'marketingChart',
    options: {
      theme: 'material',
      legend: {
        position: 'bottom',
      },
      focusTarget: 'category',
      chartArea: {
        width: '95%',
        height: '90%',
      },
      width: $(document).width() * 0.98,
      height: $(document).height() * .70,
      vAxis: {
        viewWindow: {
          min: 0,
        },
      },
    }
  });

  google.visualization.events.addListener(stockChart, 'ready', function() {
    document.getElementById('png').innerHTML = '<button><a target="_blank" href="' + stockChart.getChart().getImageURI() + '">Get Image</a></button>';

    var dt = stockChart.getDataTable();
    console.log(dt);
  });

  dashboard.bind(dateSlider, stockChart);

  dashboard.draw(data);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<div id="marketingChartHolder">
  <div id="marketingChartControl" style="width: 100%"></div>
  <div id="marketingChart"></div>
  <div id='png'></div>
  <div id="totalHolder">
    <p>
      Placeholder
    </p>
  </div>
</div>

I think that I've made a start with stockChart.getDataTable() however I am unsure how to proceed.

After I get the value I plan to use jquery to change the value of the <p>.

Answer 1

you can use the group() method to aggregate the data

see the following working snippet...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Date", "Total"],
    [new Date("1/1/17"), 13],
    [new Date("1/2/17"), 15],
    [new Date("1/3/17"), 15],
    [new Date("1/4/17"), 23],
    [new Date("1/5/17"), 51],
    [new Date("1/6/17"), 17],
    [new Date("1/7/17"), 11],
    [new Date("1/8/17"), 18],
    [new Date("1/9/17"), 8],
    [new Date("1/10/17"), 34],
    [new Date("1/11/17"), 13],
    [new Date("1/12/17"), 21]
  ]);

  var dashboard = new google.visualization.Dashboard(document.getElementById('marketingChartHolder'));

  var dateSlider = new google.visualization.ControlWrapper({
    'controlType': 'DateRangeFilter',
    'containerId': 'marketingChartControl',
    'options': {
      'filterColumnLabel': 'Date',
    }
  });

  var stockChart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'marketingChart',
    options: {
      theme: 'material',
      legend: {
        position: 'bottom',
      },
      focusTarget: 'category',
      chartArea: {
        width: '95%',
        height: '90%',
      },
      width: $(document).width() * 0.98,
      height: $(document).height() * .70,
      vAxis: {
        viewWindow: {
          min: 0,
        },
      },
    }
  });

  google.visualization.events.addListener(dateSlider, 'statechange', calcTotal);

  google.visualization.events.addListener(stockChart, 'ready', function () {
    document.getElementById('png').innerHTML = '<button><a target="_blank" href="' + stockChart.getChart().getImageURI() + '">Get Image</a></button>';
    calcTotal();
  });

  function calcTotal() {
    var dataTotal = google.visualization.data.group(
      stockChart.getDataTable(),
      [{column: 0, type: 'string', modifier: function () {return 'Total';}}],
      [
        {
          aggregation: google.visualization.data.sum,
          column: 1,
          label: 'Total',
          type: 'number'
        }
      ]
    );

    var container = document.getElementById('totalHolder');
    var table = new google.visualization.Table(container);
    table.draw(dataTotal);
  }

  dashboard.bind(dateSlider, stockChart);

  dashboard.draw(data);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<div id="marketingChartHolder">
  <div id="marketingChartControl" style="width: 100%"></div>
  <div id="marketingChart"></div>
  <div id='png'></div>
  <div id="totalHolder"></div>
</div>