使用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为谷歌可视化仪表盘

回答

相关问题