SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
Hi,
I’m working on the iOS and android version. I’m trying to implemented an animated visible range change on Y axis when zooming/panning X axis.
On iOS, I just have to do:
yAxis.autoRange = .always
yAxis.animateVisibleRangeChanges = true
yAxis.animatedChangeDuration = 0.5
But I can’t find a way to do that on Android, is it hidden somewhere else?
Kind Regards,
Alexis
Hi Alexis,
Thanks for your inquiry.
Unfortunately we don’t have such properties in SciChart Android.
May I ask why do you need to animate VisibleRange on panning/zooming chart? I mean those modifiers should provide realtime updates of chart as you pan/zoom so I don’t understand why do you need to additionally animate those changes. Maybe if I understand your requirements then we can create some workaround for you.
Best regards,
Yura
Hi Yura,
The change of scale on the Y axis is instantaneous. So we the user is scrolling back and forth in the graph, the Y visible is updated automatically, but instantly, which makes the graph jumps between scale, and it’s really hard to follow what’s going on.
I attached a wireframe of a common flow for our data.
Everything is fine up to the last pan which makes the y visible range adapt instantly.
While the example could be fine, our data is a lot more complicated and those kind of jumps are extremely frequent.
When a user is panning left while being zoomed in a little, the graph scale keeps jumping and it makes it extremely confusing as to what scale you’re looking at.
Does that help clarifying the problem ?
That problem is solved on iOS since instead of instantly changing the scale, there’s a very short animation showing the user what’s going on.
Kind Regards,
Alexis
Hi Alexis,
Well you can try to customize zoom and pan modifiers and perform zoomExtents() when it’s required ( for this to work you need to remove AutoRange.Always for yAxis) :
class CustomPinchZoomModifier extends PinchZoomModifier {
private final Runnable zoomExtentsYRunnable = new Runnable() {
@Override
public void run() {
getParentSurface().animateZoomExtentsY(500);
}
};
@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
Dispatcher.cancel(zoomExtentsYRunnable);
return super.onScaleBegin(detector);
}
@Override
public boolean onScale(ScaleGestureDetector detector) {
Dispatcher.cancel(zoomExtentsYRunnable);
return super.onScale(detector);
}
@Override
public void onScaleEnd(ScaleGestureDetector detector) {
super.onScaleEnd(detector);
Dispatcher.postOnUiThread(zoomExtentsYRunnable);
}
}
class CustomZoomPanModifier extends ZoomPanModifier {
private final Scroller scroller;
private volatile boolean isFlingGesture;
private final Runnable zoomExtentsYRunnable = new Runnable() {
@Override
public void run() {
if (isFlingGesture)
getParentSurface().animateZoomExtentsY(500);
}
};
public CustomZoomPanModifier(Context context) {
this.scroller = new Scroller(context, new DecelerateInterpolator());
}
@Override
public boolean onDown(MotionEvent e) {
this.isFlingGesture = false;
Dispatcher.cancel(zoomExtentsYRunnable);
return super.onDown(e);
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float xDelta, float yDelta) {
final boolean result = super.onScroll(e1, e2, xDelta, yDelta);
Dispatcher.postOnUiThread(zoomExtentsYRunnable);
return result;
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
super.onFling(e1, e2, velocityX, velocityY);
// calculated how long inertial scroll will last and perform zoomExtents after inertial scroll
this.scroller.fling(round(e1.getX()), round(e1.getY()), round(velocityX), round(velocityY), Integer.MIN_VALUE, Integer.MAX_VALUE, Integer.MIN_VALUE, Integer.MAX_VALUE);
this.isFlingGesture = true;
Dispatcher.postDelayedOnUiThread(zoomExtentsYRunnable, scroller.getDuration());
return true;
}
}
final CustomZoomPanModifier zoomPanModifier = new CustomZoomPanModifier(getActivity());
final CustomPinchZoomModifier pinchZoomModifier = new CustomPinchZoomModifier();
pinchZoomModifier.setDirection(Direction2D.XDirection);
surface.getChartModifiers().add(sciChartBuilder.newModifierGroup().withModifier(zoomPanModifier).withModifier(pinchZoomModifier).build());
Please can you try it and let me know if it’s suitable for your needs?
Best regards,
Yura
Please login first to submit.