Change the cursor when hover on the chart.

[Nikhil Agrawal]

HI All,

I am working on pie chart. On clicking on each pie segment it gets redirected to some url. So i want that when mouse hovered it should show a hand cursor.
I tried using jquery as follows inside an ready event listner.

$('iframe').contents().find('g').css( 'cursor', 'pointer' );

It doesn't show a hand cursor in the pie segment.  But instead in tooltip & legends of the pie chart.
Can any one suggest me what should be done to show show the hand pointer inside each segments.


Thanks in Advance ..:)

[asgallant]

That should work in every browser except IE < 9, provided you have set the forceIframe option to true.  You need to have two separate code paths to do this though, one for IE < 9 and one for everything else.  IE < 9 uses VML instead of SVG, so you have to figure out what the structure is for the pie slices in VML and then write code to handle them (keep in mind that IE < 9 always uses iframes, regardless of what you set the forceIframe option to).  If you didn't set the forceIframe option, the non-IE < 9 code-path should not select based on $('iframe').contents().

[Nikhil Agrawal]

HI asgallant,

Thanks for you reply. Can you share the reference for "forceIframe", i am not getting it in google chart api reference. :(

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/ZSIT9N_ZOE8J.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Nikhil Agrawal]

I got it, tested with forceIframe setting to true and false. But in both case it didn't worked. Only difference i notice is that with false there is no iframe and vice-versa, but no difference in cursor. My cursor changes when hovered in legends but not over chart area. Please help me for it. i can see the style of cursor changes to pointer for all "g" tags.

[API Developer]

Hey asgallant,

If I wanted to add keyboard functionality in the Google Chart API, would it be possible to use JQuery in a similar way to what's specified above?

$('iframe').contents().find('g')...

I'd imagine I'd need to use browser-based if statements to make sure this works, but is it possible?

[asgallant]

My mistake, there should be a capital F for "IFrame" in the option (ie, "forceIFrame").  The option isn't documented because it is used for testing right now, and will go away once the charts team is satisfied that the charts are stable without iframes.  What you want to do is to take a two-pronged approach to the problem.  1) set the forceIFrame option to false and use pure css for the non-IE<9 browsers, and then have a special code path for IE<9 that (on a mouseover event) sets the SVG's "path" elements css to use a "pointer" cursor.  See an example here: http://jsfiddle.net/asgallant/W3Pss/ 

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[asgallant]

I guess it depends on what you want the keyboard interaction to be.  You can bind keypresses using jQuery and then mess with the charts, but I don't know what use binding keypresses to the SVG would be.

[Nikhil Agrawal]

asgallant i want the pointer inside the coloured element only of pie chart, not on the entire svg element.. when i am adding css for svn it is showing hand cursor but when i am adding css cursor:pointer in g tags it is not working. Any solutions? 

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/sKvKcOrxXYQJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[asgallant]

Don't put it on "g" tags, put it on "path" tags, as I did in the example.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[API Developer]

Great! Do you know what I'd need to bind if I wanted to handle key-presses (like pressing down the CTRL button) no matter where they were clicked so I could differentiate some of my events. For example, I'd like to allow for multiple selections when the CTRL is held down, but when it is released, I'd like to manage those selections. Do you know of a way to do this?

[Nikhil Agrawal]

WOW..it worked... thanks a lot ..:)

BTW what do you do ? where you work on, which technology ?

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/9KuN4InsKewJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[Nikhil Agrawal]

@Api developer :

Below is jqyery code snipped it used to trigger an event when a key is pressed (down).

$(document).keydown(function(e) {

          //If escaped key is pressed.

   if (e.keyCode == 27) {

                     //Some functions.

   }

});

Dont't know exactly if the below code will work on not. 

google.visualization.events.addListener(pie, 'keydown', function (e) {
                alert(e.keyCode);
 });

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/vXwhl_zWmkwJ.

[asgallant]

No, the second example won't work; the Visualizations don't throw keydown events.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[asgallant]

I am a web developer/data analyst/programmer, but most of my work is coding in javascript and PHP.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

[Nikhil Agrawal]

That's great... :) I am also a  web-developer and works mostly in PHP and javascript.

Anyways, thanks buddy for you help. !!

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/7FT33VYaV6YJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[Nikhil Agrawal]

is there any events for key in google api ? I noticed that mouseover event was also not mentioned in the api reference. Don't it have a list of all events supported? 

[asgallant]

No, the events you can hook are based on things the charts do that you can create responses to.  Every visualization has a list of events that it can throw, see the "Events" section of the particular visualization (ie, for area charts: https://developers.google.com/chart/interactive/docs/gallery/areachart#Events).

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/7FT33VYaV6YJ.

[Nikhil Agrawal]

Thanks asgallant

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/rjP8jmoSmB0J.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[Nikhil Agrawal]

Hi Asgallant,

The above solution is fine for every browser except IE8. In IE8 is doesnt seems to work. 

IS there some solution to it ? Please help me.

[asgallant]

Which solution?  The mouse cursors?  If so, then it does work in IE8, but you have to use the whole solution, not just the css.  See the javascript here: http://jsfiddle.net/asgallant/W3Pss/, there is a bit in the middle that makes it work in IE 7 and 8.  The code I wrote requires jQuery (because it is much easier to work with, IMHO), but it can be written in plain js too.

Thanks asgallant

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/9KuN4InsKewJ.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/7FT33VYaV6YJ.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/rjP8jmoSmB0J.

To post to this group, send email to google-visua...@googlegroups.com.

[Nikhil Agrawal]

Thanks Asgallant .. it WOrked ... :)

Does the content send my google chart changes when it is rendred in IE < 9 ? Tried viewing it using developer tools, but it is not showing content inside the chart div .

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/Gs8Exu_ByasJ.

To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[Nikhil Agrawal]

Oh.. i got it, IE < 9 uses VML instead of SVG 

[asgallant]

Yup, that's it.  The other difference is that IE < 9 also will always use iFrames to hold the charts' code, while all other browsers have the option to go iFrame-less currently and will eventually be iFrame-less by default.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/Gs8Exu_ByasJ.

To post to this group, send email to google-visua...@googlegroups.com.

[asgallant]

It's almost the exact same code, just a couple adjustments:

1) change the "path" in the CSS to "g g rect"

2) change the "shape" in the js for IE < 9 to "rect"

http://jsfiddle.net/asgallant/W3Pss/7/ 

There is a side effect of this, where the gridlines also trigger the pointer cursor, but you should be able to get rid of that with a bit more refined CSS (probably something like using different CSS for "g:first-child g rect" I would guess, but I'm not that good with CSS).

On Thursday, September 6, 2012 3:10:49 PM UTC-4, Michael Rosenstein wrote:

Is there a way to do this on a *bar* chart?

[Michael Rosenstein]

Thank you -- that worked!
E.g., http://ctdbase.org/detail.go?type=chem&acc=D001151

Don't know how I would've figured that out myself (didn't see enough in the docs to help me).

Thanks again!

[asgallant]

It's not in the docs, and it could break at any time, because the internal structure of the charts is not guaranteed to stay the same.  I haven't seen anything using this method break in over a year, though, so you should be safe.