Pre loader

Animated Auto Range on Y axis when panning/zooming X axis

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

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

Version
7
  • You must to post comments
0
0

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

  • You must to post comments
0
0

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

Images
  • You must to post comments
0
0

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

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies