Include string column in google.visualization.data.group

问题

I have a table that basically looks like this:

{"cols":[
    {"label":"Date","type":"date"},
    {"label":"Person","type":"string"},
    {"label":"Amount","type":"number"}],
"rows":[
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":1.28}]},
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Mary"},{"v":6}]},
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":9.31}],
    {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Richard"},{"v":3.5}]},
    {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Mary"},{"v":48.99}]},
    {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Richard"},{"v":29.95}]},
    {"c":[{"v":"Date(2018, 2, 01)"},{"v":"John"},{"v":18}]},
    etc...
]}

I want to display the data as a stacked area chart. The date would be on the x axis, the amount would be on the y axis, and the categories would be the people.

Here's my attempt to group the data:

var data = new google.visualization.data.group(
    data,
    [0],
    [{'column': 1, 'aggregation': ?, 'type': 'string'}],
    [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

My problem is that I don't know what to put for 'aggregation' for column 1. I can't use 'sum' as it's a string, and besides, it throws the error "All series on a given axis must be of the same data type".

I tried this:

var data = new google.visualization.data.group(
    data,
    [0,1],
    [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

but this also throws the error "All series on a given axis must be of the same data type".

If I leave out column 1 altogther, then the graph works, but there's no stacking. The data for all the people is just lumped together.

var data = new google.visualization.data.group(
    data,
    [0],
    [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

回答1:

in order to have separate stacks for each person,
each person needs their own data table column, or series.

to transform the given data table,
first group by both date and person.
then create a data view with a separate column for each person,
finally, group and sum all columns by date.

see following working snippet,
the table is there to show the needed layout...

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function () {
  // create data table
  var data = new google.visualization.DataTable({
    "cols": [
      {"label":"Date","type":"date"},
      {"label":"Person","type":"string"},
      {"label":"Amount","type":"number"}
    ],
    "rows": [
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":1.28}]},
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Other"},{"v":6}]},
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"John"},{"v":9.31}]},
      {"c":[{"v":"Date(2018, 1, 01)"},{"v":"Child"},{"v":3.5}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Mary"},{"v":48.99}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Richard"},{"v":29.95}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"John"},{"v":18}]},
      {"c":[{"v":"Date(2018, 2, 01)"},{"v":"Other"},{"v":6}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"Child"},{"v":3.5}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"Mary"},{"v":48.99}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"Richard"},{"v":29.95}]},
      {"c":[{"v":"Date(2018, 3, 01)"},{"v":"John"},{"v":18}]}
    ]
  });

  // group data table
  var groupData = google.visualization.data.group(
    data,
    [0, 1],
    [{
      column: 2,
      aggregation: google.visualization.data.sum,
      type: 'number'
    }]
  );

  // create data view
  var view = new google.visualization.DataView(groupData);

  // sum column array
  var aggColumns = [];

  // use date as first view column
  var viewColumns = [0];

  // build view & agg columns for each person
  groupData.getDistinctValues(1).forEach(function (gender, index) {
    // add view column for each person
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === gender) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      label: gender,
      type: 'number'
    });

    // add sum column for each person
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: gender,
      type: 'number'
    });
  });

  // set view columns
  view.setColumns(viewColumns);

  // sum view by date
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  // draw chart
  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(aggData, {
    isStacked: true
  });

  // draw table
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(aggData);
});

.dashboard {
  text-align: center;
}

.dashboard div {
  margin-bottom: 12px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="dashboard">
  <div id="chart_div"></div>
  <div id="table_div"></div>
</div>

来源：https://stackoverflow.com/questions/50049997/include-string-column-in-google-visualization-data-group

标签

javascript

charts

google-visualization