title: Google charts invoke onmouseover event
body: <p>I've been researching this problem all day long and no success. I have a google chart displaying some data, works just fine. </p>
  
  <p>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.</p>
  
  <p>But the "ugly" pagination generated by charts is not really appealing to my manager. </p>
  
  <p>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 <a href="http://jsfiddle.net/asgallant/6Y8jF/2/" rel="nofollow">http://jsfiddle.net/asgallant/6Y8jF/2/</a>)</p>
  
  <pre><code>var legend = document.getElementById('legend');
      var lis = [];
  
      var total = 0;
      for (var i = 0; i &lt; 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 = '&lt;div class="legendMarker" style="background-color:' + colors[i] + ';"&gt;' + legendValue + '&lt;/div&gt;';
  
              // append to the legend list
              legend.appendChild(lis[i]);
          }
      }
  </code></pre>
  
  <p>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 :</p>
  
  <p><a href="http://code.google.com/apis/ajax/playground/?type=visualization#chart_wrapper" rel="nofollow">http://code.google.com/apis/ajax/playground/?type=visualization#chart_wrapper</a></p>
  
  <p>If you hover on Germany or USA the bar on the graph will be selected or highlighted. </p>
  
  <p>How do I trigger the same behavior from my list items?</p>
  
  <p>I've tried :</p>
  
  <pre><code>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");
      });
  </code></pre>
  
  <p>I get "fired hover event" message in the firebug but nothing happens in my graph.</p>
  
  <p>I added the onmouseover listener to the graph (this function is fired) :</p>
  
  <pre><code>google.visualization.events.addListener(ga_chart, 'onmouseover', function(e) {
          console.log("listening bruv");
        });
  </code></pre>
  
  <p>But I'm not sure how to select particular part of the graph.</p>
  
  <p>I'm trying invoke any of these events which cause highlighting on the main graph :</p>
  
  <p><a href="https://developers.google.com/chart/interactive/docs/gallery/piechart#Events" rel="nofollow">https://developers.google.com/chart/interactive/docs/gallery/piechart#Events</a></p>
  
  <p>Any ideas or comments would be really appreciated.</p>