CODEWITHSUNDEEP
google-visualization
Chris
Chris

Reputation: 129

Google Visualization - Select Events w/ Dashboard

I am creating a dashboard with Google Viz and am having trouble with the select event when the data is filtered. It works fine when the page loads and nothing is filtered. However, after filtering the data, it does not select the correct row from the dataTable on 'select' events. Here is my jsfiddle and my listener:

http://jsfiddle.net/5E7zX/1/

google.visualization.events.addListener(rBubbleChart, 'select', function() {
    var selection = rBubbleChart.getChart().getSelection();
    var item = selection[0];
    var school = data.getValue(item.row, 1);
    alert('school is: ' + school);
});

When it is unfiltered, the alert box displays the school that was selected. However, when it is filtered on a school, the alert box does not display the correct school (the exception is Air Base Elem because that is the first school in the list).

Any thoughts on how to get the correct row of data once the data is filtered? Thanks.

Upvotes: 0

Views: 192

Answers (1)

asgallant
asgallant

Reputation: 26340

The selection indices refer to the data as seen by the chart, which is not necessarily the same as your base DataTable, so you need to check against the data used by the chart by calling the getDataTable method to fetch the chart's data, and then referencing that when getting a value:

google.visualization.events.addListener(rBubbleChart, 'select', function() {
    var selection = rBubbleChart.getChart().getSelection();
    // get the data used by the chart
    var dt = rBubbleChart.getDataTable();
    // test selection array length, since it can be zero when a user deselects a point!
    if (selection.length) {
        var item = selection[0];
        var school = dt.getValue(item.row, 1);
        alert('school is: ' + school);
    }
});

Upvotes: 1

Related Questions