Zoom Google Line chart

user_2440268 0
Viewed 45181

I am trying to create a line chart with the Google Visualization API. I want to enable zooming. Documents say that the 'explorer' option is useful. But when I try to use the 'explorer' option, the chart is shown but zoom does not work.

This is my code:

function drawVisualization(dataValues) {
var data = new window.google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Count');

for (var i = 0; i < dataValues.length; i++) {
    data.addRow([new Date(dataValues[i].Year, dataValues[i].Month-1, dataValues[i].Day), dataValues[i].Count]);
}

var formatter_short = new google.visualization.DateFormat({ formatType: 'short' });
formatter_short.format(data, 0);
var options = {
    title: "Time statistics",
    explorer: { maxZoomOut: 8 }
};
var chart = new google.visualization.LineChart(document.getElementById('date'));
chart.draw(data, options);
}

How can I resolve this problem and make a line chart zoomable?

linechart google-visualization charts javascript
4 Answers

The Below code will work but you should not use animation on your charts. Remove animation and use only explorer. This is a bug, if animation is applied then zoom will not work.

I spent weeks to figure this out.

explorer: {
  keepInBounds: true,
  maxZoomIn: 8.0
}
user_100050840
Related