Vertically Panning a Google Column Chart

Question

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.

Answer 1

Ironically the library I referenced is actually using Google Visualization charts and doing some amazing things with them, including panning.

Answer 2

You 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.net/asgallant/KArng/