Zoom and Pan in Line Chart

[gaurav dubey]

Hello All,

I am new for Google Visualization API, i need to integrate line chart
in my gwt module, the requirement of the chart is it shall support
zooming and panning.

The types of zoom we require is area zoom(x and y axis), x axis zoom
and y axis zoom.

But i could not find any way to proceed. Please suggest me how can i
start the implementation of this kind of chart?


Thanks in advance
Gaurav

[asgallant]

Annotated line charts support x-axis zooming and panning by default, but I don't think there is any easy way to get y-axis zooming.  The API has a rather unfriendly tendency to override any axis scaling parameters you set if any of your data points fall outside the max or min values, so that won't work.  You might be able to hack it using data views to filter out the data points with values outside your zoom parameters, but I don't think that will really do what you want it to, as it will draw the line as if those points did not exist at all.

[Hangas]

And anyway to get panning only without using annotated line charts? 

My goal was to be able to pan a set of LineCharts bound to a RangeFilter in such a way that the panning was consistent to all charts and the control.

[rio]

I've never noticed this and i hope this doesn't happen.

As far as i know this doesn't happen on the Y-Axis (vertical axis?). I currently using -99 value to hold items that are Null. It does draw a line which disappears when it goes out of range but the fixed range stays the same.  I also have another functionality that can override the fixed Y axis normally Range of 1 - 7.. and replace the lower number with the min array of Y values in the line chart (excluding -99 values). Unfortunately this is not achieved through a page refresh and not a chart redraw() which i believe is what you are after.

[Hangas]

Actually I'm looking for a way to pan only on the X axis.

See example http://lab.hangas.com/lab/sample2.php

I wanted to be able to pan the charts by dragin any of the charts horizontally, buy in a way that the RangeFilter on the bottom is kept in sync.

Like the horizontal pan on the annotated timeline, but with multiple bound line charts.

Any pointers on this?  Is there any event that I can capture where dragging any of the charts horizontally?

[asgallant]

That is possible now with the ChartRangeFilter.  This thread originated before controls and dashboards were introduced.

[asgallant]

That is going to be tricky.  You would have to bind "onmousedown" and "onmouseup" events for the container divs which track mouse movements in between event clicks and use those movements to adjust the state of the ChartRangeFilter control.  I'm not sure there is any good way to sync the speed and distance of the mouse movement to the chart movements (by which I mean translate one inch of mouse movement into one inch of chart movement), but if you come up with something that works, please share it here.