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.

asgallant · Answer 1 · 2013-11-27T01:12:33.170

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

edited Nov 27 '13 at 01:12

answered Aug 20 '13 at 14:44

asgallant

26,060
6
72
87

Could you provide more information or a link to some sample code? Ideally I'd like to just use my mouse to pan; my boss doesn't like the adjustable box control. – jim collins Aug 20 '13 at 19:58
Clicking and dragging on the chart to pan is theoretically possible, but could be difficult to implement well. I'll have to think about this a bit. – asgallant Aug 20 '13 at 23:10
Good news: the API now supports zooming and panning without additional controls. Updated my post with an example. – asgallant Nov 27 '13 at 01:09
also in case you do not seem to see the explorer working, note that the function only works with continuous data such as numbers and dates – Leonard Kakande Apr 13 '16 at 10:37

score 0 · Answer 2 · answered Aug 20 '13 at 14:37

0

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

answered Aug 20 '13 at 14:37

jim collins

417
1
8
17

1

They are using the Visualization API to handle the data end of things, but the chart appears to be from another chart library. – asgallant Aug 20 '13 at 14:46
Yes I see that now. Back to square one. – jim collins Aug 20 '13 at 19:55

Vertically Panning a Google Column Chart

2 Answers2