Create summary table from column chart in Google Charts

Question

I'm creating a column chart in Google Charts, and I want to also create a table chart showing summary data based on the column values, viz. average, minimum, maximum, total.

I've declared these as global variables (initialised as 0) outside the drawchart function, and I've assigned values within the drawchart function (without var):

function drawPower() {
   $.get("costs_daily.csv", function(csvString) {
      // transform the CSV string into a 2-dimensional array
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);

      /// get min, max cost
      var range = data.getColumnRange(3);
      var n_rows = data.getNumberOfRows();

      function getSum(data, row) {
        var total = 0;
        for (i = 0; i < n_rows; i++)
          total = total + data.getValue(i, row);
        return total;
      }

      totCost = getSum(data, 3);
      aveCost = totCost / n_rows;  
      minCost = range.min;
      maxCost = range.max; 

      var options = {
        title: 'Costs for last 30 days',
        titleTextStyle: {color: 'grey', fontSize: 16},
        hAxis: {title: 'Date', titleTextStyle: {bold: false, italic: false, color: 'grey'}, slantedTextAngle: 90, textStyle: {fontSize: 12}},
        legend: {position: 'top'},
        vAxes:  {
                0: {title: 'Cost (p)', titleTextStyle: {bold: false, italic: false, color: 'grey'}},
        },
        focusTarget: 'category',
        intervals: {color:'#000000',
                    textStyle: { color: 'none'}},
        series: {
            0: {color: '#44AA99', type: 'bars'},
            1: {color: '#DDCC77', type: 'bars'},
            2: {
                color: 'transparent',
                type: 'line',
                lineWidth: 0,
                pointSize: 0,
                enableInteractivity: false,
                visibleInLegend: false
            }
        },
        interpolateNulls: true,
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

      var formatter = new google.visualization.NumberFormat(
        {prefix: '£', fractionDigits: 2}
      );
      formatter.format(data,1);
      formatter.format(data,2);
      formatter.format(data,3);

      var chart = new google.visualization.ComboChart(document.getElementById('power_div'));

      chart.draw(data, options);

   },'text');

}

I've then created a separate function to draw a table with these values:

function drawTable() {

    statsData = [
        ['Stat', 'Cost'],
        ['Average', aveCost],
        ['Minimum', minCost],
        ['Maximum', maxCost],
        ['Total', totCost]
    ];

    var stats = new google.visualization.arrayToDataTable(statsData);

    var options = {
        showRowNumber: false,
        width: '100%',
        height: '100%'
    };

    var formatter = new google.visualization.NumberFormat(
        {prefix: '£', fractionDigits: 2}
      );
    formatter.format(stats,1);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(stats, options);

}

but the values remain at their initialised values (zero). Is there a way to pass the calculated values from the chart function to the table function?

Answer 1

not sure where drawTable is called from now,
but yes, you can pass the values from the chart function to the table function.

create the statsData in the chart function,
then pass it to the table function.
and remove where ever the table function is currently being called.

      totCost = getSum(data, 3);
      aveCost = totCost / n_rows;
      minCost = range.min;
      maxCost = range.max;

      statsData = [
          ['Stat', 'Cost'],
          ['Average', aveCost],
          ['Minimum', minCost],
          ['Maximum', maxCost],
          ['Total', totCost]
      ];

      drawTable(statsData);

      ...

function drawTable(statsData) {

    ...

see following snippet...
function drawPower() { $.get("costs_daily.csv", function(csvString) { // transform the CSV string into a 2-dimensional array var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);

      /// get min, max cost
      var range = data.getColumnRange(3);
      var n_rows = data.getNumberOfRows();

      function getSum(data, row) {
        var total = 0;
        for (i = 0; i < n_rows; i++)
          total = total + data.getValue(i, row);
        return total;
      }

      totCost = getSum(data, 3);
      aveCost = totCost / n_rows;
      minCost = range.min;
      maxCost = range.max;

      statsData = [
          ['Stat', 'Cost'],
          ['Average', aveCost],
          ['Minimum', minCost],
          ['Maximum', maxCost],
          ['Total', totCost]
      ];

      drawTable(statsData);


      var options = {
        title: 'Costs for last 30 days',
        titleTextStyle: {color: 'grey', fontSize: 16},
        hAxis: {title: 'Date', titleTextStyle: {bold: false, italic: false, color: 'grey'}, slantedTextAngle: 90, textStyle: {fontSize: 12}},
        legend: {position: 'top'},
        vAxes:  {
                0: {title: 'Cost (p)', titleTextStyle: {bold: false, italic: false, color: 'grey'}},
        },
        focusTarget: 'category',
        intervals: {color:'#000000',
                    textStyle: { color: 'none'}},
        series: {
            0: {color: '#44AA99', type: 'bars'},
            1: {color: '#DDCC77', type: 'bars'},
            2: {
                color: 'transparent',
                type: 'line',
                lineWidth: 0,
                pointSize: 0,
                enableInteractivity: false,
                visibleInLegend: false
            }
        },
        interpolateNulls: true,
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

      var formatter = new google.visualization.NumberFormat(
        {prefix: '£', fractionDigits: 2}
      );
      formatter.format(data,1);
      formatter.format(data,2);
      formatter.format(data,3);

      var chart = new google.visualization.ComboChart(document.getElementById('power_div'));

      chart.draw(data, options);

   },'text');

}

function drawTable(statsData) {

    var stats = new google.visualization.arrayToDataTable(statsData);

    var options = {
        showRowNumber: false,
        width: '100%',
        height: '100%'
    };

    var formatter = new google.visualization.NumberFormat(
        {prefix: '£', fractionDigits: 2}
      );
    formatter.format(stats,1);

    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(stats, options);

}