Is it possible to change the mouse cursor hover on the pie chart

[KanavKotik]

Hi!

I have piechart:

________________________________________________________________________

...

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {

...
chart = new google.visualization.PieChart(document.getElementById('chart_div'));

...

}

_________________________________________________________________________

Is it possible to change the mouse cursor hover on the pie chart?

[KanavKotik]

I'm listen to the event:
google.visualization.events.addListener(chart, 'onmouseover',
onmouseoverHandler);

and modify the cursor in the next function:

function onmouseoverHandler() {
chart_div.style.cursor = "hand";
}

but this didn't work correctly =(
Could you suggest any solution?

[asgallant]

You need to get at the internal contents of the chart's iframe.  jQuery can sometimes do this for you; there are situations in which the iframe's contents are inaccessible, you'll just have to see what happens when you try.

$("#chart_div").find("iframe").contents().find("body").css("cursor", "wait");

[KanavKotik]

Thank you for your reply, but unfortunately nothing happens. This means that the cursor can not be changed?

[asgallant]

It depends.  View your page in Chrome, and look at the javascript developers console (menu -> Tools -> JavaScript Console).  Are there any errors listed there?

[KanavKotik]

There are errors. What conclusion can be drawn from this result?

[20.09.2011 14:40:24] JavaScript - file://localhost/U:/Мария/WEB/1.html
Timeout thread: delay 50 ms
Uncaught exception: ReferenceError: Undefined variable: $
Error thrown at line 119, column 0 in onmouseoverHandler() in file://localhost/U:/Мария/WEB/1.html:
$("#chart_div").find("iframe").contents().find("body").css("cursor", "hand");
called from line 282, column 1086 in <anonymous function>(b) in https://www.google.com/uds/api/visualization/1.0/cd9282b3113b5d80b6043070ddbc00e4/default,corechart.I.js:
a(b.qn)
called from line 207, column 1008 in <anonymous function>(a) in https://www.google.com/uds/api/visualization/1.0/cd9282b3113b5d80b6043070ddbc00e4/default,corechart.I.js:
return this.Oh?this.jc[C](this.Id||this.src,a):this.jc[bc][C](this.jc,a)
called via Function.prototype.call() from line 215, column 415 in Jr(a, b) in https://www.google.com/uds/api/visualization/1.0/cd9282b3113b5d80b6043070ddbc00e4/default,corechart.I.js:
var c=a[bc](b);
called from line 215, column 124 in Ir(a, b, c, d, f) in https://www.google.com/uds/api/visualization/1.0/cd9282b3113b5d80b6043070ddbc00e4/default,corechart.I.js:
p&&!p.Fb&&(h&=Jr(p,f)!==!1)
called from line 216, column 465 in Kr(a, b) in https://www.google.com/uds/api/visualization/1.0/cd9282b3113b5d80b6043070ddbc00e4/default,corechart.I.js:
ta(b,d),f&=Ir(j,d,b[x],!1,b)&&b.Rc!=
called from line 460, column 118 in <anonymous function>(a, b, c) in https://www.google.com/uds/api/visualization/1.0/cd9282b3113b5d80b6043070ddbc00e4/default,corechart.I.js:
Kr(a,b)
called from line 854, column 86 in <anonymous function: V.Tn>(a, b) in https://www.google.com/uds/api/visualization/1.0/cd9282b3113b5d80b6043070ddbc00e4/default,corechart.I.js:
a?google[rc][fb][Xa](this,Fk,b):google[rc][fb][Xa](this,Ek,b)
called from line 491, column 238 in <anonymous function>() in https://www.google.com/uds/api/visualization/1.0/cd9282b3113b5d80b6043070ddbc00e4/default,corechart.I.js:
return a[Oc](b,c)
called via Function.prototype.call() from line 510, column 1042 in <anonymous function: V.handleEvent>(a) in https://www.google.com/uds/api/visualization/1.0/cd9282b3113b5d80b6043070ddbc00e4/default,corechart.I.js:
return this.lo?this.Ef[J](this.Vj||this.src,a):this.Ef[Kb][J](this.Ef,a)

[asgallant]

It looks like you are not loading the jQuery API.  Google hosts it if you don't have your own local version:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Also, you should use the "pointer" cursor style, "hand" is IE-only.

[KanavKotik]

Thank you very much! It really helped. However, it still remains the question: how can I get access not to all chart area [contents().find("body")], or text [contents().find("text")], but specifically to the chart?

[asgallant]

To find the chart's SVG code, use:

$("#chart_div").find("iframe").contents().find("#chart");

There really isn't anything that distinguishes the sub-elements of the chart, though (at least, if there is, I haven't been able to discern it).  Google doesn't use any names or id's for anything inside the SVG code, so you have to guess at which elements are the one's you're looking for.

[KanavKotik]

Thank you! Problem solved.