Google charts mouseover for two charts

Question

This question concerns working with Google Charts.

I have a dataset consisting of categories with contribution amounts, bucketed into the days of a month. I represent the entire month in a pie chart, and I represent the data for individual days in a stacked bar chart. Both charts are essentially based on the same information. If I give both charts their information in the right order, the colors are coordinated between the two (ie each category in one has the same color as the same category in the other).

When you hover your mouse over a pie slice, it get highlighted. I would like to have the corresponding data in the stacked bar chart also get highlighted at the same time, and vica versa.

What would be the best way to accomplish this with the Google visualization api?

Answer 1

Use the <chart type>#setSelection method to highlight data points. If I understand your data structure correctly, something like this should work:

google.visualization.events.addListener(pieChart, 'select', function () {
    var selection = pieChart.getSelection();
    if (selection.length) {
        // assumes the row in the PieChart's data corresponds to the data series in the ColumnChart, which is the nth + 1 column
        columnChart.setSelection([{column: selection[0].row + 1}]);
    }
});
google.visualization.events.addListener(columnChart, 'select', function () {
    var selection = columnChart.getSelection();
    if (selection.length) {
        // assumes the data series in the ColumnChart's data corresponds to the row in the PieChart, which is the nth column - 1
        pieChart.setSelection([{column: selection[0].column - 1}]);
    }
});