Summarize categories by year in Google Column Char

问题:

I have a data table with number of car sales in the last 3 years. I want to create a column chart that has columns for "leased", "financed", and "cash sale" in each year.

My table is has two columns, one for sale date and one for sale type.

So far I have:

var groupedData = google.visualization.data.group(
    googleDataTable,
    [ { column: 0, modifier: getYearForRow, type: 'string', label: 'Year'} ],
    [ { column: 1, type: 'string', label: 'Type'} ] );

That doesn't work, I am getting an error "TypeError: Cannot read property 'call' of undefined". Any suggestions on how I can get this to work?

回答1:

first, build a DataView with columns for each sale type

then use the group method to aggregate the view

see following working snippet...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Sale Date', 'Sale Type'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'financed'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'leased'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'cash sale'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2016, 0, 18), 'leased'],
    [new Date(2016, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale']
  ]);

  // build view and aggregation columns
  var viewColumns = [{
    label: 'year',
    type: 'string',
    calc: function (dt, row) {
      return dt.getValue(row, 0).getFullYear().toString();
    }
  }];
  var aggColumns = [];
  var saleTypes = data.getDistinctValues(1);
  saleTypes.forEach(function (saleType) {
    var colIndex = viewColumns.push({
      label: saleType,
      type: 'number',
      calc: function (dt, row) {
        return (dt.getValue(row, 1) === saleType) ? 1 : 0;
      }
    });
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: colIndex - 1,
      label: saleType,
      type: 'number'
    });
  });

  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var summary = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  var container = document.body.appendChild(document.createElement('div'));
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(summary, {
    legend: {
      position: 'top'
    }
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>