Hi and sorry for the delay (it was night where i live....)
What asgallant suggested can work with some modifications.
pass the event to the coloring function like this:
google.visualization.events.addListener(chart, 'onmouseover', function
(evt) {
changeColors(evt);
});
google.visualization.events.addListener(chart, 'onmouseout', function (evt)
{
changeColors(evt);
});
also I changed the function to use this to replace the color to the correct
one.
the event passing in the listener holds both datatable column and row of
the hovered column, thus allows us to decide on the color we want to show.
so now, it will look like this:
function changeColors(evt) {
var chartArea =
document.getElementsByTagName('iframe')[0].contentDocument.getElementById('chartArea');
var nodes = chartArea.getElementsByTagName('rect');
if (evt) {
// replacing the over/out element
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.getAttribute('fill') && (node.getAttribute('fill') ==
'#ccffcc' || node.getAttribute('fill') == '#cc00cc')) {
switch (evt.row % 4) {
case 0:
node.setAttribute('fill', 'blue');
break;
case 1:
node.setAttribute('fill', 'red');
break;
case 2:
node.setAttribute('fill', 'green');
break;
case 3:
node.setAttribute('fill', 'red');
break;
}
}
}
} else {
// finding all <rect> elements with #cc00cc fill color and replacing
them with 'blue','red','green','blue'
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.getAttribute('fill') && node.getAttribute('fill') ==
'#cc00cc') {
switch (i % 4) {
case 0:
node.setAttribute('fill', 'blue');
break;
case 1:
node.setAttribute('fill', 'red');
break;
case 2:
node.setAttribute('fill', 'green');
break;
case 3:
node.setAttribute('fill', 'red');
break;
}
}
}
// finding all <rect> elements with #ccffcc fill color and replacing
them with 'blue','red','green','blue'
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.getAttribute('fill') && node.getAttribute('fill') ==
'#ccffcc') {
switch (i % 4) {
case 0:
node.setAttribute('fill', 'blue');
break;
case 1:
node.setAttribute('fill', 'red');
break;
case 2:
node.setAttribute('fill', 'green');
break;
case 3:
node.setAttribute('fill', 'red');
break;
}
}
}
}
}
please bear in mind that there are mouse movement limitations. if you move
your mouse too fast, the script have some glitches. sorry about that ;-)
let me know how it works. (or not work)
On Tue, Nov 22, 2011 at 6:06 AM, Surya <[email protected]> wrote:
> I tried already :)
>
> Its not working .!!!
>
> On Nov 22, 1:41 am, asgallant <[email protected]> wrote:
> > Try calling changecolors() from the 'onmouseover' and 'onmouseout'
> events:
> >
> > google.visualization.events.addListener(chart, 'onmouseover', function
> () {
> > changeColors();});
> >
> > google.visualization.events.addListener(chart, 'onmouseout', function ()
> {
> > changeColors();
> >
> >
> >
> >
> >
> >
> >
> > });
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> To post to this group, send email to
> [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> 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 post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
