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.

• javascript
• jquery
• google-visualization
• chap-links-library

Share Improve this question Follow edited Feb 3, 2014 at 11:20 laaposto 12.2k1515 gold badges5858 silver badges7272 bronze badges asked Aug 20, 2013 at 13:41 jim collinsjim collins 41711 gold badge88 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/asgallant/KArng/

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