谷歌圖表，聚合/組過濾數據表

Question

我有一個DataTable，一個DateRangeFilter和一個聚合對象。 我希望我可以使用DateRangeFilter來過濾DataTable中的數據並將聚合限制在FILTERED DataTable中。但這並沒有發生。 我做錯了什麼（也許忘了刷新/繪製），或類似的東西是不可能的。

我的代碼是在這裏： 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

你可以一個數據表只綁定到儀表板/過濾器。

以聚合過濾後的數據表...

1. 等待'ready'事件的ChartWrapper
2. 聚合過濾後的數據表從ChartWrapper

見下例大樓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>