Google visualization data grouping

Question

I have a sample Google visualization dashboard with two controls and two column charts in which the second column chart is drawn using the aggregation of data table as,

'dataTable' : google.visualization.data.group(data, [0],
 [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}])

and it is redrawn using a intermediate table chart as,

google.visualization.events.addListener(divPicker, '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'}]
 ));

All codes are work fine. But the problem is the chart created by aggregation not changing correctly when I selecting the controls. And it changes only when I select same control option twice.

mpsbhat mpsbhat · Accepted Answer · 2013-04-27T06:33:13

After a so many hours of cracking head finally I fixed the problem.

For the fix, I used two event listeners in which one is ready event and other is statechange event 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();
 });

Find the updated code in this fiddle.

Google visualization data grouping

1 Answers