带有分组数据过滤器的Google信息中心 - 如何绘制分组数据图表

Question

我希望创建一个带过滤功能的Google图表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

我可以适当地创建一个仪表板,创建两个控件(对于cust_age和cust_sex)以及从外部数据源中提取的任意数量的输出图表和表 - 这是非常有用的东西,请参阅http://code.google.com/apis /chart/interactive/docs/gallery/controls.html

我遇到的问题是如何按分组值显示所有图表.以饼图为例,没有任何过滤器,有5个切片(Joe,Joe,Suzie,Dave,Dave) - 我只想看到三个(Joe,Suzie Dave).当然,当应用控件时,一切都应该更新.

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

我猜我们可以使用分组功能:http: //code.google.com/apis/ajax/playground/？ type = visualization#group但是我似乎无法将过滤器绑定到更大的数据表,更新分组表,然后根据分组表绘制图表.

有什么想法吗？

Answer 1

我找到了一种解决方法,您应该使用不带仪表板的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();
});

结果:每当您选择男性,女性或两者时,饼图将反映按名称分组的过滤结果.希望它可以帮助某人,并为我破碎的英语抱歉.

Answer 2

另一种方法是使用仪表板对象的"就绪"事件,然后根据对仪表板主表进行的分组在其中创建图表或表格.

例如:

//create datatable, filter elements and chart elements for the the dashboard then:

dash=new google.visualization.Dashboard(document.getElementById(elId));
google.visualization.events.addListener(dash, 'ready', function() {
        //redraw the barchart with grouped data
        //console.log("redraw grouped");
        var dt=mainTable.getDataTable();
        var grouped_dt = google.visualization.data.group(
                          dt, [0],
                          [{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'}]);

        var mainChart = new google.visualization.ChartWrapper({
              'chartType': 'ColumnChart',
              'containerId': 'barChart',
              'options': {
                'height':500,
                'chartArea':{'left':200}
              },
              //view columns from the grouped datatable
              'view': {'columns': [0, 1]},
              'dataTable':grouped_dt
            });
        mainChart2.draw();
    });

dash.bind(
        [lots,of,filter,elements], 
        [lots,of,chart,elements]
    );
dash.draw(data)