Re: Dynamic pie with dashboard

[asgallant]

Read this thread: https://groups.google.com/d/msg/google-visualization-api/IQO4B1bjZzs/jpb7CzqakwMJ (read at least the first two posts - the rest are really only important if you are dealing with large data sets).

Basically, you have to use an intermediary chart (tables are a good choice, because they are relatively fast to write and render, with a lower memory footprint than most charts) that is completely hidden from the users.  You bind the category picker to this chart in the dashboard.  Then you set up an event handler for the picker's "statechange" event that takes the data, groups it into a new DataTable, and draws the PieChart based on the grouped data.

On Tuesday, June 19, 2012 12:09:07 AM UTC-4, Nestor de Haro wrote:

I created a new table that sums the Family Column but I want to use the category Picker for the Gender Column

This is my code for the example, there's no problem with table 1 but with table 2 send an error because look for the Gender Column but there's no that column for table2.

I think Join is one possible solution, but I couldn't make it works.

The idea of this chart is to show the Quantity when sum the Family Column into a pie chart, in the same time I want to use Control Picker for Gender.

function drawDashboard(){

var table1= google.visualization.arrayToDataTable([

['Gender', 'Family', 'Quantity'],

['Female', 'Tequila', 3],

['Male', 'Whisky', 5],

['Male', 'Tequila', 8]

]);

var table2 = google.visualization.data.group(table1,[1],[{

'column':2,

'aggregation': google.visualization.data.sum,

'type': 'number'

}]);

//Create a dashboard

var dashboard = new google.visualization.Dashboard(

document.getElementById('dashboard_div'));

//Create a category picker

var categoryPicker = new google.visualization.ControlWrapper({

'controlType': 'CategoryFilter',

'containerId': 'control_div',

'options': {

'filterColumnLabel': 'Gender',

'ui': {

'labelStacking': 'vertical',

'allowTyping': false,

'allowMultiple': false

}

}

});

//Create a pie chart

var pieChart = new google.visualization.ChartWrapper({

'chartType': 'PieChart',

'containerId': 'chart_div',

'options': {

'width': 300,

'height': 300,

'pieSliceText': 'value',

'legend': true

},

'view': {'columns':[1,2]}

});

dashboard.bind(categoryPicker,pieChart);

dashboard.draw(table1);  --> table1 should be replaced by a new table to use the dashboard with no problems.

Thanks