Google charts, aggregate/group a filtered DataTable

问题

I have a DataTable, a DateRangeFilter and a aggregation object. I was hoping I could use DateRangeFilter to filter the data in the DataTable and to limit the aggregation to the FILTERED DataTable. But that's not happening. Am I doing something wrong (maybe forgot to refresh/draw), or something like that is not possible.

My code is here: https://jsfiddle.net/v0w5ehsc/

    var dashboard = new google.visualization.Dashboard(document.getElementById('daterange_div'));
dashboard.bind(slider, tableChart);
dashboard.draw(dataAll);

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

回答1:

you can only bind one data table to a dashboard / filter.

in order to aggregate the filtered data table...

1. Wait for the 'ready' event on the ChartWrapper
2. Aggregate the filtered data table from the ChartWrapper

see following example building off previous question...

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

function drawVisualization() {
  var data = new google.visualization.DataTable({
    cols: [
      {id: 'dat_ym', label: 'Start Date', type: 'date'},
      {id: 'user-id', label: 'User-Id', type: 'string'},
      {id: 'customer-id', label: 'Customer-Id', type: 'string'},
      {id: 's_minutes', label: 'minutes', type: 'number'}
    ],
    rows: [
      {c:[{v: new Date('2016, 01, 01')}, {v: '44836'}, {v: '67205'}, {v: 1122} ]},
      {c:[{v: new Date('2016, 01, 01')}, {v: '86495'}, {v: '67205'}, {v: 332} ]},
      {c:[{v: new Date('2016, 01, 01')}, {v: '44836'}, {v: '228626'}, {v: 0} ]},
      {c:[{v: new Date('2016, 01, 01')}, {v: '86495'}, {v: '228626'}, {v: 334} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '44836'}, {v: '67205'}, {v: 554} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '86495'}, {v: '67205'}, {v: 0} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '44836'}, {v: '228626'}, {v: 0} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '86495'}, {v: '228626'}, {v: 544} ]},
    ]
  });

  var options = {
    hAxis: {title: '', textStyle: { fontSize: '13' }, textPosition: 'in'},
    vAxis: {title: '', textStyle: { fontSize: '10' }},
    seriesType: 'bars',
    legend: {position: 'top', textStyle: {color: 'black', fontSize: 14}},
    isStacked: true
  };

  // build dashboard
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div'));
  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table-div',
    options: {
      allowHtml: true
    }
  });
  var dateSlider = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'slider-div',
    options: {
      filterColumnIndex: 0
    }
  });

  // Table 'ready' event
  google.visualization.events.addListener(table, 'ready', function () {
    // group data by date, customer
    var grouped_data = google.visualization.data.group(
      // get data table from ChartWrapper
      table.getDataTable(),
      [0, 2],
      [
        {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}
      ]
    );

    // sort grouped data
    grouped_data.sort([{column: 0},{column: 1}]);

    // get unique customers
    var custGroup = google.visualization.data.group(
      data,
      [2]
    );

    // build customer data table
    var custData = new google.visualization.DataTable({
      cols: [
        {id: 'dat_ym', label: 'Start Date', type: 'date'},
      ]
    });

    // add column for each customer
    for (var i = 0; i < custGroup.getNumberOfRows(); i++) {
      custData.addColumn(
        {label: custGroup.getValue(i, 0), type: 'number'}
      );
    }

    // add row for each date / customer
    var rowDate;
    var rowIndex;
    for (var i = 0; i < grouped_data.getNumberOfRows(); i++) {
      if (rowDate !== grouped_data.getValue(i, 0).getTime()) {
        rowDate = grouped_data.getValue(i, 0).getTime();
        rowIndex = custData.addRow();
        custData.setValue(rowIndex, 0, new Date(rowDate));
      }
      for (var x = 1; x < custData.getNumberOfColumns(); x++) {
        if (custData.getColumnLabel(x) === grouped_data.getValue(i, 1)) {
          custData.setValue(rowIndex, x, grouped_data.getValue(i, 2));
        }
      }
    }

    // draw agg table
    new google.visualization.ChartWrapper({
      chartType: 'Table',
      containerId: 'agg-div',
      dataTable: custData,
      options: {
        allowHtml: true
      }
    }).draw();
  });

  // draw dashboard
  dashboard.bind(dateSlider, table);
  dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard-div">
  <div id="slider-div"></div>
  <div id="table-div"></div>
  <br/>
  <div id="agg-div"></div>
</div>

来源：https://stackoverflow.com/questions/37160100/google-charts-aggregate-group-a-filtered-datatable