Google Charts BarChart OnClick or OnSelect

Question

The code creates Google Charts Bar chart with 2 columns. ``` 'Stats', 'type' => 'string'), array('label' => 'Value', 'type' => 'number') ); $rows = array(); while($r = mysql_fetch_assoc($sth)) { $temp = array(); $temp[] = array('v' => (string) $r['Stats']); $temp[] = array('v' => (int) $r['Value']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); ?>

Accepted Answer

Yes, you can do that by adding in a `'select'` event handler that gets the data from your DataTable, updates your div with the value, sets the color of the bar via a `'style'` role column in a DataView, and redraws the chart using the view. Here's an example:

```
google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length) {
        var row = selection[0].row;
        document.querySelector('#myValueHolder').innerHTML = data.getValue(row, 1);

var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, {
            type: 'string',
            role: 'style',
            calc: function (dt, i) {
                return (i == row) ? 'color: red' : null;
            }
        }]);

chart.draw(view, options);
    }
});
```

See it working here: http://jsfiddle.net/asgallant/kLL2s/

Google Charts BarChart OnClick or OnSelect

Solution

Problem