This example demonstrates how to createa custom gestures-based chart modifier that you can attach to a chart in your Android application to perfrom a specific behaviour using SciChart Android API. When you want to do something to alter the behavior of any built-in gesture modifiers, you should be thinking about creating a custom gesture-based chart modifier to do it.

In this example, a single finger vertical pinch-zoom gesture modifier is implemented to zoom the chart on X-Axis. Also it is enabled by double-tap, similar to how it works in Google Maps App.

Learn more from Custom Chart Modifier Documentation

// Kotlin: CreateCustomGestureModifierFragment.kt

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2021. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// CreateCustomGestureModifierFragment.kt is part of SCICHART®, High Performance Scientific Charts
// For full terms and conditions of the license, see http://www.scichart.com/scichart-eula/
//
// This source code is protected by international copyright law. Unauthorized
// reproduction, reverse-engineering, or distribution of all or any portion of
// this source code is strictly prohibited.
//
// This source code contains confidential and proprietary trade secrets of
// SciChart Ltd., and should at no time be copied, transferred, sold,
// distributed or made available without express written permission.
//******************************************************************************

package com.scichart.examples.fragments.examples2d.createCustomCharts.kt

import android.graphics.PointF
import android.view.MotionEvent
import android.view.ViewConfiguration
import android.view.animation.DecelerateInterpolator
import com.scichart.charting.modifiers.GestureModifierBase
import com.scichart.charting.visuals.SciChartSurface
import com.scichart.charting.visuals.annotations.AnnotationCoordinateMode.Relative
import com.scichart.charting.visuals.annotations.HorizontalAnchorPoint.Center
import com.scichart.charting.visuals.annotations.VerticalAnchorPoint.Top
import com.scichart.charting.visuals.axes.IAxis
import com.scichart.core.IServiceContainer
import com.scichart.core.utility.touch.ModifierTouchEventArgs
import com.scichart.data.model.DoubleRange
import com.scichart.examples.data.DataManager
import com.scichart.examples.fragments.base.ExampleSingleChartBaseFragment
import com.scichart.examples.utils.scichartExtensions.*
import kotlin.math.abs

class CreateCustomGestureModifierFragment : ExampleSingleChartBaseFragment() {
    override fun initExample(surface: SciChartSurface) {
        val ds1Points = DataManager.getInstance().getDampedSinewave(1.0, 0.05, 50, 5)

        surface.suspendUpdates {
            xAxes { numericAxis { growBy = DoubleRange(0.1, 0.1) } }
            yAxes { numericAxis { growBy = DoubleRange(0.2, 0.2) } }

            renderableSeries {
                fastImpulseRenderableSeries {
                    xyDataSeries<Double, Double> {
                        append(ds1Points.xValues, ds1Points.yValues)
                    }
                    ellipsePointMarker {
                        setSize(10)
                        strokeStyle = SolidPenStyle(0xFF0066FF)
                        fillStyle = SolidBrushStyle(0xFF0066FF)
                    }
                    strokeStyle = SolidPenStyle(0xFF0066FF)

                    waveAnimation { interpolator = DecelerateInterpolator() }
                }
            }

            chartModifiers { modifier(CustomZoomGestureModifier()) }
            annotations {
                textAnnotation {
                    x1 = 0.5; y1 = 0.0
                    coordinateMode = Relative
                    verticalAnchorPoint = Top
                    horizontalAnchorPoint = Center
                    text = "Double Tap and pan vertically to Zoom In/Out.\nDouble tap to Zoom Extents."
                }
            }
        }
    }

    private class CustomZoomGestureModifier : GestureModifierBase() {
        private var isScrolling = false
        private var isZoomEnabled = false

        private var touchSlop = 0f
        private val start = PointF()
        private var lastY = 0f

        override fun attachTo(services: IServiceContainer) {
            super.attachTo(services)

            val context = context ?: return
            touchSlop = (ViewConfiguration.get(context).scaledTouchSlop * 2).toFloat()
        }

        override fun onDoubleTap(e: MotionEvent): Boolean {
            start.set(e.x, e.y)
            lastY = e.y
            isZoomEnabled = true

            return true
        }

        override fun onTouch(args: ModifierTouchEventArgs) {
            super.onTouch(args)

            val motionEvent = args.e
            if (isZoomEnabled && motionEvent.action == MotionEvent.ACTION_MOVE) {
                onScrollInYDirection(motionEvent.y)
            }
        }

        private fun onScrollInYDirection(y: Float) {
            val distance = abs(y - start.y)
            if (distance < touchSlop || abs(y - lastY) < 1f) return

            isScrolling = true

            val prevDistance = abs(lastY - start.y)
            val diff = if (prevDistance > 0) (distance / prevDistance - 1).toDouble() else 0.toDouble()
            growBy(start, xAxis, diff)

            lastY = y
        }

        // zoom axis relative to the start point using fraction
        private fun growBy(point: PointF, axis: IAxis, fraction: Double) {
            val size = axis.axisViewportDimension
            val coord = size - point.y

            val minFraction = coord / size * fraction
            val maxFraction = (1 - coord / size) * fraction

            axis.zoomBy(minFraction, maxFraction)
        }

        override fun onUp(e: MotionEvent) {
            // need to disable zoom after finishing scrolling
            if (isScrolling) {
                isZoomEnabled = false
                isScrolling = isZoomEnabled
                start[Float.NaN] = Float.NaN
                lastY = Float.NaN
            }
        }
    }
}

// Java: CreateCustomGestureModifierFragment.java

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2021. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// CreateCustomGestureModifierFragment.java is part of SCICHART®, High Performance Scientific Charts
// For full terms and conditions of the license, see http://www.scichart.com/scichart-eula/
//
// This source code is protected by international copyright law. Unauthorized
// reproduction, reverse-engineering, or distribution of all or any portion of
// this source code is strictly prohibited.
//
// This source code contains confidential and proprietary trade secrets of
// SciChart Ltd., and should at no time be copied, transferred, sold,
// distributed or made available without express written permission.
//******************************************************************************

package com.scichart.examples.fragments.examples2d.createCustomCharts;

import android.content.Context;
import android.graphics.PointF;
import android.view.MotionEvent;
import android.view.ViewConfiguration;
import android.view.animation.DecelerateInterpolator;

import androidx.annotation.NonNull;

import com.scichart.charting.model.dataSeries.IXyDataSeries;
import com.scichart.charting.modifiers.GestureModifierBase;
import com.scichart.charting.visuals.SciChartSurface;
import com.scichart.charting.visuals.annotations.AnnotationCoordinateMode;
import com.scichart.charting.visuals.annotations.HorizontalAnchorPoint;
import com.scichart.charting.visuals.annotations.TextAnnotation;
import com.scichart.charting.visuals.annotations.VerticalAnchorPoint;
import com.scichart.charting.visuals.axes.IAxis;
import com.scichart.charting.visuals.pointmarkers.EllipsePointMarker;
import com.scichart.charting.visuals.renderableSeries.FastImpulseRenderableSeries;
import com.scichart.core.IServiceContainer;
import com.scichart.core.framework.UpdateSuspender;
import com.scichart.core.utility.touch.ModifierTouchEventArgs;
import com.scichart.drawing.utility.ColorUtil;
import com.scichart.examples.data.DataManager;
import com.scichart.examples.data.DoubleSeries;
import com.scichart.examples.fragments.base.ExampleSingleChartBaseFragment;

import java.util.Collections;

public class CreateCustomGestureModifierFragment extends ExampleSingleChartBaseFragment {

    @Override
    protected void initExample(@NonNull SciChartSurface surface) {
        final IAxis xBottomAxis = sciChartBuilder.newNumericAxis().withGrowBy(0.1d, 0.1d).build();
        final IAxis yRightAxis = sciChartBuilder.newNumericAxis().withGrowBy(0.1d, 0.1d).build();

        final DoubleSeries ds1Points = DataManager.getInstance().getDampedSinewave(1.0, 0.05, 50, 5);
        final IXyDataSeries<Double, Double> dataSeries = sciChartBuilder.newXyDataSeries(Double.class, Double.class).build();
        dataSeries.append(ds1Points.xValues, ds1Points.yValues);

        final EllipsePointMarker pointMarker = sciChartBuilder.newPointMarker(new EllipsePointMarker())
                .withSize(10, 10)
                .withStroke(0xFF0066FF, 1)
                .withFill(0xFF0066FF)
                .build();

        final FastImpulseRenderableSeries rSeries = sciChartBuilder.newImpulseSeries()
                .withDataSeries(dataSeries)
                .withStrokeStyle(0xFF0066FF)
                .withPointMarker(pointMarker)
                .build();

        final TextAnnotation annotation = sciChartBuilder.newTextAnnotation()
                .withText("Double Tap and pan vertically to Zoom In/Out.\nDouble tap to Zoom Extents.")
                .withX1(0.5)
                .withY1(0.0)
                .withCoordinateMode(AnnotationCoordinateMode.Relative)
                .withVerticalAnchorPoint(VerticalAnchorPoint.Top)
                .withHorizontalAnchorPoint(HorizontalAnchorPoint.Center)
                .build();

        UpdateSuspender.using(surface, () -> {
            Collections.addAll(surface.getXAxes(), xBottomAxis);
            Collections.addAll(surface.getYAxes(), yRightAxis);
            Collections.addAll(surface.getRenderableSeries(), rSeries);
            Collections.addAll(surface.getAnnotations(), annotation);
            Collections.addAll(surface.getChartModifiers(), new CustomZoomGestureModifier());

            sciChartBuilder.newAnimator(rSeries).withWaveTransformation().withInterpolator(new DecelerateInterpolator()).withDuration(3000).withStartDelay(350).start();
        });
    }

    private static class CustomZoomGestureModifier extends GestureModifierBase {
        private boolean isScrolling = false;
        private boolean isZoomEnabled = false;

        private float touchSlop;
        private final PointF start = new PointF();
        private float lastY;

        @Override
        public void attachTo(IServiceContainer services) {
            super.attachTo(services);

            final Context context = getContext();
            if (context == null) return;

            this.touchSlop = ViewConfiguration.get(context).getScaledTouchSlop() * 2;
        }

        @Override
        public boolean onDoubleTap(MotionEvent e) {
            start.set(e.getX(), e.getY());
            lastY = e.getY();
            isZoomEnabled = true;

            return true;
        }

        @Override
        public void onTouch(ModifierTouchEventArgs args) {
            super.onTouch(args);

            final MotionEvent motionEvent = args.e;
            if (isZoomEnabled && motionEvent.getAction() == MotionEvent.ACTION_MOVE) {
                onScrollInYDirection(motionEvent.getY());
            }
        }

        private void onScrollInYDirection(float y) {
            final float distance = Math.abs(y - start.y);
            if (distance < touchSlop || Math.abs(y - lastY) < 1f) return;

            this.isScrolling = true;

            final float prevDistance = Math.abs(lastY - start.y);
            final double diff = prevDistance > 0 ? distance / prevDistance - 1 : 0;

            growBy(start, getXAxis(), diff);

            this.lastY = y;
        }

        // zoom axis relative to the start point using fraction
        private void growBy(PointF point, IAxis axis, double fraction) {
            final int size = axis.getAxisViewportDimension();
            final float coord = size - point.y;

            double minFraction = (coord / size) * fraction;
            double maxFraction = (1 - coord / size) * fraction;

            axis.zoomBy(minFraction, maxFraction);
        }

        @Override
        protected void onUp(MotionEvent e) {
            // need to disable zoom after finishing scrolling
            if (isScrolling) {
                isScrolling = isZoomEnabled = false;
                start.set(Float.NaN, Float.NaN);
                lastY = Float.NaN;
            }
        }
    }
}

< BACK TO ALL ANDROID CHART CHART EXAMPLES