GeoChart : Change mouse cursor

2,576 views
Skip to first unread message

Sachin

unread,
May 24, 2012, 1:07:35 PM5/24/12
to google-visua...@googlegroups.com
Hi,

I am using Google Visualization Geochart API for one of the applications.
My query is that in any case can change the mouse cursor to a hand cursor or any other type on mousehover on any regions or markers?

please let me know if there is any way.

Thanks and Regards,
Sachin

asgallant

unread,
May 24, 2012, 1:52:05 PM5/24/12
to google-visua...@googlegroups.com
jQuery can help you here.  I haven't tested it, but in theory this should work:

Set the 'forceIFrame' option to false (best for future compatibility - it can be done without this step, however).  Use a ready event handler for your chart, and run this:

google.visualization.events.addListener(geochart, 'ready', function () {
    $('#visualization').find('path[fill!="#f5f5f5"]').css('cursor', 'pointer');
});

If you use a color other than the default for dataless regions, you will need to change the '#f5f5f5' to the correct color string.  If you want a hand cursor to appear for dataless regions too, then you can omit the '[fill!="#f5f5f5"]'.

Sachin

unread,
May 25, 2012, 12:01:49 PM5/25/12
to google-visua...@googlegroups.com
Hi asgallant,
Thanks a lot for helping in. The hand cursor works but there is a problem in it.
I have different methods which display region,country and cities separately.. I can not integrate them in one. I have also used regionClick and select event to highlight country from the region clicked or highlight cities from the country clicked.
now the problem is when I set 'forceIFrame' option to false  then map get displayed two times on page load. When I click on region to highlight , 2 more maps get visible. hence please help me to solve the problem.

Thanks and regards,
Sachin

asgallant

unread,
May 25, 2012, 1:46:48 PM5/25/12
to google-visua...@googlegroups.com
If you post your code or a link to the page, I'll take a look and see what I can find.

MC Get Vizzy

unread,
May 28, 2012, 6:01:32 AM5/28/12
to google-visua...@googlegroups.com
What browser are you using?  Does the double map happen only when you add the hand cursor, or all the time?

--
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/-/k86YxX6rkZIJ.

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.

Sachin

unread,
May 28, 2012, 12:31:13 PM5/28/12
to google-visua...@googlegroups.com
I am using Firefox 8.0.1 and IE 9.. It happens only when I set forceIFrame to false.

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.

MC Get Vizzy

unread,
May 30, 2012, 6:34:53 AM5/30/12
to google-visua...@googlegroups.com
I think this issue will be fixed in the upcoming release.  For now, you can load visualization 1.1 and that should resolve the problem.

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

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

unread,
Jun 5, 2012, 10:45:16 AM6/5/12
to google-visua...@googlegroups.com
If you leave out "forceIFrame" in the current release (or set it to true in the next release), then you need to use a few tricks to get inside the iFrame, but it can be done (search this forum, I've posted a bunch of things on the topic).

I dug into the SVG and it looks like the GeoCharts add a new path on mouseover of regions, which overlaps the other path.  Since this path is new, it doesn't have the css to change the cursor associated with it.  It turns out, however, that I made the original unnecessarily complicated; there is a pure CSS solution to the problem: http://jsfiddle.net/asgallant/HNkLn/ 

This solution probably works best with forceIFrame = false.  You could, conceivable, add this CSS to the <head> of the iFrame if you didn't want to use the forceIFrame option, but I haven't yet encountered a reason to stick with iFrames.

On Tuesday, June 5, 2012 7:31:25 AM UTC-4, Xia Wu wrote:

Hi Asgallant,

right now for my geochart I also face the same request of when mouseover then change to the hand cursor. I tried the solution you suggested , however, the it only change for short time(one second maybe) when the mouse moved from dataless area to the dataarea and if the option 'forcelFrame' is not set to false, this will not working at all. I paste the code in the following, could you help me to find out maybe there are some bugs i made there? Thanks in advance!

Xia



google.load('visualization', '1', {packages: ['geochart']});
 
     function drawVisualization() {
       var data = google.visualization.arrayToDataTable([
         ['Country', 'Popularity'],
         ['Germany', 200],
         ['United States', 300],
         ['Brazil', 400],
         ['Canada', 500],
         ['France', 600],
         ['RU', 700]
       ]);
 
       var geochart = new google.visualization.GeoChart(
           document.getElementById('visualization'));

 
      google.visualization.events.addListener(geochart, 'ready', function () {
         $('#visualization').find('path[fill!="#f5f5f5"]').css('cursor','pointer');
       });
 
       geochart.draw(data, {width: 556, height: 347,forceIFrame:false});
 
     }
 
     google.setOnLoadCallback(drawVisualization);

asgallant

unread,
Jun 5, 2012, 11:54:29 AM6/5/12
to google-visua...@googlegroups.com
BTW, this solution doesn't work in IE < 9, so we need an alternative: http://jsfiddle.net/asgallant/82TYA/ 

There probably is a way to do this as pure CSS, but a) I'm not a CSS expert, and b) VML hates me, so I don't have one.

Sachin Sankeshwari

unread,
Jun 13, 2012, 8:09:36 AM6/13/12
to google-visua...@googlegroups.com
Hi,

Can I change a region color or marker color on mouse hover?

Thanks,
Sac

--
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/-/SIzlgDFzveUJ.

asgallant

unread,
Jun 13, 2012, 10:17:44 AM6/13/12
to google-visua...@googlegroups.com
You might be able to, with a bit of hackery.  I started some code for this, though it needs a great deal of refinement: http://jsfiddle.net/asgallant/82TYA/5/ 

The problem is that the geocharts draw a new path in SVG on mouseover that overlaps the old path, and we run into a timing issue, where we don't have any way to tell which mouseover event will be fired first, so we can't be certain the new path will exist when our code executes.

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.

Sachin

unread,
Jun 25, 2012, 1:33:55 PM6/25/12
to google-visua...@googlegroups.com
Hi,

Actually my application has two different methods, One to highlight a region country by country and other one to highlight a specific country and its cities as markers.
If I use forceIframe=false and I click on a country then another map is drawn below that. Why it is so?

-Sachin

Carlos Moreira

unread,
Sep 24, 2012, 1:01:43 PM9/24/12
to google-visua...@googlegroups.com
hello asgallandt
did you ever succeed to complete that example  http://jsfiddle.net/asgallant/82TYA/5/ ?
I'm trying to do the same, also trying to disable that mouseover effect with the stroke-width variable, but I can't find a solution. New paths just get drawn over it..
It would be great if you could share any other developments of that experiment.
cheers!

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

asgallant

unread,
Sep 24, 2012, 2:07:28 PM9/24/12
to google-visua...@googlegroups.com
I was about to say no, because of the timing issue, but then I remembered a trick I recently learned in jQuery which actually makes this work: http://jsfiddle.net/asgallant/82TYA/63/.  It's not perfect, but it mostly works.

You might be able to adapt that to your needs.  The major issue is that it only captures the actual SVG/VML path being hovered over, so regions that are drawn as multiple paths (see Canada and Russia in the example) don't change all the paths when hovering.

Carlos Moreira

unread,
Sep 24, 2012, 5:58:17 PM9/24/12
to google-visua...@googlegroups.com
That's great anyway asgallant!
Thanks for sharing! It will be usefull.
cheers

Carlos Moreira

unread,
Sep 26, 2012, 8:35:39 AM9/26/12
to google-visua...@googlegroups.com
Since the API updated a couple of days ago, the maps are not built in iframes, making it much easier to manipulate with css.

So, the example asgallant shared in the last reply, would be the similar to build css like:
       
        path:not([fill^="#f5f5f5"]):hover {
            cursor:pointer;
            fill:red;               
        }

Just sharing this also
Now it will be really cool to manipulate the maps with css also :)

Amol P

unread,
Jan 31, 2016, 3:10:51 AM1/31/16
to Google Visualization API
@Carlos,
  Thanks. This works perfectly! Could you explain me the syntax though. Why does it need the caret(^=) and not the exclamation (!=) to check fill color?

Amol P

unread,
Feb 2, 2016, 6:46:52 PM2/2/16
to Google Visualization API
Ok answering my own Q here for anyone else who may need it: the caret= (^=) is an CSS attrbute selector (https://www.w3.org/TR/css3-selectors/#attribute-selectors)
Reply all
Reply to author
Forward
0 new messages