2

Is it possible to trigger a javascript method when the mouse hovers over a row in a google chart table?

I can see there are examples of doing this for a bar chart for example, but I tried the same event on a table and nothing happened.

Is it possible?

1 Answer 1

2

No, the Table visualization does not support mouseover events. You can attach regular javascript event handlers to the table rows, though. Here's an example that uses jQuery to attach a mouseover event handler to the table rows:

google.visualization.events.addListener(table, 'ready', function () {
    $('#table_div tr').mouseover(function (e) {
        // do something
    });
});

Edit:

if you want to get the row/column information from the cells, this is how you do it:

// data is the DataTable
for (var i = 0; i < data.getNumberOfRows(); i++) {
    for (var j = 0; j < data.getNumberOfColumns(); j++) {
        data.setProperty(i, j, 'className', 'row_' + i + ' column_' + j);
    }
}

// create the event handler on the <td>'s
google.visualization.events.addListener(table, 'ready', function () {
    $('#table_div td').mouseover(function (e) {
        var row, column;
        var classNames = this.className;
        var match = classNames.match(/row_(\d)+/i);
        if (match.length > 1) {
            row = match[1];
        }
        match = classNames.match(/column_(\d)+/i);
        if (match.length > 1) {
            column = match[1];
        }

        if (row != null) {
            // then we have moused over a data row
        }
    });
});
2
  • Is there an easy way of getting the row number (like the select event gives)? Sep 11, 2013 at 15:52
  • Not really. You can work around it to an extent by setting the "className" property of each cell in the DataTable to indicate the row number, and use a mouseover event listener on the <td>'s instead. You can grab the row information from the <td>'s className attribute. I'll edit my answer with example code.
    – asgallant
    Sep 12, 2013 at 3:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.