Question

I made a chart using Google Visualization’s ColumnChart like this.

It’s basically a stacked column chart using 3 x 7 matrix. In every bar, I remove the data for two other rows.
My problem is how to make the yellow bar (or other bar) looks like it has been clicked from the start using the Javascript code. Just like below.

*Notice the light border in the yellow bar.

Answer 1

You can programmatically select a bar by calling setSelection() on the chart. This can only be done after the “ready” event has been fired, i.e. you can set the selection upon this event being triggered as follows:

google.visualization.events.addListener(chart, 'ready', readyHandler);

function readyHandler(e) {
    chart.setSelection([{"row":1,"column":1}]);
}

Here’s a working example where we programmatically select the second bar after the chart has been drawn: http://jsfiddle.net/FFEZT/