Google charts invoke onmouseover event

Question

I've been researching this problem all day long and no success. I have a google chart displaying some data, works just fine.

I've been working on somewhat more detailed graph including about dozen graph legend items. I wanted to display my legend below the graph so I set it's position to bottom.

But the "ugly" pagination generated by charts is not really appealing to my manager.

So I've hidden it and re-rendered the legend items below the graph without pagination with some custom javascripting(actually I saw the code from here http://jsfiddle.net/asgallant/6Y8jF/2/)

var legend = document.getElementById('legend');
    var lis = [];

    var total = 0;
    for (var i = 0; i < data.length; i++) {
        var legendValue = data[i];

        if(legendValue.indexOf("PROVIDER") == -1){

            // create the legend entry
            lis[i] = document.createElement('li');
            lis[i].id = 'legend_' + legendValue;
            lis[i].className = 'legendary';
            lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';">' + legendValue + '</div>';

            // append to the legend list
            legend.appendChild(lis[i]);
        }
    }

So almost there with the same functionality as the actual graph legend, one thing missing though. When original google chart legend is hovered the item on the graph are highlighted as in this example :

http://code.google.com/apis/ajax/playground/?type=visualization#chart_wrapper

If you hover on Germany or USA the bar on the graph will be selected or highlighted.

How do I trigger the same behavior from my list items?

I've tried :

function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
 }

$(document).on("hover", ".legendary", function(){
        eventFire(document.getElementById('graphico'),'select');
        eventFire(document.getElementById('graphico'),'onmouseover');
        $("#graphico").trigger("onmouseover");
        $("#graphico").trigger("select");
        console.log("fired hover event");
    });

I get "fired hover event" message in the firebug but nothing happens in my graph.

I added the onmouseover listener to the graph (this function is fired) :

google.visualization.events.addListener(ga_chart, 'onmouseover', function(e) {
        console.log("listening bruv");
      });

But I'm not sure how to select particular part of the graph.

I'm trying invoke any of these events which cause highlighting on the main graph :

https://developers.google.com/chart/interactive/docs/gallery/piechart#Events

Any ideas or comments would be really appreciated.

if you are sure '#graphico' is the right id to call, try using $('#graphico').trigger('hover'); instead of onmouseover. — feskr, Jan 07 '13 at 16:08
yes I'm sure because the "fired hover event" echoes in the console — Gandalf StormCrow, Jan 07 '13 at 16:12
well.. when you console.log($('#graphico')); do you get the element you need? and i just read it should be $('#graphico').trigger('mouseenter'); http://stackoverflow.com/questions/11074815/jquery-trigger-hover-on-anchor — feskr, Jan 07 '13 at 16:14

score 5 · Accepted Answer · answered Jan 07 '13 at 16:29

5

Add an attribute to the li-elements where you can identify the related row:

// create the legend entry
lis[i] = document.createElement('li');
lis[i].setAttribute('data-row',i);

after drawing the chart, call this:

   $('#legend li').hover(function(){
      chart.setSelection([{row:$(this).data('row'),column:null}]);
    },function(){
      chart.setSelection(null);
    });

Demo: http://jsfiddle.net/doktormolle/2JWQY/

answered Jan 07 '13 at 16:29

Dr.Molle

116,463
16
195
201

thanks this looks really great, I'd like to apply to more than one graph. One more question how do I apply this logic to multiple rows but on the same columns? I've tried `ga_chart.setSelection([{row:0,column:$(this).data('column')}]);` `ga_chart.setSelection([{row:1,column:$(this).data('column')}]);` doesn't work as I intended really – Gandalf StormCrow Jan 07 '13 at 16:56
never mind this is good enough, by good enough I mean wonderful I wish I could give your 10+ – Gandalf StormCrow Jan 07 '13 at 17:16
the visualization of the selection depends on the used chart-type, selecting a complete column wouldn't have any effect on a PieChart(but it would on e.g. a LineChart). However, of course you must define `data(column)`, my example doesn't do this. – Dr.Molle Jan 07 '13 at 17:49

Google charts invoke onmouseover event

1 Answers1

Linked