CODEWITHSUNDEEP
javascripthtmlgoogle-visualization
MikiMrki
MikiMrki

Reputation: 195

Get data from table row on click

Here I have an table: http://jsbin.com/IhEmetI/8 built with Google visualization api and here is the code: http://jsbin.com/IhEmetI/8/edit

CODE:

 var table = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'chart2',
          'cssClassNames': 'cssClassNames',
          'options': {
        cssClassNames: cssClassNames,
        allowHtml: true
    }
        });

        // Create a dashboard
        new google.visualization.Dashboard(document.getElementById('dashboard')).
            // Establish bindings, declaring the both the slider and the category
            // picker will drive both charts.
            bind([slider, categoryPicker, stringFilter], [pie, table], [stringFilter, table]).
            // Draw the entire dashboard.
            draw(data, {'allowHtml':true, 'cssClassNames': 'cssClassNames'});      }

Now I want to get data Row when I click on some table row? How I can do that?

How I can do this with javascript? Is there some build in google API function for this?

Upvotes: 0

Views: 1459

Answers (2)

Husein Kattab
Husein Kattab

Reputation: 1

Use data.getFormattedValue(selection[i].row, column) For some reason, getValue always returns 0 for integer columns and empty for strings!

Upvotes: 0

asgallant
asgallant

Reputation: 26340

You need to use a 'select' handler for the Table. Working with a ChartWrapper, the syntax for this is a little different than normal (as you have to wrap the event handler for the Table inside a 'ready' event handler for the wrapper). It works like this:

google.visualization.events.addListener(table, 'ready', function () {
    google.visualization.events.addListener(table.getChart(), 'select', function () {
        var selection = table.getChart().getSelection();
        // iterate over all selected rows
        for (var i = 0; i < selection.length; i++) {
            // do something with selection[i].row
        }
    });
});

You have to iterate over all selected rows, since users can select multiple rows from the table.

Upvotes: 1

Related Questions