将 data.group 用于 Google 可视化仪表板

Question

我有一个带有两个键的 table，像这样：

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

我希望能够通过 key2 过滤此 table，所以我创建了一个 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": {...}
    });
]);

问题来了：我想在此 table 添加一个饼图，它按 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);

但是我不知道如何在仪表板中执行此聚合

Answer 1

保存对 table 图表的引用，
使用其 'ready' 事件绘制饼图

只要过滤器发生变化，'ready' 事件就会触发

您可以从 table 图表中提取过滤后的数据 table，
用于聚合

这将是用于绘制仪表板的相同数据 table，
应用任何过滤器

一定要分配 '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' 事件，
但它会为每个绑定控件和图表触发，
所以在这种情况下两次

而且您还需要从某个地方提取过滤后的数据 table，
因此保存对 table 图表的引用...

将 data.group 用于 Google 可视化仪表板

Using data.group for Google Visualization Dashboards

javascript

charts

graphing

dashboard

google-visualization