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/.
On Sunday, November 3, 2013 12:12:54 AM UTC-4, John Smith wrote:
>
> 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
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
