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.

Answer 1

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/