Re: Same Event handler for multiple charts

559 views
Skip to first unread message

asgallant

unread,
Dec 6, 2012, 2:11:30 PM12/6/12
to google-visua...@googlegroups.com
The events don't pass any information about which chart fired the event, so there is nothing in the API that can do this, but there is a way around it:

function selectHandler (chart{
    var selection chart.getSelection();
}
google.visualization.events.addListener(myChart'select'function ({
    selectHandler(myChart);
});
google.visualization.events.addListener(myOtherChart'select'function ({
    selectHandler(myOtherChart);
});

On Thursday, December 6, 2012 5:44:42 AM UTC-5, Shivs wrote:
Hey

Wanted to know if it is possible to have same select event handler for multiple charts.
If so, how can one determine which chart was clicked (for calling function getSelection())?

Thanks

Vikas NV

unread,
Dec 6, 2012, 9:11:18 PM12/6/12
to google-visua...@googlegroups.com
Can this be achieved using closures as well?

asgallant

unread,
Dec 6, 2012, 10:15:02 PM12/6/12
to google-visua...@googlegroups.com
You might have to set it up a bit differently, but you should be able to make it work with closures.

Shivs

unread,
Dec 6, 2012, 11:58:11 PM12/6/12
to google-visua...@googlegroups.com
Somehow that did not work for me.
So i have an array of charts:-
google.visualization.events.addListener(baselinechart[classname], 'select',function(){
  selectHandler(baselinechart[classname].getSelection());
});

The above resulted in an empty array being passed to the function.

What am i missing?


On Friday, December 7, 2012 12:41:30 AM UTC+5:30, asgallant wrote:

Shivs

unread,
Dec 7, 2012, 12:00:09 AM12/7/12
to google-visua...@googlegroups.com
What is closures?

asgallant

unread,
Dec 7, 2012, 1:49:22 AM12/7/12
to google-visua...@googlegroups.com
Pass the chart to the selectHandler function; it should be this:

google.visualization.events.addListener(baselinechart[classname], 'select', function () {
    selectHandler(baselinechart[classname]);
});

If that is part of a loop (or other structure in which the value of "classname" can change), then you would want to use a closure to lock the value of classname to the handler at the time when the event handler is created.  It would look like this:

google.visualization.events.addListener(baselinechart[classname], 'select', (function (x) {
    return function () {
        selectHandler(baselinechart[x]);
    }
})(classname));

which locks the value of "classname" to the internal variable "x" at the time the event handler is created.  Otherwise, the event handler would use whatever the current value of classname is when the event fires.

Shivs

unread,
Dec 7, 2012, 2:38:21 AM12/7/12
to google-visua...@googlegroups.com
Thanks alot, that worked like a charm.

Thanks.

asgallant

unread,
Dec 7, 2012, 11:54:05 AM12/7/12
to google-visua...@googlegroups.com
You're welcome.

Gunjit Chhatwal

unread,
Nov 28, 2013, 4:11:52 AM11/28/13
to google-visua...@googlegroups.com
 Thanks. That helped a lot.
Reply all
Reply to author
Forward
0 new messages