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

Posted

技术标签:

【中文标题】将 data.group 用于 Google 可视化仪表板【英文标题】:Using data.group for Google Visualization Dashboards 【发布时间】:2018-02-03 13:47:27 【问题描述】:

我有一个有两个键的表,如下所示:

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

我希望能够通过 key2 过滤这个表,所以我创建了一个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);

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

【问题讨论】:

【参考方案1】:

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

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

您可以从表格图表中拉出过滤后的数据表格, 用于您的聚合

它将与用于绘制仪表板的数据表相同, 应用任何过滤器

请务必指定 'ready' 事件, 在绘制仪表板之前

类似下面的 sn-p...

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

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

【讨论】:

以上是关于将 data.group 用于 Google 可视化仪表板的主要内容,如果未能解决你的问题,请参考以下文章

将数据从 Google 表格流式传输到 BigQuery 以在 Tableau 中进行可视化

将 Google 可视化折线图 hAxis 原点设置为其初始值

Google图表(可视化)中堆积条形图中的第三个条形图无效

Google 可视化库 Facets:如何将 python 模块“facets”输出 html 离线保存到本地驱动器?

Google将于2017年下半年推出Elasticsearch云服务

IE8 Google 可视化权限被拒绝