Click event in the whole Chart

[novito]

How can I catch a click event in the whole chart and not just on elements of the chart?

Right now I have this:

 google.visualization.events.addListener(chart,'select',callbackFunction);

But that just adds a listener for the items/elements of the charts. If, for example, in a column chart I click not on a column but on the xAxis, no event is triggered.  I tried adding an onclick on the container of the chart, but that just will trigger if you click on the outter part of the chart.

So my question is: How can I add a listener for the whole chart? Not just the elements on it.

[asgallant]

The easiest way is to set the "forceIFrame" option to false and then (within a 'ready' event listener for the chart) assign a click event handler to the "svg" tag inside the chart's div:

google.visualization.events.addListener(chart, 'ready', function() {
    document.getElementById('chart_div').getElementsByTagName('svg')[0].onclick = function() {
        alert('foo');
    };
});​ 

[novito]

I fail to see forceIFrame in the docs.  Is that a chart option?

[asgallant]

It is undocumented, likely on purpose.  It was added a few versions back as a way to test the charts outside the confines of an iFrame, with the eventual goal of switching the default behavior to not use iFrames (set to occur next release).  Some time in the future, the option will be removed entirely.  If everything goes smoothly, the process will be entirely transparent to developers and users.  I suggest using the option merely as a means around an inconvenience (that is, it is mildly annoying to get at the contents of an iFrame).

[novito]

Thanks, and many thanks.