The iOS Create Multi Pane Stock Charts example demonstrates how SciChart iOS is suitable for creating complex, multi-panel stock chart and trading apps, able to display indicators on the main pane, in panels and synchronize the zooming, scrolling of multiple charts together.

An Ohlc or Candlestick chart is added by using SciChart’s SCIFastCandlestickRenderableSeries or SCIFastOhlcRenderableSeries respectively. Two line series using SCIFastLineRenderableSeries draw the moving averages.

Price data is updated in a SCIOhlcDataSeries in a timer callback. When the data updates, SciChart automatically redraws. Scrolling to the latest bar is handled in code by manipulating the Axis.VisibleRange property.

Chart Axis synchronization is achieved by using the SCIMultiSurfaceModifier and SCIAxisRangeSyncronization. Chart YAxis sizes are synchronized using the SCIAxisAreaSizeSyncronization attached property.

Technical Indicators are for demonstration purposes only. We recommend the open-source TA-Lib to integrate technical indicators to SciChart!

// MultiPaneStockChartLayout.xib

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina5_9" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="MultiPaneStockChartLayout">
            <connections>
                <outlet property="macdSurface" destination="vin-hd-GvH" id="r3D-Du-iGi"/>
                <outlet property="priceSurface" destination="lZ6-in-60a" id="yOr-jz-4Kx"/>
                <outlet property="rsiSurface" destination="US4-dr-gGB" id="4ee-VZ-c3G"/>
                <outlet property="volumeSurface" destination="fuh-IY-GnA" id="Qo4-l6-Yoy"/>
            </connections>
        </placeholder>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="iN0-l3-epB">
            <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="lZ6-in-60a" customClass="SCIChartSurface">
                    <rect key="frame" x="0.0" y="44" width="375" height="403.66666666666669"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="vin-hd-GvH" customClass="SCIChartSurface">
                    <rect key="frame" x="0.0" y="447.66666666666669" width="375" height="110.00000000000006"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="fuh-IY-GnA" customClass="SCIChartSurface">
                    <rect key="frame" x="0.0" y="668" width="375" height="110"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="US4-dr-gGB" customClass="SCIChartSurface">
                    <rect key="frame" x="0.0" y="557.66666666666663" width="375" height="110.33333333333337"/>
                    <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                </view>
            </subviews>
            <color key="backgroundColor" red="0.10980392156862745" green="0.10980392156862745" blue="0.10980392156862745" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
            <constraints>
                <constraint firstItem="lZ6-in-60a" firstAttribute="height" secondItem="vUN-kp-3ea" secondAttribute="height" multiplier="0.55" id="1ku-36-1Sd"/>
                <constraint firstItem="vin-hd-GvH" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="2tv-E2-SgL"/>
                <constraint firstItem="fuh-IY-GnA" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="55k-6S-ZxV"/>
                <constraint firstItem="US4-dr-gGB" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="8kd-Pa-aNu"/>
                <constraint firstItem="fuh-IY-GnA" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="Bc2-Ae-mP1"/>
                <constraint firstItem="lZ6-in-60a" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" id="CGe-rV-Jzy"/>
                <constraint firstItem="lZ6-in-60a" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="Kmf-zV-qnh"/>
                <constraint firstItem="vin-hd-GvH" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="MkZ-kj-eie"/>
                <constraint firstItem="vin-hd-GvH" firstAttribute="top" secondItem="lZ6-in-60a" secondAttribute="bottom" id="Mzc-ih-4eZ"/>
                <constraint firstItem="fuh-IY-GnA" firstAttribute="height" secondItem="vUN-kp-3ea" secondAttribute="height" multiplier="0.15" id="Qng-qF-AGJ"/>
                <constraint firstItem="US4-dr-gGB" firstAttribute="height" secondItem="vUN-kp-3ea" secondAttribute="height" multiplier="0.15" id="Rt9-hT-TQA"/>
                <constraint firstItem="lZ6-in-60a" firstAttribute="trailing" secondItem="iN0-l3-epB" secondAttribute="trailing" id="YfD-oI-31U"/>
                <constraint firstItem="vin-hd-GvH" firstAttribute="height" secondItem="vUN-kp-3ea" secondAttribute="height" multiplier="0.15" id="Zo0-ks-O2k"/>
                <constraint firstItem="US4-dr-gGB" firstAttribute="top" secondItem="vin-hd-GvH" secondAttribute="bottom" id="ccI-fe-vuC"/>
                <constraint firstItem="fuh-IY-GnA" firstAttribute="top" secondItem="US4-dr-gGB" secondAttribute="bottom" id="eIH-Vx-iUP"/>
                <constraint firstItem="US4-dr-gGB" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="vK6-wh-vbs"/>
            </constraints>
            <viewLayoutGuide key="safeArea" id="vUN-kp-3ea"/>
            <point key="canvasLocation" x="32.5" y="75"/>
        </view>
    </objects>
</document>

// MultiPaneStockChartView.m

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2018. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// MultiPaneStockChartView.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 "MultiPaneStockChartView.h"
#import <SciChart/SciChart.h>
#import "DataManager.h"
#import "MovingAverage.h"
#import <math.h>

NSString * const VOLUME = @"Volume";
NSString * const PRICES = @"Prices";
NSString * const RSI = @"RSI";
NSString * const MACD = @"MACD";

@interface BasePaneModel : NSObject

@property(nonatomic) SCIRenderableSeriesCollection * renderableSeries;
@property(nonatomic) SCIAnnotationCollection * annotations;
@property(nonatomic) SCINumericAxis * yAxis;
@property(nonatomic) NSString * title;

- (instancetype)initWithTitle:(NSString *)title yAxisTextFormatting:(NSString *)yAxisTextFormatting isFirstPane:(BOOL)isFirstPane;
- (void)addRenderableSeries:(SCIRenderableSeriesBase *)renderableSeries;

@end

@interface PricePaneModel : BasePaneModel
- (instancetype)initWithSeries:(PriceSeries *)priceSeries;
@end

@interface VolumePaneModel : BasePaneModel
- (instancetype)initWithSeries:(PriceSeries *)priceSeries;
@end

@interface RsiPaneModel : BasePaneModel
- (instancetype)initWithSeries:(PriceSeries *)priceSeries;
@end

@interface MacdPaneModel : BasePaneModel
- (instancetype)initWithSeries:(PriceSeries *)priceSeries;
@end

@interface MultiPaneStockChartView ()

@property SCIAxisRangeSynchronization * rangeSync;
@property SCIAxisAreaSizeSynchronization * axisAreaSizeSync;

@end

@implementation MultiPaneStockChartView

- (void)initExample {
    _rangeSync = [SCIAxisRangeSynchronization new];
    _axisAreaSizeSync = [SCIAxisAreaSizeSynchronization new];
    _axisAreaSizeSync.syncMode = SCIAxisSizeSync_Right;
    
    PriceSeries * priceSeries = [DataManager getPriceDataEurUsd];
    
    PricePaneModel * pricePaneModel = [[PricePaneModel alloc] initWithSeries:priceSeries];
    MacdPaneModel * macdPaneModel = [[MacdPaneModel alloc] initWithSeries:priceSeries];
    RsiPaneModel * rsiPaneModel = [[RsiPaneModel alloc] initWithSeries:priceSeries];
    VolumePaneModel * volumePaneModel = [[VolumePaneModel alloc] initWithSeries:priceSeries];
    
    [self initSurface:self.priceSurface paneModel:pricePaneModel isMainPane:YES];
    [self initSurface:self.macdSurface paneModel:macdPaneModel isMainPane:NO];
    [self initSurface:self.rsiSurface paneModel:rsiPaneModel isMainPane:NO];
    [self initSurface:self.volumeSurface paneModel:volumePaneModel isMainPane:NO];
}

- (void)initSurface:(SCIChartSurface *)surface paneModel:(BasePaneModel *)model isMainPane:(BOOL)isMainPane {
    // used to syncronize width of yAxes areas
    [_axisAreaSizeSync attachSurface:surface];
    
    SCICategoryDateTimeAxis * xAxis = [SCICategoryDateTimeAxis new];
    xAxis.isVisible = isMainPane ? YES : NO;
    xAxis.growBy = [[SCIDoubleRange alloc] initWithMin:SCIGeneric(0.0) Max:SCIGeneric(0.05)];
    
    // Used to synchronize axis ranges
    [_rangeSync attachAxis:xAxis];
    
    SCIXAxisDragModifier * xAxisDragModifier = [SCIXAxisDragModifier new];
    xAxisDragModifier.dragMode = SCIAxisDragMode_Pan;
    xAxisDragModifier.clipModeX = SCIClipMode_StretchAtExtents;
    
    SCIPinchZoomModifier * pinchZoomModifier = [SCIPinchZoomModifier new];
    pinchZoomModifier.direction = SCIDirection2D_XDirection;
    
    SCILegendModifier * legendModifier = [SCILegendModifier new];
    legendModifier.showCheckBoxes = NO;
    
    [SCIUpdateSuspender usingWithSuspendable:surface withBlock:^{
        [surface.xAxes add:xAxis];
        [surface.yAxes add:model.yAxis];
        surface.renderableSeries = model.renderableSeries;
        surface.annotations = model.annotations;
        surface.chartModifiers = [[SCIChartModifierCollection alloc] initWithChildModifiers:@[xAxisDragModifier, pinchZoomModifier, [SCIZoomPanModifier new], [SCIZoomExtentsModifier new], legendModifier]];
        
        if (!isMainPane) {
            surface.topAxisAreaForcedSize = 0.5;
            surface.bottomAxisAreaForcedSize = 0.5;
            [SCIThemeManager applyDefaultThemeToThemeable:surface];
        }
    }];
}

@end

@implementation BasePaneModel

@synthesize renderableSeries = _renderableSeries;
@synthesize annotations = _annotations;
@synthesize yAxis = _yAxis;
@synthesize title = _title;

- (instancetype)initWithTitle:(NSString *)title yAxisTextFormatting:(NSString *)yAxisTextFormatting isFirstPane:(BOOL)isFirstPane {
    self = [super init];
    
    if (self) {
        _title = title;
        _renderableSeries = [SCIRenderableSeriesCollection new];
        _annotations = [SCIAnnotationCollection new];
        
        _yAxis = [SCINumericAxis new];
        _yAxis.axisId = title;
        if (yAxisTextFormatting != nil) {
            _yAxis.textFormatting = yAxisTextFormatting;
        }
        _yAxis.autoRange = SCIAutoRange_Always;
        _yAxis.minorsPerMajor = isFirstPane ? 4 : 2;
        _yAxis.maxAutoTicks = isFirstPane ? 8 : 4;
        
        double growBy = isFirstPane ? 0.05 : 0.0;
        _yAxis.growBy = [[SCIDoubleRange alloc] initWithMin:SCIGeneric(growBy) Max:SCIGeneric(growBy)];
    }
    
    return self;
}

- (void)addRenderableSeries:(SCIRenderableSeriesBase *)renderableSeries {
    [_renderableSeries add:renderableSeries];
}

- (void)addAxisMarkerAnnotationWithYAxisId:(NSString *)yAxisId format:(NSString *)format value:(SCIGenericType)value color:(UIColor *)color {
    SCITextFormattingStyle * textFormatting = [SCITextFormattingStyle new];
    textFormatting.color = [UIColor whiteColor];
    textFormatting.fontSize = 12;
    
    SCIAxisMarkerAnnotation * axisMarkerAnnotation = [SCIAxisMarkerAnnotation new];
    axisMarkerAnnotation.yAxisId = yAxisId;
    axisMarkerAnnotation.position = value;
    axisMarkerAnnotation.coordinateMode = SCIAnnotationCoordinate_Absolute;
    if (color != nil) {
        axisMarkerAnnotation.style.backgroundColor = color;
    }
    axisMarkerAnnotation.style.margin = 5;
    axisMarkerAnnotation.style.textStyle = textFormatting;
    axisMarkerAnnotation.formattedValue = [NSString stringWithFormat: format, SCIGenericDouble(value)];
    
    [_annotations add:axisMarkerAnnotation];
}

@end

@implementation PricePaneModel

- (instancetype)initWithSeries:(PriceSeries *)prices {
    self = [super initWithTitle:PRICES yAxisTextFormatting:@"$0.0000" isFirstPane:YES];
    
    if (self) {
        // Add the main OHLC chart
        SCIOhlcDataSeries * stockPrices = [[SCIOhlcDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
        stockPrices.seriesName = @"EUR/USD";
        [stockPrices appendRangeX:SCIGeneric(prices.dateData) Open:SCIGeneric(prices.openData) High:SCIGeneric(prices.highData) Low:SCIGeneric(prices.lowData) Close:SCIGeneric(prices.closeData) Count:prices.size];
        
        SCIFastCandlestickRenderableSeries * candlestickSeries = [SCIFastCandlestickRenderableSeries new];
        candlestickSeries.dataSeries = stockPrices;
        candlestickSeries.yAxisId = PRICES;
        [self addRenderableSeries:candlestickSeries];
        [SCIThemeManager applyDefaultThemeToThemeable:candlestickSeries];
        
        double movingAverageArray[prices.size];
        SCIXyDataSeries * maLow = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
        maLow.seriesName = @"Low Line";
        [maLow appendRangeX:SCIGeneric(prices.dateData) Y:SCIGeneric([MovingAverage movingAverage:prices.closeData output:movingAverageArray count:prices.size period:50]) Count:prices.size];
        
        SCIFastLineRenderableSeries * lineSeriesLow = [SCIFastLineRenderableSeries new];
        lineSeriesLow.dataSeries = maLow;
        lineSeriesLow.yAxisId = PRICES;
        lineSeriesLow.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFFFF3333 withThickness:1];
        [self addRenderableSeries:lineSeriesLow];
        
        SCIXyDataSeries * maHigh = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
        maHigh.seriesName = @"High Line";
        [maHigh appendRangeX:SCIGeneric(prices.dateData) Y:SCIGeneric([MovingAverage movingAverage:prices.closeData output:movingAverageArray count:prices.size period:200]) Count:prices.size];
        
        SCIFastLineRenderableSeries * lineSeriesHigh = [SCIFastLineRenderableSeries new];
        lineSeriesHigh.dataSeries = maHigh;
        lineSeriesHigh.yAxisId = PRICES;
        lineSeriesHigh.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFF33DD33 withThickness:1];
        [self addRenderableSeries:lineSeriesHigh];
        
        [self addAxisMarkerAnnotationWithYAxisId:PRICES format:@"$%.4f" value:[stockPrices.yColumn valueAt:stockPrices.count -1] color:lineSeriesLow.strokeStyle.color];
        [self addAxisMarkerAnnotationWithYAxisId:PRICES format:@"$%.4f" value:[maLow.yColumn valueAt:maLow.count -1] color:lineSeriesLow.strokeStyle.color];
        [self addAxisMarkerAnnotationWithYAxisId:PRICES format:@"$%.4f" value:[maHigh.yColumn valueAt:maHigh.count -1] color:lineSeriesHigh.strokeStyle.color];
    }
    
    return self;
}

@end

@implementation VolumePaneModel

- (instancetype)initWithSeries:(PriceSeries *)prices {
    self = [super initWithTitle:VOLUME yAxisTextFormatting:@"###E+0" isFirstPane:NO];
    
    if (self) {
        SCIXyDataSeries * volumePrices = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
        volumePrices.seriesName = @"Volume";
        [volumePrices appendRangeX:SCIGeneric(prices.dateData) Y:SCIGeneric(prices.volumeData) Count:prices.size];
        
        SCIFastColumnRenderableSeries * columnSeries = [SCIFastColumnRenderableSeries new];
        columnSeries.dataSeries = volumePrices;
        columnSeries.yAxisId = VOLUME;
        [self addRenderableSeries:columnSeries];
        
        [self addAxisMarkerAnnotationWithYAxisId:VOLUME format:@"$%.g" value:[volumePrices.yColumn valueAt:volumePrices.count -1] color:nil];
    }
    
    return self;
}

@end

@implementation RsiPaneModel

- (instancetype)initWithSeries:(PriceSeries *)prices {
    self = [super initWithTitle:RSI yAxisTextFormatting:@"0.0" isFirstPane:NO];
    
    if (self) {
        double rsiArray[prices.size];
        SCIXyDataSeries * rsiDataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
        rsiDataSeries.seriesName = @"RSI";
        [rsiDataSeries appendRangeX:SCIGeneric(prices.dateData) Y:SCIGeneric([MovingAverage rsi:prices output:rsiArray count:prices.size period:14]) Count:prices.size];
        
        SCIFastLineRenderableSeries * lineSeries = [SCIFastLineRenderableSeries new];
        lineSeries.dataSeries = rsiDataSeries;
        lineSeries.yAxisId = RSI;
        lineSeries.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFFC6E6FF withThickness:1];
        [self addRenderableSeries:lineSeries];
        
        [self addAxisMarkerAnnotationWithYAxisId:RSI format:@"%.2f" value:[rsiDataSeries.yColumn valueAt:rsiDataSeries.count -1] color:nil];
    }
    
    return self;
}

@end

@implementation MacdPaneModel

- (instancetype)initWithSeries:(PriceSeries *)prices {
    self = [super initWithTitle:MACD yAxisTextFormatting:@"0.00" isFirstPane:NO];
    
    if (self) {
        MacdPoints * macdPoints = [MovingAverage macd:prices.closeData count:prices.size slow:12 fast:25 signal:9];
        
        SCIXyDataSeries * histogramDataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
        histogramDataSeries.seriesName = @"Histogram";
        [histogramDataSeries appendRangeX:SCIGeneric(prices.dateData) Y:macdPoints.divergenceValues Count:prices.size];
        
        SCIFastColumnRenderableSeries * columnSeries = [SCIFastColumnRenderableSeries new];
        columnSeries.dataSeries = histogramDataSeries;
        columnSeries.yAxisId = MACD;
        [self addRenderableSeries:columnSeries];
        
        SCIXyyDataSeries * macdDataSeries = [[SCIXyyDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
        macdDataSeries.seriesName = @"MACD";
        [macdDataSeries appendRangeX:SCIGeneric(prices.dateData) Y1:macdPoints.macdValues Y2:macdPoints.signalValues Count:prices.size];
        
        SCIFastBandRenderableSeries * bandSeries = [SCIFastBandRenderableSeries new];
        bandSeries.dataSeries = macdDataSeries;
        bandSeries.yAxisId = MACD;
        [self addRenderableSeries:bandSeries];
        
        [self addAxisMarkerAnnotationWithYAxisId:MACD format:@"$%.2f" value:[histogramDataSeries.yColumn valueAt:histogramDataSeries.count -1] color:nil];
        [self addAxisMarkerAnnotationWithYAxisId:MACD format:@"$%.2f" value:[macdDataSeries.yColumn valueAt:macdDataSeries.count -1] color:nil];
    }
    
    return self;
}

@end

// MultiPaneStockChartView.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2018. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// MultiPaneStockChartView.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.
//******************************************************************************

let VOLUME = "Volume";
let PRICES = "Prices";
let RSI = "RSI";
let MACD = "MACD";

class MultiPaneStockChartView: MultiPaneStockChartLayout {
    
    let _rangeSync = SCIAxisRangeSynchronization()
    let _axisAreaSizeSync = SCIAxisAreaSizeSynchronization()
    
    override func commonInit() {
        _axisAreaSizeSync.syncMode = .right
    }

    override func initExample() {
        let priceSeries = DataManager.getPriceDataEurUsd()!
        
        let pricePaneModel = PricePaneModel(prices: priceSeries)
        let macdPaneModel = MacdPaneModel(prices: priceSeries)
        let rsiPaneModel = RsiPaneModel(prices: priceSeries)
        let volumePaneModel = VolumePaneModel(prices: priceSeries)
        
        initSurface(priceSurface, model: pricePaneModel, isMainPane: true)
        initSurface(macdSurface, model: macdPaneModel, isMainPane: false)
        initSurface(rsiSurface, model: rsiPaneModel, isMainPane: false)
        initSurface(volumeSurface, model: volumePaneModel, isMainPane: false)
    }
    
    fileprivate func initSurface(_ surface: SCIChartSurface, model: BasePaneModel, isMainPane: Bool) {
        // used to syncronize width of yAxes areas
        _axisAreaSizeSync.attachSurface(surface)
        
        let xAxis = SCICategoryDateTimeAxis()
        xAxis.isVisible = isMainPane ? true : false
        xAxis.growBy = SCIDoubleRange(min: SCIGeneric(0.0), max: SCIGeneric(0.05))
        
        // Used to synchronize axis ranges
        _rangeSync.attachAxis(xAxis)
        
        let xAxisDragModifier = SCIXAxisDragModifier()
        xAxisDragModifier.dragMode = .pan
        xAxisDragModifier.clipModeX = .stretchAtExtents
        
        let pinchZoomModifier = SCIPinchZoomModifier()
        pinchZoomModifier.direction = .xDirection
        
        let legendModifier = SCILegendModifier()
        legendModifier.showCheckBoxes = false

        SCIUpdateSuspender.usingWithSuspendable(surface) {
            surface.xAxes.add(xAxis)
            surface.yAxes.add(model.yAxis)
            surface.renderableSeries = model.renderableSeries
            surface.annotations = model.annotations
            surface.chartModifiers = SCIChartModifierCollection(childModifiers: [xAxisDragModifier, pinchZoomModifier, SCIZoomPanModifier(), SCIZoomExtentsModifier(), legendModifier])
            
            if (!isMainPane) {
                surface.topAxisAreaForcedSize = 0.5
                surface.bottomAxisAreaForcedSize = 0.5
                SCIThemeManager.applyDefaultTheme(toThemeable: surface)
            }
        }
    }
}

class BasePaneModel {
    
    fileprivate let renderableSeries = SCIRenderableSeriesCollection()
    fileprivate let annotations = SCIAnnotationCollection()
    fileprivate let yAxis = SCINumericAxis()
    fileprivate let title: String
    
    init(title: String, yAxisTextFormatting: String?, isFirstPane: Bool) {
        self.title = title
        yAxis.axisId = title
        if (yAxisTextFormatting != nil) {
            yAxis.textFormatting = yAxisTextFormatting
        }
        yAxis.autoRange = .always
        yAxis.minorsPerMajor = isFirstPane ? 4 : 2
        yAxis.maxAutoTicks = isFirstPane ? 8 : 4
        
        let growBy = isFirstPane ? 0.05 : 0.0
        yAxis.growBy = SCIDoubleRange(min: SCIGeneric(growBy), max: SCIGeneric(growBy))
    }
    
    func addRenderableSeries(_ renderableSeries: SCIRenderableSeriesBase) {
        self.renderableSeries.add(renderableSeries)
    }
    
    func addAxisMarkerAnnotationWith(_ yAxisId: String, format: String, value: SCIGenericType, color: UIColor?) {
        let textFormatting = SCITextFormattingStyle()
        textFormatting.color = UIColor.white
        textFormatting.fontSize = 12
        
        let axisMarkerAnnotation = SCIAxisMarkerAnnotation()
        axisMarkerAnnotation.yAxisId = yAxisId
        axisMarkerAnnotation.position = value
        axisMarkerAnnotation.coordinateMode = .absolute
        if (color != nil) {
            axisMarkerAnnotation.style.backgroundColor = color
        }
        axisMarkerAnnotation.style.margin = 5
        axisMarkerAnnotation.style.textStyle = textFormatting
        axisMarkerAnnotation.formattedValue = String(format: format, SCIGenericDouble(value))
        
        annotations.add(axisMarkerAnnotation)
    }
}

class PricePaneModel: BasePaneModel {
    
    init(prices: PriceSeries) {
        super.init(title: PRICES, yAxisTextFormatting: "$0.0000", isFirstPane: true)
        
        let size = prices.size()
        
        let stockPrices = SCIOhlcDataSeries(xType: .dateTime, yType: .double)
        stockPrices.seriesName = "EUR/USD"
        stockPrices.appendRangeX(DataManager.getGenericDataArray(prices.dateData()),
                                 open: DataManager.getGenericDataArray(prices.openData()),
                                 high: DataManager.getGenericDataArray(prices.highData()),
                                 low: DataManager.getGenericDataArray(prices.lowData()),
                                 close: DataManager.getGenericDataArray(prices.closeData()),
                                 count: size)
        
        let candlestickSeries = SCIFastCandlestickRenderableSeries()
        candlestickSeries.dataSeries = stockPrices
        candlestickSeries.yAxisId = PRICES
        addRenderableSeries(candlestickSeries)
        SCIThemeManager.applyDefaultTheme(toThemeable: candlestickSeries)
        
        let movingAverageArray = [Double](repeating: 0, count: Int(size))
        let movingAveragePointer: UnsafeMutablePointer<Double> = UnsafeMutablePointer(mutating: movingAverageArray)
        let maLow = SCIXyDataSeries(xType: .dateTime, yType: .double)
        maLow.seriesName = "Low Line"
        maLow.appendRangeX(DataManager.getGenericDataArray(prices.dateData()), y: DataManager.getGenericDataArray(MovingAverage.movingAverage(prices.closeData(), output: movingAveragePointer, count: Int32(size), period: 50)), count: size)
        
        let lineSeriesLow = SCIFastLineRenderableSeries()
        lineSeriesLow.dataSeries = maLow
        lineSeriesLow.yAxisId = PRICES
        lineSeriesLow.strokeStyle = SCISolidPenStyle(colorCode: 0xFFFF3333, withThickness: 1)
        addRenderableSeries(lineSeriesLow)
        
        let maHigh = SCIXyDataSeries(xType: .dateTime, yType: .double)
        maHigh.seriesName = "High Line"
        maHigh.appendRangeX(DataManager.getGenericDataArray(prices.dateData()), y: DataManager.getGenericDataArray(MovingAverage.movingAverage(prices.closeData(), output: movingAveragePointer, count: Int32(size), period: 200)), count: size)
        
        let lineSeriesHigh = SCIFastLineRenderableSeries()
        lineSeriesHigh.dataSeries = maHigh
        lineSeriesHigh.yAxisId = PRICES
        lineSeriesHigh.strokeStyle = SCISolidPenStyle(colorCode: 0xFF33DD33, withThickness: 1)
        addRenderableSeries(lineSeriesHigh)
        
        addAxisMarkerAnnotationWith(PRICES, format: "$%.4f", value: stockPrices.yColumn.value(at: stockPrices.count() - 1), color: lineSeriesLow.strokeStyle.color)
        addAxisMarkerAnnotationWith(PRICES, format: "$%.4f", value: stockPrices.yColumn.value(at: maLow.count() - 1), color: lineSeriesLow.strokeStyle.color)
        addAxisMarkerAnnotationWith(PRICES, format: "$%.4f", value: stockPrices.yColumn.value(at: maHigh.count() - 1), color: lineSeriesHigh.strokeStyle.color)
    }
}

class VolumePaneModel: BasePaneModel {
    
    init(prices: PriceSeries) {
        super.init(title: VOLUME, yAxisTextFormatting: "###E+0", isFirstPane: false)
        
        let size = prices.size()
        
        let volumePrices = SCIXyDataSeries(xType: .dateTime, yType: .double)
        volumePrices.seriesName = "Volume"
        volumePrices.appendRangeX(DataManager.getGenericDataArray(prices.dateData()), y: DataManager.getGenericDataLongArray(prices.volumeData()), count: size)
        
        let columnSeries = SCIFastColumnRenderableSeries()
        columnSeries.dataSeries = volumePrices
        columnSeries.yAxisId = VOLUME
        addRenderableSeries(columnSeries)
        
        addAxisMarkerAnnotationWith(VOLUME, format: "$%.g", value: volumePrices.yColumn.value(at: volumePrices.count() - 1), color: nil)
    }
}

class RsiPaneModel: BasePaneModel {
    
    init(prices: PriceSeries) {
        super.init(title: RSI, yAxisTextFormatting: "0.0", isFirstPane: false)
        
        let size = prices.size()
        
        let rsiArray = [Double](repeating: 0, count: Int(size))
        let rsiPointer: UnsafeMutablePointer<Double> = UnsafeMutablePointer(mutating: rsiArray)
        let rsiDataSeries = SCIXyDataSeries(xType: .dateTime, yType: .double)
        rsiDataSeries.seriesName = "RSI"
        rsiDataSeries.appendRangeX(DataManager.getGenericDataArray(prices.dateData()), y: DataManager.getGenericDataArray(MovingAverage.rsi(prices, output: rsiPointer, count: size, period: 14)), count: size)
        
        let lineSeries = SCIFastLineRenderableSeries()
        lineSeries.dataSeries = rsiDataSeries
        lineSeries.yAxisId = RSI
        lineSeries.strokeStyle = SCISolidPenStyle(colorCode: 0xFFC6E6FF, withThickness: 1)
        addRenderableSeries(lineSeries)
        
        addAxisMarkerAnnotationWith(RSI, format: "%.2f", value: rsiDataSeries.yColumn.value(at: rsiDataSeries.count() - 1), color: nil)
    }
}

class MacdPaneModel: BasePaneModel {
    
    init(prices: PriceSeries) {
        super.init(title: MACD, yAxisTextFormatting: "0.00", isFirstPane: false)
        
        let size = Int(prices.size())
        let macdPoints = MovingAverage.macd(prices.closeData(), count: Int32(size), slow: 12, fast: 25, signal: 9)
        
        let histogramDataSeries = SCIXyDataSeries(xType: .dateTime, yType: .double)
        histogramDataSeries.seriesName = "Histogram"
        histogramDataSeries.appendRangeX(DataManager.getGenericDataArray(prices.dateData()), y: macdPoints!.divergenceValues, count: prices.size())
        
        let columnSeries = SCIFastColumnRenderableSeries()
        columnSeries.dataSeries = histogramDataSeries
        columnSeries.yAxisId = MACD
        addRenderableSeries(columnSeries)
        
        let macdDataSeries = SCIXyDataSeries(xType: .dateTime, yType: .double)
        macdDataSeries.seriesName = "MACD"
        macdDataSeries.appendRangeX(DataManager.getGenericDataArray(prices.dateData()), y: macdPoints!.macdValues, count: prices.size())
        
        let bandSeries = SCIFastLineRenderableSeries()
        bandSeries.dataSeries = macdDataSeries
        bandSeries.yAxisId = MACD
        addRenderableSeries(bandSeries)
        
        addAxisMarkerAnnotationWith(MACD, format: "%.2f", value: histogramDataSeries.yColumn.value(at: histogramDataSeries.count() - 1), color: nil)
        addAxisMarkerAnnotationWith(MACD, format: "%.2f", value: macdDataSeries.yColumn.value(at: macdDataSeries.count() - 1), color: nil)
    }
}

< BACK TO ALL IOS CHART CHART EXAMPLES