Clickable PieChart

[nagraj]

Now that, the Pie Charts are interactive using the controls(like
slider,etc.). It would be good if we can filter the charts directly by
clicking in an area of the chart itself.

For example,

I have 2 charts, Gender of Employees and Age Range of Employees.
So, when I click on the Male area of the first chart, it should
automatically drill down the next chart(Age Range) w.r.t the filter
"Male".


This functionality will make the chart interaction even more user
friendly.

[asgallant]

You can do that already.  Set up an event handler for the 'select' event of your first pie chart that filters the data for and redraws the second pie.  Something like this:

var pie1 = new google.visualization.PieChart(document.getElementById('pie1_div'));
var pie2 = new google.visualization.PieChart(document.getElementById('pie2_div'));

google.visualization.events.addListener(pie1, 'select', function () {
    var sel = pie1.getSelection()[0];
    // use sel.row and sel.column to get whatever information you need to filter the data for pie2
    
    var pie2View = new google.visualization.DataView(pie2Data);
    view.setRows(arrayOfFilteredRowIndicies);
    pie2.draw(pie2View, pie2Options);

[Webtrendz]

Hi Gents,

this is similar to what i am trying to do, is there full code to show how this would be done... i am a total novice at the charts and would dearly love some help on it myself.

[asgallant]

Here's an example I just did up for another thread: http://jsfiddle.net/asgallant/ppPb4/