Nested Pie/Donut Charts?

[John Smith]

How could I do something like this?


http://ofcgwt.googlecode.com/svn/demo/Events.html



-stumped


ps. pulling out the slices, animation etc isn't that important. Just the drill down into a 2nd chart per slice and pull back.


thanks

[asgallant]

You can register a "select" event handler on the first chart to drill down into your data and display a second chart (or replace the contents of the first) with the new data.  Theres no way to add a "back" button to the charts, so you'll have to add that to your HTML manually.  Something like this should get you started:

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Category');
    data.addColumn('string', 'Item');
    data.addColumn('number', 'Value');
    data.addRows([
        ['A', 'foo', 2],
        ['A', 'bar', 4],
        ['A', 'baz', 5],
        ['B', 'bat', 3],
        ['B', 'cad', 1],
        ['B', 'fiz', 7],
        ['B', 'pop', 6],
        ['C', 'qud', 3],
        ['C', 'raf', 5],
        ['C', 'taj', 5]
    ]);
   
    var groupedData = google.visualization.data.group(data, [0], [{
        column: 2,
        type: 'number',
        label: data.getColumnLabel(2),
        aggregation: google.visualization.data.sum
    }]);
   
    var chart1 = new google.visualization.PieChart(document.querySelector('#chart_div1'));
    var chart2 = new google.visualization.PieChart(document.querySelector('#chart_div2'));
   
    google.visualization.events.addListener(chart1, 'select', function () {
        var selection = chart1.getSelection();
        if (selection.length > 0) {
            var category = groupedData.getValue(selection[0].row, 0);
            var rows = data.getFilteredRows([{column: 0, value: category}]);
            var view = new google.visualization.DataView(data);
            view.setColumns([1, 2]);
            view.setRows(rows);
            chart2.draw(view, {
                height: 400,
                width: 600
            });
        }
        else {
            chart2.clearChart();
        }
    });
   
    chart1.draw(groupedData, {
        height: 400,
        width: 600
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

See jsfiddle example: http://jsfiddle.net/asgallant/ZrYbj/.

[John Smith]

as always, thanks for your time and expertise