Syncing scrolling for multiple charts


#1

I need to display multiple charts and sync vertical scrolling/zooming - when scrolling or zooming either of the charts, the other ones should scroll/zoom in sync.

I’d need this on both Android and iOS. 

Is this possible?

Thanks,

Radu


#2

Hi Radu,

In the Android version, the onAxisRangeChangeListener interface

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.3.2/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/ShinobiChart.OnAxisRangeChangeListener.html

gives you an extensibility point at which you can react to range changes, including those caused by pan and zoom events. In your listener you can then call requestCurrentDisplayedRange

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.3.2/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/Axis.html#requestCurrentDisplayedRange(T, T)

on other charts/axes to pan or zoom them according to the specific requirements of your application.

The equivalent process in the iOS version is very similar, but you will need to use the following SChartDelegate methods:

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiCharts/2.5.1/Premium/Normal/Protocols/SChartDelegate.html#//api/name/sChartIsPanning:withChartMovementInformation:

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiCharts/2.5.1/Premium/Normal/Protocols/SChartDelegate.html#//api/name/sChartIsZooming:withChartMovementInformation:

to detect the motion and the following SChartAxis method to act on it:

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiCharts/2.5.1/Premium/Normal/Classes/SChartAxis.html#//api/name/setRangeWithMinimum:andMaximum:

Best regards,

Robin Sillem


#3

I did manage to implement this. It does get a bit tricky on Android as setting the requested range on the other charts will trigger the same listener on the other charts so there’s an extra check needed to avoid a stack overflow - need to check if the range trying to be set is the same. Alternatively you could probably remove and re-add the listener to the other charts.

One gotcha on the Android side is that the bounce at limits or zoom outside the allowable range won’t be reproduced with this method. 


#4

Hi Radu,

Yes, that did occur to me, but I took a look through the technical level of your previous posts and judged that you’d figure it out without me being too explicit!

You’re right about the bounce and momentum, up to a point. They are still axis changes, but it’s hard to use a simple check for ranges being set the same, particularly as you don’t have control over the timing of the momentum/bounce animations.

I guess the issue is that all charts can influence all others, rather than there being any master/slave hierarchy. There are a few things that may help you with this. One is that we expose the concept of a motion state on the axis, obtained with the following method:

http://www.shinobicontrols.com/docs/ShinobiControls/ShinobiChartsAndroid/1.3.2/Premium/Normal/apidocs/docs/reference/com/shinobicontrols/charts/Axis.html#getMotionState()

This will allow you to discriminate between axis range changes due to gesture or momentum etc. You can also set a listener to handle changes in the motion state

The other idea would to have a central chart range manager class/object in your app, giving you the concept of a single set of ‘desired’ ranges for all charts, and testing against this before requesting range changes, rather than against the individual targets of the range changes. This object would be the listener for all axis range change and motion state change events. You may or may not consider this a cleaner separation of concerns, and it may or may not be more concise - it depends on the structure of your app, the lifecycle of your charts etc.

Best regards,

Robin