Re: interlinked interactive pie charts

[asgallant]

You can certainly do that.  How you go about it largely depends on the structure of the data.

On Thursday, June 7, 2012 7:39:12 AM UTC-4, Webtrendz wrote:

Hi all,

I was wondering if anyone had managed to link multiple pie charts together. 

e.g.

pie A = work (10) school (5) nothing (5)

if work is clicked then new pie should be added with following values: fulltime(10), parttime(5), flexi(3), self-employed(10).

I would dearly like some help on this asap, failing that i am willing to pay someone to help me code a few more features together for interlinking pie/doughnut charts as well as getting data from external file.

Regards,

Rahim

[Webtrendz]

Hi asgallant,

i have the opportunity of creating the csv file for the data, so right now i have nothing but if you can help me link 4 pie charts where clicking a segment would load another pie chart, small in size so it sits within the size of original pie then i should be able to take it from there...

i hope...

[asgallant]

Well, without knowing the specifics of the data structure, the basics would look something like this:

google.load('visualization', '1', {'packages': ['corechart']});
google.setOnLoadCallback(drawCharts);

function drawCharts() {
    var data1 = new google.visualization.DataTable();
    // populate data table
    
    var pie1 = new google.visualization.PieChart(document.getElementById('pie_chart_1'));
    var pie2 = new google.visualization.PieChart(document.getElementById('pie_chart_2'));
    
    google.visualization.events.addListener(pie1, 'select', function () {
        var selection = pie1.getSelection();
        // use selection to determine what you want to use for pie2
        // create a DataView or DataTable for pie2
        
        pie2.draw(data2, {/* options for pie2 */});
    });
    
    pie1.draw(data1, {/* options for pie1 */});
}​​​​​​​​​​​​ 

This can be extended to allow for multiple pie charts, going as many layers deep as you like.

[Rahim Haji]

Ok, this looks good so far, would you be able to write this for me in a html page, i am willing to pay for your time, if that sweetens the deal for you ;-)

also, upon clicking the segment i want to be able to load the new pie with animation... maybe growing from the centre out....

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/jv-tcr9qOlkJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Rahim Haji]

Hi asgallant,

ok so i am trying to do as per your suggestion but am stuck.

can you show me how to load another pie chart when 1 is clicked. 

we can use hard coded values for now... 

[asgallant]

I made up an example: http://jsfiddle.net/asgallant/ppPb4/ 

It might be a bit confusing to read, so if there's anything that doesn't make sense, feel free to ask.  Basically, I built a DataTable and grouped by column 0 to draw the first pie chart.  When users click the pie slices, I grab the selected slice and filter the DataTable based on it's column 0 value to get the data for the second pie chart.

You can't animate the drawing of the chart, but there are tricks to achieve a similar effect, which may or may not work to your satisfaction.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.