Is there any JavaScript out there or examples for horizontally panning a Google Column Chart? I have several months worth of data and I would like the users to be able to view it left to right. This is the functionality I would like: .html. My users have pushed back against using an Annotated TimeLine.
Is there any JavaScript out there or examples for horizontally panning a Google Column Chart? I have several months worth of data and I would like the users to be able to view it left to right. This is the functionality I would like: http://almende.github.io/chap-links-library/js/graph/examples/example05_gaps_in_data.html. My users have pushed back against using an Annotated TimeLine.
Share Improve this question edited Feb 3, 2014 at 11:20 laaposto 12.2k15 gold badges58 silver badges72 bronze badges asked Aug 20, 2013 at 13:41 jim collinsjim collins 4171 gold badge8 silver badges18 bronze badges2 Answers
Reset to default 5You can hook a ColumnChart up to a ChartRangeFilter and get the pan and zoom functionality of the AnnotatedTimeline.
[Edit]
The new version of the Visualization API supports zooming and panning charts via the explorer option. The default allows users to zoom with the scroll wheel and pan by clicking and dragging. Here's an example:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
var y = 50;
for (var i = 0; i < 1000; i++) {
y += Math.ceil(Math.random() * 3) * Math.pow(-1, Math.floor(Math.random() * 2));
data.addRow([i, y]);
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
explorer: {
axis: 'horizontal',
keepInBounds: true
}
});
}
google.load('visualization',
jsfiddle: http://jsfiddle/asgallant/KArng/
Ironically the library I referenced is actually using Google Visualization charts and doing some amazing things with them, including panning.