使用data.group爲谷歌可視化儀表盤

我有一個表有兩個按鍵，就像這樣：使用data.group爲谷歌可視化儀表盤

+------+------+-------+ 
| key1 | key2 | value | 
+------+------+-------+ 
| abc | 123 | 5 | 
| abc | 456 | 7 | 
| abc | 789 | 9 | 
| xyz | 123 | 2 | 
| xyz | 456 | 4 | 
| xyz | 789 | 6 | 
+------+------+-------+

我希望能夠通過鍵2過濾此表，所以我創建了一個google.visualization.Dashboard像這樣：

var dashboard = new google.visualization.Dashboard(); 
dashboard.bind([ 
    new google.visualization.ControlWrapper({ 
     "controlType": "CategoryFilter", 
     "containerId": "...", 
     "options": { 
      "filterColumnIndex": 1 
     } 
    }); 
], [ 
    new google.visualization.ChartWrapper({ 
     "chartType": "Table", 
     "containerId": "...", 
     "options": {...} 
    }); 
]);

現在，這裏的難題是：我想一個餅圖添加到此表它通過key1的彙總數據。所以，不進行任何過濾，餅圖會顯示類似：

abc = 21 
xyz = 12

但是，如果我過濾下調至「456」，那麼它應該顯示：

abc = 7 
xyz = 4

現在，如果我不使用儀表盤，我可以做到這一點的聚集，像這樣：

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

但是我不知道如何在儀表板內執行該聚集

來源

2017-08-25 stevendesu

保存表圖表參考，
利用其'ready'事件繪製餅圖

隨時過濾器的變化，'ready'事件將觸發

可以從表圖拉過濾後的數據表，
使用您的聚集

這將是用於繪製儀表板相同的數據表，
與任何濾波器應用

只是一定要分配'ready'事件，
繪製儀表板

類似下面的代碼片段...

var chartTable = new google.visualization.ChartWrapper({ 
    "chartType": "Table", 
    "containerId": "...", 
    "options": {...} 
}); 

var dashboard = new google.visualization.Dashboard(); 
dashboard.bind([ 
    new google.visualization.ControlWrapper({ 
     "controlType": "CategoryFilter", 
     "containerId": "...", 
     "options": { 
      "filterColumnIndex": 1 
     } 
    }); 
], [ 
    chartTable 
]); 

google.visualization.events.addListener(chartTable, 'ready', function() { 
    var graph = new google.visualization.PieChart(needContainer); 
    var aggregatedData = google.visualization.data.group(
     chartTable.getDataTable(), 
     [0], 
     [{ 
      "column": 2, 
      "aggregation": google.visualization.data.sum, 
      "type": "number" 
     }] 
    ); 
    graph.draw(aggregatedData); 
}); 

dashboard.draw(data);

音符之前：儀表板也有'ready'事件，
但將爲每個綁定控件和圖表觸發，
因此在這種情況下兩次

而且您還需要一些在哪裏拉過濾數據表，
因此保存對錶格的引用...

來源

2017-08-25 14:55:30 WhiteHat

使用data.group爲谷歌可視化儀表盤

回答

相關問題