Context Menu or Right Click in Google Visualization Motion chart

1,069 views
Skip to first unread message

Himanshu Jain

unread,
Jul 5, 2013, 1:09:04 PM7/5/13
to google-visua...@googlegroups.com
Hello Everyone,

I have been working on Motion charts and looking if I can have right click or something like onclick method to the elements within a Google Visualization Motion chart?  For example, if a user clicks on point within the chart, then I can redirect the user to a page with more details. I've gone all through the documentation and can't find an example of how to do this.

Though, there is a "select" event available in case of "line charts" that works as per my expectation, but that isn't working in case of Motion charts. Any suggestions please. Thank you.

Regards,
Himanshu.


asgallant

unread,
Jul 5, 2013, 2:08:18 PM7/5/13
to google-visua...@googlegroups.com
Google cancels the propagation of right-click events in almost all visualizations, so you cannot capture them, sorry.

Himanshu Jain

unread,
Jul 5, 2013, 2:57:11 PM7/5/13
to google-visua...@googlegroups.com, drew_g...@abtassoc.com
Ok. But, what about left click option (also known as "select" event) which is currently available in case of line/bar charts but not for Motion charts. Pls. refer below code as an example:

google.visualization.events.addListener(chart, 'select', function() {
       location.href = 'http://www.google.com';
     });

Is there a way to redirect to a URL by clicking/selecting a bubble and passing its value too. Thank you.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/NgXzGOzVcHY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

asgallant

unread,
Jul 5, 2013, 3:03:01 PM7/5/13
to google-visua...@googlegroups.com, drew_g...@abtassoc.com, himans...@gmail.com
The MotionCharts don’t support the same range of events as the other charts: https://developers.google.com/chart/interactive/docs/gallery/motionchart#Events

In order to get the selected elements out of the MotionChart, you have to tease them out of the chart's state.  Here's an example of how to do it: http://jsfiddle.net/asgallant/DunKF/4/


On Friday, July 5, 2013 2:57:11 PM UTC-4, Himanshu Jain wrote:
Ok. But, what about left click option (also known as "select" event) which is currently available in case of line/bar charts but not for Motion charts. Pls. refer below code as an example:

google.visualization.events.addListener(chart, 'select', function() {
       location.href = 'http://www.google.com';
     });

Is there a way to redirect to a URL by clicking/selecting a bubble and passing its value too. Thank you.
On Fri, Jul 5, 2013 at 11:38 PM, asgallant <drew_g...@abtassoc.com> wrote:
Google cancels the propagation of right-click events in almost all visualizations, so you cannot capture them, sorry.


On Friday, July 5, 2013 1:09:04 PM UTC-4, Himanshu Jain wrote:
Hello Everyone,

I have been working on Motion charts and looking if I can have right click or something like onclick method to the elements within a Google Visualization Motion chart?  For example, if a user clicks on point within the chart, then I can redirect the user to a page with more details. I've gone all through the documentation and can't find an example of how to do this.

Though, there is a "select" event available in case of "line charts" that works as per my expectation, but that isn't working in case of Motion charts. Any suggestions please. Thank you.

Regards,
Himanshu.


--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/NgXzGOzVcHY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

Himanshu Jain

unread,
Jul 5, 2013, 4:06:19 PM7/5/13
to asgallant, google-visualization-api
It worked. Many thanks. But, it would be great if I can get values of other attributes too for the selected bubble, like date, expenses, sales and location in the current example, so that I can pass them as a query string. 
   *  arr.push(selection[i].key.dim0);

asgallant

unread,
Jul 5, 2013, 5:08:49 PM7/5/13
to google-visua...@googlegroups.com, himans...@gmail.com
The way the MotionCharts work, you are not guaranteed to have a DataTable entry for the selected element at a given time, as the chart creates interpolated data points in between the values in the DataTable.  You can access the state's "date" parameter to get a string-representation of the currently selected time and try to use that along with the selected value(s) to find some relevant data in the DataTable.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages