CODEWITHSUNDEEP
javascriptgoogle-visualization
George Duckett
George Duckett

Reputation: 32428

Handling a hover event for a google charts table

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?

Upvotes: 2

Views: 5615

Answers (1)

asgallant
asgallant

Reputation: 26340

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
        }
    });
});

Upvotes: 2

Related Questions