This example demonstrates how to createa custom gestures-based chart modifier that you can attach to a chart in your iOS application to perfrom a specific behaviour with SciChart iOS API. Any time 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-based chart 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 SCIGestureModifierBase API Documentation

// CustomGestureModifier.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2020. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// CustomGestureModifier.swift is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

import SciChart.Protected.SCIGestureModifierBase

class CustomGestureModifier: SCIGestureModifierBase {
    private var initialLocation = CGPoint.zero
    private let scaleFactor: CGFloat = -50
    private var canPan = false
    
    private lazy var longPressGesture: DoubleTouchDownGestureRecognizer = {
        let gesture = DoubleTouchDownGestureRecognizer(target: self, action: #selector(handleDoubleTapGesture))
        gesture.numberOfTapsRequired = 2
        
        return gesture
    }()
    
    override func attach(to services: ISCIServiceContainer!) {
        super.attach(to: services)
        
        if let parentSurface = self.parentSurface as? UIView {
            parentSurface.addGestureRecognizer(longPressGesture)
        }
    }
        
    override func createGestureRecognizer() -> UIGestureRecognizer {
        return UIPanGestureRecognizer()
    }
    
    override func internalHandleGesture(_ gestureRecognizer: UIGestureRecognizer) {
        guard canPan else { return }
        
        guard let gesture = gestureRecognizer as? UIPanGestureRecognizer else { return }
        let parentView = self.parentSurface.modifierSurface.view
        
        switch gesture.state {
        case .began:
            initialLocation = gestureRecognizer.location(in: parentView)
        case .changed:
            let translationY = gesture.translation(in: parentView).y
            performZoom(point: initialLocation, yScaleFactor: translationY)
            
            gesture.setTranslation(.zero, in: parentView)
        default:
            canPan = false
        }
    }
    
    private func performZoom(point: CGPoint, yScaleFactor:CGFloat) {
        let fraction = yScaleFactor / scaleFactor
        for i in 0 ..< self.xAxes.count {
            growAxis(self.xAxes[i], at: point, by: fraction)
        }
    }
    
    private func growAxis(_ axis: ISCIAxis, at point: CGPoint, by fraction: CGFloat) {
        let width = axis.layoutSize.width
        let coord = width - point.x
        
        let minFraction = (coord / width) * fraction
        let maxFraction = (1 - coord / width) * fraction
        
        axis.zoom(byFractionMin: Double(minFraction), max: Double(maxFraction))
    }
    
    @objc private func handleDoubleTapGesture(_ gesture: UILongPressGestureRecognizer) {
        canPan = true
    }
}

// CustomGestureModifierChartView.m

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// ImpulseChartView.m is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

#import "CustomGestureModifierChartView.h"
#import "SCDDataManager.h"
#import "SCDCustomGestureModifier.h"

@implementation CustomGestureModifierChartView

- (void)initExample {
    id<ISCIAxis> xAxis = [SCINumericAxis new];
    xAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
    
    id<ISCIAxis> yAxis = [SCINumericAxis new];
    yAxis.growBy = [[SCIDoubleRange alloc] initWithMin:0.1 max:0.1];
    
    SCDDoubleSeries *ds1Points = [SCDDataManager getDampedSinewaveWithAmplitude:1.0 DampingFactor:0.05 PointCount:50 Freq:5];
    SCIXyDataSeries *dataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double];
    [dataSeries appendValuesX:ds1Points.xValues y:ds1Points.yValues];
    
    SCIEllipsePointMarker *ellipsePointMarker = [SCIEllipsePointMarker new];
    ellipsePointMarker.strokeStyle = nil;
    ellipsePointMarker.fillStyle = [[SCISolidBrushStyle alloc] initWithColorCode:0xFF0066FF];
    ellipsePointMarker.size = CGSizeMake(10, 10);
    
    SCIFastImpulseRenderableSeries *rSeries = [SCIFastImpulseRenderableSeries new];
    rSeries.dataSeries = dataSeries;
    rSeries.pointMarker = ellipsePointMarker;
    rSeries.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFF0066FF thickness:1.0];
    
    SCITextAnnotation *annotation = [SCITextAnnotation new];
    annotation.text = @"Double Tap and pan vertically to Zoom In/Out. \nDouble tap to Zoom Extents.";
    annotation.fontStyle = [[SCIFontStyle alloc] initWithFontSize:16 andTextColor:UIColor.whiteColor];
    annotation.x1 = @(0.5);
    annotation.y1 = @(0);
    annotation.coordinateMode = SCIAnnotationCoordinateMode_Relative;
    annotation.verticalAnchorPoint = SCIVerticalAnchorPoint_Top;
    annotation.horizontalAnchorPoint = SCIHorizontalAnchorPoint_Center;
    
    [SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
        [self.surface.xAxes add:xAxis];
        [self.surface.yAxes add:yAxis];
        [self.surface.renderableSeries add:rSeries];
        [self.surface.annotations add:annotation];
        [self.surface.chartModifiers addAll:[SCDCustomGestureModifier new], [SCIZoomExtentsModifier new], nil];

        [SCIAnimations waveSeries:rSeries duration:3.0 andEasingFunction:[SCICubicEase new]];
    }];
}

@end

// CustomGestureModifierChartView.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2020. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// CustomGestureModifierChartView.swift is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

class CustomGestureModifierChartView: SingleChartLayout {
    
    override func initExample() {
        let xAxis = SCINumericAxis()
        xAxis.growBy = SCIDoubleRange(min: 0.1, max: 0.1)
        
        let yAxis = SCINumericAxis()
        yAxis.growBy = SCIDoubleRange(min: 0.1, max: 0.1)
        
        let ds1points = SCDDataManager.getDampedSinewave(withAmplitude: 1.0, dampingFactor: 0.05, pointCount: 50, freq: 5)
        let dataSeries = SCIXyDataSeries(xType: .double, yType: .double)
        dataSeries.append(x: ds1points.xValues, y: ds1points.yValues)
        
        let ellipsePointMarker = SCIEllipsePointMarker()
        ellipsePointMarker.strokeStyle = nil
        ellipsePointMarker.fillStyle = SCISolidBrushStyle(colorCode: 0xFF0066FF)
        ellipsePointMarker.size = CGSize(width: 10, height: 10)
        
        let rSeries = SCIFastImpulseRenderableSeries()
        rSeries.dataSeries = dataSeries
        rSeries.pointMarker = ellipsePointMarker
        rSeries.strokeStyle = SCISolidPenStyle(colorCode: 0xFF0066FF, thickness: 1.0)
        
        let annotation = SCITextAnnotation()
        annotation.text = "Double Tap and pan vertically to Zoom In/Out. \nDouble tap to Zoom Extents."
        annotation.fontStyle = SCIFontStyle(fontSize: 16, andTextColor: .white)
        annotation.set(x1: 0.5)
        annotation.set(y1: 0)
        annotation.coordinateMode = .relative
        annotation.verticalAnchorPoint = .top
        annotation.horizontalAnchorPoint = .center
        
        SCIUpdateSuspender.usingWith(surface) {
            self.surface.xAxes.add(xAxis)
            self.surface.yAxes.add(yAxis)
            self.surface.renderableSeries.add(rSeries)
            self.surface.annotations.add(annotation)
            self.surface.chartModifiers.add(items: CustomGestureModifier(), SCIZoomExtentsModifier())
            
            SCIAnimations.wave(rSeries, duration: 3.0, andEasingFunction: SCICubicEase())
        }
    }
}

// DoubleTouchDownGestureRecognizer.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2020. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// DoubleTouchDownGestureRecognizer.swift is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

import Foundation

class DoubleTouchDownGestureRecognizer: UITapGestureRecognizer {
    
    override init(target: Any?, action: Selector?) {
        super.init(target: target, action: action)
        
        numberOfTapsRequired = 2
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent) {
        guard let firstTouch = touches.first, firstTouch.tapCount == 2 else { return }
        
        if self.state == .possible {
            self.state = .recognized
        }
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent) {
        self.state = .failed
    }
    
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent) {
        self.state = .failed
    }
}

// SCDCustomGestureModifier.m

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2020. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// SCDCustomGestureModifier.m is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

#import "SCDCustomGestureModifier.h"
#import <SciChart/SCIGestureModifierBase+Protected.h>
#import "SCDDoubleTouchDownGestureRecognizer.h"

@implementation SCDCustomGestureModifier {
    SCDDoubleTouchDownGestureRecognizer *_doubleTapGesture;
    CGPoint _initialLocation;
    CGFloat _scaleFactor;
    BOOL _canPan;
}

- (void)attachTo:(id<ISCIServiceContainer>)services {
    [super attachTo:services];
    
    _initialLocation = CGPointZero;
    _scaleFactor = -50.0;
    _canPan = NO;
    
    _doubleTapGesture = [[SCDDoubleTouchDownGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTapGesture:)];
    
    if ([self.parentSurface isKindOfClass:[UIView class]]) {
        UIView *surfaceView = (UIView *)self.parentSurface;
        [surfaceView addGestureRecognizer:_doubleTapGesture];
    }
}

- (UIGestureRecognizer *)createGestureRecognizer {
    return [UIPanGestureRecognizer new];
}

- (void)internalHandleGesture:(UIGestureRecognizer *)gestureRecognizer {
    if (!_canPan) return;
    
    UIPanGestureRecognizer *gesture = (UIPanGestureRecognizer *)gestureRecognizer;
    UIView *parentView = self.parentSurface.modifierSurface.view;
    
    switch (gesture.state) {
        case UIGestureRecognizerStateBegan:
            _initialLocation = [gestureRecognizer locationInView:parentView];
            break;
        case UIGestureRecognizerStateChanged:
            [self performZoom:_initialLocation yScaleFactor:[gesture translationInView:parentView].y];
            [gesture setTranslation:CGPointZero inView:parentView];
            break;
        default:
            _canPan = NO;
            break;
    }
}

- (void)performZoom:(CGPoint)point yScaleFactor:(CGFloat)yScaleFactor {
    CGFloat fraction = yScaleFactor / _scaleFactor;
    for (int i = 0; i < self.xAxes.count; i++) {
        [self growAxis:self.xAxes[i] atPoint:point byFraction:fraction];
    }
}

- (void)growAxis:(id<ISCIAxis>)axis atPoint:(CGPoint)point byFraction:(CGFloat)fraction {
    CGFloat width = axis.layoutSize.width;
    CGFloat coord = width - point.x;
    
    double minFraction = (coord / width) * fraction;
    double maxFraction = (1 - coord / width) * fraction;
    
    [axis zoomByFractionMin:minFraction max:maxFraction];
}

- (void)handleDoubleTapGesture:(UILongPressGestureRecognizer *)gesture {
    _canPan = YES;
}

@end

// SCDDoubleTouchDownGestureRecognizer.m

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2020. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// SCDDoubleTouchDownGestureRecognizer.m is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

#import "SCDDoubleTouchDownGestureRecognizer.h"

@implementation SCDDoubleTouchDownGestureRecognizer

- (instancetype)initWithTarget:(id)target action:(SEL)action {
    self = [super initWithTarget:target action:action];
    if (self) {
        self.numberOfTapsRequired = 2;
    }
    return self;
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    NSOrderedSet<UITouch *> *orderedTouches = [[NSOrderedSet alloc] initWithSet:touches];
    UITouch *firstTouch = [orderedTouches firstObject];
    
    if (firstTouch.tapCount != 2) return;
    
    if (self.state == UIGestureRecognizerStatePossible) {
        self.state = UIGestureRecognizerStateRecognized;
    }
}

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    self.state = UIGestureRecognizerStateFailed;
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    self.state = UIGestureRecognizerStateFailed;
}

@end

< BACK TO ALL IOS CHART CHART EXAMPLES