CODEWITHSUNDEEP
phpjquerygoogle-visualization
Learner2011
Learner2011

Reputation: 385

onMouseOver event doesn't get fired for a Google visualization DataTable

The onmouseover event doesn't get fired for the Google visualization DataTable.

var table = new google.visualization.Table(document.getElementById('results'));
var view = new google.visualization.DataView(d);
var cssClassNames = {'hoverTableRow': 'hover-table-row'};

view.setColumns([1,2,3,4,5]);
table.draw(view, {width:1200,'cssClassNames':cssClassNames});

google.visualization.events.addListener(table, 'ready', 
    function() {
      $('#results').mouseover(
          function (e) {
            alert('inside');
          });
    });

I do have set a view for the table hiding to one column. Can anyone give advise what is wrong with the code?

Here is the code http://jsfiddle.net/7ezfjpc9/

Upvotes: 0

Views: 145

Answers (1)

davidkonrad
davidkonrad

Reputation: 85538

You have two issues :

  1. see the docs :

The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired.

So what you need is to declare google.visualization.events.addListener(table, 'ready', function() { before draw() - then it will work.
See forked fiddle -> http://jsfiddle.net/apwaj5oo/

  1. You are lacking jQuery - guess this was a blunder when you created the fiddle :)

However, you really dont need to listen for ready before you attach the mouseover handler. You can simply use a delegated event :

$('#table_div').on('mouseover', 'table', function (e) {
    alert('inside');
});

This will attach the event handler to the <table> google visualization injects, even if you declare the handler before visualization actually has injected the <table> - another forked version of your fiddle -> http://jsfiddle.net/1rz9zqo5/

Upvotes: 1

Related Questions