The 'select' events don't bubble up to the wrapper, you need to ping them off the charts built by the wrapper using the ChartWrapper#getChart method, like this (assumes that chart1 and chart2 are chart wrappers):
// since event handlers for one chart require the other chart to be available,
// we must wait for both wrappers' 'ready' events to fire
var ready = {chart1: false, chart2: false};
google.visualization.events.addListener(chart1, 'ready', function() {
ready.chart1 = true;
// whichever listener fires second should fire set up the 'select' event handlers
if (ready.chart2) {
createListeners();
}
});
google.visualization.events.addListener(chart1, 'ready', function() {
ready.chart2 = true;
// whichever listener fires second should fire set up the 'select' event handlers
if (ready.chart1) {
createListeners();
}
});
function createListeners () {
google.visualization.events.addListener(chart1.getChart(), 'select', function() {
chart2.getChart().setSelection(chart1.getChart().getSelection());
});
google.visualization.events.addListener(chart2.getChart(), 'select', function() {
chart1.getChart().setSelection(chart2.getChart().getSelection());
});
}
If your charts are reasonably fast to draw, it would actually be marginally better to draw the second chart from the 'ready' event handler of the first and then create the 'select' event handlers from the 'ready' event handler of the second wrapper. If you're drawing these as part of a Dashboard, then you can skip this cross-ready event handling code and create the 'select' event handlers from the Dashboard's 'ready' event handler.