Google visualization 带分组数据过滤器的Google dashboard-如何绘制分组数据图表

我期待着创建一个谷歌图表API仪表板过滤，但我想图表的数据分组的基础上。例如，我可以创建如下数据表：

salesman  cust_age  cust_sex  quantity
Joe       21        Male      3
Joe       30        Female    10
Suzie     40        Female    2
Dave      15        Female    5
Dave      30        Male      10

我可以适当地创建一个仪表板，它可以创建两个控件（用于客户年龄和客户性别）和任意数量的输出图形和表格，所有这些都来自外部数据源——这是非常有用的东西，请参阅

我遇到的问题是如何按分组值显示所有图表。以饼图为例，在没有任何过滤器的情况下，有5块饼（乔，乔，苏西，戴夫，戴夫）-我只希望看到三块（乔，苏西，戴夫）。当然，当应用控件时，所有内容都应该更新

换句话说，过滤器应作用于原始数据表，但图表应基于分组数据表

我想我们可以使用分组功能： 但是，我似乎无法将过滤器绑定到更大的数据表，更新分组表，然后根据分组表绘制图表

---

有什么想法吗？

我找到了一个解决方法，您应该使用chartWrapper而不使用仪表板，这样您就可以将dataTable作为参数传递：

var $pieChart  = new google.visualization.ChartWrapper({
  'chartType': 'PieChart',
  'containerId': 'pie_chart',
  'options': {
    'width': 300,
    'height': 300,
  },
  //group the data for the pie chart
  'dataTable' : google.visualization.data.group($dataTable, [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}])
});  
 $pieChart.draw();
 $tableWrapper =  new google.visualization.ChartWrapper({
  'chartType': 'Table',
  'containerId': 'table_data'
});
var $genderPicker = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'gender_filter',
  'options': {
    'filterColumnIndex': '2',
    'useFormattedValue' : true,
    'ui': {
      'allowTyping': false,
      'allowMultiple': false,
      'labelStacking': 'vertical'
    }
  }      
});
new google.visualization.Dashboard(document.getElementById('table_dashboard')).
   bind([$genderPicker], [ $tableWrapper]).
   draw($dataTable);

然后，您应该向控件添加回调，以便每当控件更改时，仪表板外的图表都会更新，就像手动绑定一样，让我们假设cust_sex控件为$genderPicker，ChartWrapper表对象为$tableWrapper：

google.visualization.events.addListener($genderPicker, 'statechange',
function(event) {
  // group the data of the filtered table and set the result in the pie chart.
  $pieChart.setDataTable( google.visualization.data.group(
    // get the filtered results
    $tableWrapper.getDataTable(),
    [0],
    [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
  ));
  // redraw the pie chart to reflect changes
  $pieChart.draw();
});

结果：无论何时选择男性、女性或两者，饼图都将反映按名称分组的过滤结果。希望它能帮助别人，并为我的蹩脚英语感到抱歉。

阅读此帖：（至少阅读前两篇文章——其余的只有在处理大型数据集时才真正重要）

---

基本上，您必须使用对用户完全隐藏的中间图表（表格是一个不错的选择，因为它们的写入和呈现速度相对较快，内存占用比大多数图表要少）。将类别选择器绑定到仪表板中的此图表。然后为选择器的“statechange”事件设置一个事件处理程序，该事件处理程序获取数据，将其分组到新的DataTable中，并根据分组的数据绘制图表。

另一种方法是使用dashboard对象的“ready”事件，然后根据对仪表板主表所做的分组，在其中创建一个图表或表格

例如：

---

经过长期的研发，我找到了解决这个问题的方法。为了解决这个问题，我使用了两个事件监听器，其中一个是readyevent，另一个是statechangeevent as

google.visualization.events.addListener(subdivPicker, 'ready',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable( google.visualization.data.group(
// get the filtered results
 table.getDataTable(),
 [0],
[{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));    
// redraw the pie chart to reflect changes
columnChart1.draw();
});

google.visualization.events.addListener(subdivPicker, 'statechange',
 function(event) {
 // group the data of the filtered table and set the result in the pie chart.
 columnChart1.setDataTable( google.visualization.data.group(
 // get the filtered results
 table.getDataTable(),
 [0],
 [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
 ));
 // redraw the pie chart to reflect changes
 columnChart1.draw();
 });

---

找到我的初始（有问题）和修复（已解决）

运气好吗？实际上我需要做一些非常类似的事情…看起来不错，但是在我的代码中根本没有可用的变量

google.visualization.events.addListener（orgFilter，'statechange'，function（e）{alert（e）；}）给出“null”。在此语句之前定义的变量也不可用。有什么想法吗？这种方法比监听控件上的状态更改更干净、更容易，因为在尝试更新图表之前，我遇到了一些竞争条件，表中应用了过滤器。在仪表盘上收听ready（就绪）可以消除这种竞争状况，并像一种魅力一样发挥作用。感谢那些寻找其他示例的人，我找到了一个相关的解决方案，其中的详细信息有助于澄清这里的用法：我找到了一个相关的SO答案，它说明了这个答案中提到的隐藏的中间图表。看见
google.visualization.events.addListener(subdivPicker, 'ready',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable( google.visualization.data.group(
// get the filtered results
 table.getDataTable(),
 [0],
[{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));    
// redraw the pie chart to reflect changes
columnChart1.draw();
});

google.visualization.events.addListener(subdivPicker, 'statechange',
 function(event) {
 // group the data of the filtered table and set the result in the pie chart.
 columnChart1.setDataTable( google.visualization.data.group(
 // get the filtered results
 table.getDataTable(),
 [0],
 [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
 ));
 // redraw the pie chart to reflect changes
 columnChart1.draw();
 });