Google-Diagramme, aggregieren/gruppieren eine gefilterte DataTable

Question

Ich habe eine DataTable, ein DateRangeFilter und ein Aggregationsobjekt. Ich hatte gehofft, ich könnte DateRangeFilter verwenden, um die Daten in der DataTable zu filtern und die Aggregation auf die FILTERED DataTable zu beschränken. Aber das passiert nicht. Mache ich etwas falsch (vielleicht vergessen zu aktualisieren/zeichnen), oder etwas ähnliches ist nicht möglich.

Mein Code ist hier: 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'} 
    ] 
); 

Answer 1

Sie nur eine Datentabelle auf einem Armaturenbrett/Filter binden kann.

, um die gefilterten Datentabelle zu aggregieren ...

1. Warten, bis das 'ready' Ereignis auf der ChartWrapper
2. aggregieren die gefilterten Datentabelle aus der ChartWrapper

siehe folgendes Beispiel Gebäude aus der vorherigen Frage ...

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>