Demonstrates how to add Error Bars to an iOS Line or Scatter Chart.

There are two Error Bar Series Types in SciChart iOS: The SCIFastErrorBarsRenderableSeries requires an SCIHlDataSeries as data source. The High, Low values are used to set the high and low position of the errors, while the Close (Y-value) is the center of the error bar.

A second error bar type is the SCIFastFixedErrorBarsRenderableSeries . This requires only a SCIXyDataSeries with X,Y values. Error values are fixed and specified by the properties errorHigh and errorLow. The errorType property specifies whether the error is Relative or Absolute.

Tip!

Do you need to change the width of the Error Bars? Try the dataPointWidth property. This alters how much space the bar takes up.

// ErrorBarsChartView.m

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

@implementation ErrorBarsChartView

- (void)initExample {
    SCIHlDataSeries *dataSeries0 = [[SCIHlDataSeries alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double];
    SCIHlDataSeries *dataSeries1 = [[SCIHlDataSeries alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double];
    
    SCDDoubleSeries *data = [SCDDataManager getFourierSeriesWithAmplitude:1.0 phaseShift:0.1 xStart:5.0 xEnd:5.15 count:5000];
    
    [self fillSeries:dataSeries0 sourceData:data scale:1.0];
    [self fillSeries:dataSeries1 sourceData:data scale:1.3];

    uint color = 0xFFC6E6FF;
    SCIFastErrorBarsRenderableSeries *errorBars0 = [SCIFastErrorBarsRenderableSeries new];
    errorBars0.dataSeries = dataSeries0;
    errorBars0.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:color thickness:1.f];
    errorBars0.errorDirection = SCIErrorDirection_Vertical;
    errorBars0.errorType = SCIErrorType_Absolute;
    
    SCIEllipsePointMarker *pMarker = [SCIEllipsePointMarker new];
    pMarker.size = CGSizeMake(5, 5);
    pMarker.fillStyle = [[SCISolidBrushStyle alloc] initWithColorCode:color];
    
    SCIFastLineRenderableSeries *lineSeries = [SCIFastLineRenderableSeries new];
    lineSeries.dataSeries = dataSeries0;
    lineSeries.pointMarker = pMarker;
    lineSeries.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:color thickness:1.f];
    
    SCIFastErrorBarsRenderableSeries *errorBars1 = [SCIFastErrorBarsRenderableSeries new];
    errorBars1.dataSeries = dataSeries1;
    errorBars1.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:color thickness:1.f];
    errorBars1.errorDirection = SCIErrorDirection_Vertical;
    errorBars1.errorType = SCIErrorType_Absolute;
    
    SCIEllipsePointMarker *sMarker = [SCIEllipsePointMarker new];
    sMarker.size = CGSizeMake(7, 7);
    sMarker.fillStyle = [[SCISolidBrushStyle alloc] initWithColorCode:0x00FFFFFF];
    sMarker.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:color thickness:1];
    
    SCIXyScatterRenderableSeries *scatterSeries = [SCIXyScatterRenderableSeries new];
    scatterSeries.dataSeries = dataSeries1;
    scatterSeries.pointMarker = sMarker;
    
    [SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
        [self.surface.xAxes add:[SCINumericAxis new]];
        [self.surface.yAxes add:[SCINumericAxis new]];
        [self.surface.renderableSeries addAll:lineSeries, scatterSeries, errorBars0, errorBars1, nil];
        [self.surface.chartModifiers add:ExampleViewBase.createDefaultModifiers];
        
        [SCIAnimations scaleSeries:lineSeries duration:3.0 andEasingFunction:[SCIElasticEase new]];
        [SCIAnimations scaleSeries:scatterSeries duration:3.0 andEasingFunction:[SCIElasticEase new]];
        [SCIAnimations scaleSeries:errorBars0 duration:3.0 andEasingFunction:[SCIElasticEase new]];
        [SCIAnimations scaleSeries:errorBars1 duration:3.0 andEasingFunction:[SCIElasticEase new]];
    }];
}

- (void)fillSeries:(id<ISCIHlDataSeries>)dataSeries sourceData:(SCDDoubleSeries *)sourceData scale:(double)scale {
    SCIDoubleValues *xValues = sourceData.xValues;
    SCIDoubleValues *yValues = sourceData.yValues;
    
    SCIDoubleValues *highValues = [SCIDoubleValues new];
    SCIDoubleValues *lowValues = [SCIDoubleValues new];
    for (int i = 0 ; i < yValues.count; i++) {
        [yValues set:[yValues getValueAt:i] * scale at:i];
        [highValues add:randf(0.0, 1.0) * 0.2];
        [lowValues add:randf(0.0, 1.0) * 0.2];
    }
    [dataSeries appendValuesX:xValues y:yValues high:highValues low:lowValues];
}

@end

// ErrorBarsChartView.swift

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// ErrorBarsChartView.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 ErrorBarsChartView: SingleChartLayout {
    
    override func initExample() {
        let dataSeries0 = SCIHlDataSeries(xType: .double, yType: .double)
        let dataSeries1 = SCIHlDataSeries(xType: .double, yType: .double)
        
        let data = SCDDataManager.getFourierSeries(withAmplitude: 1.0, phaseShift: 0.1, xStart: 5.0, xEnd: 5.15, count: 5000)
        fillSeries(dataSeries: dataSeries0, sourceData: data, scale: 1.0)
        fillSeries(dataSeries: dataSeries1, sourceData: data, scale: 1.3)
        
        let color: uint = 0xFFC6E6FF
        let errorBars0 = SCIFastErrorBarsRenderableSeries()
        errorBars0.dataSeries = dataSeries0
        errorBars0.strokeStyle = SCISolidPenStyle(colorCode: color, thickness: 1.0)
        errorBars0.errorDirection = .vertical
        errorBars0.errorType = .absolute

        let pMarker = SCIEllipsePointMarker()
        pMarker.size = CGSize(width: 5, height: 5)
        pMarker.fillStyle = SCISolidBrushStyle(colorCode: color)

        let lineSeries = SCIFastLineRenderableSeries()
        lineSeries.dataSeries = dataSeries0
        lineSeries.pointMarker = pMarker
        lineSeries.strokeStyle = SCISolidPenStyle(colorCode: color, thickness: 1.0)
        
        let errorBars1 = SCIFastErrorBarsRenderableSeries()
        errorBars1.dataSeries = dataSeries1
        errorBars1.strokeStyle = SCISolidPenStyle(colorCode: color, thickness: 1.0)
        errorBars1.errorDirection = .vertical
        errorBars1.errorType = .absolute
        
        let sMarker = SCIEllipsePointMarker()
        sMarker.size = CGSize(width: 7, height: 7)
        sMarker.fillStyle = SCISolidBrushStyle(colorCode:0x00FFFFFF)
        sMarker.strokeStyle = SCISolidPenStyle(colorCode: color, thickness: 1.0)
        
        let scatterSeries = SCIXyScatterRenderableSeries()
        scatterSeries.dataSeries = dataSeries1
        scatterSeries.pointMarker = sMarker
        
        SCIUpdateSuspender.usingWith(surface) {
            self.surface.xAxes.add(SCINumericAxis())
            self.surface.yAxes.add(SCINumericAxis())
            self.surface.renderableSeries.add(items: lineSeries, scatterSeries, errorBars0, errorBars1)
            self.surface.chartModifiers.add(ExampleViewBase.createDefaultModifiers())
            
            SCIAnimations.scale(lineSeries, duration: 3.0, andEasingFunction: SCIElasticEase())
            SCIAnimations.scale(scatterSeries, duration: 3.0, andEasingFunction: SCIElasticEase())
            SCIAnimations.scale(errorBars0, duration: 3.0, andEasingFunction: SCIElasticEase())
            SCIAnimations.scale(errorBars1, duration: 3.0, andEasingFunction: SCIElasticEase())
        }
    }
    
    fileprivate func fillSeries(dataSeries: ISCIHlDataSeries, sourceData: SCDDoubleSeries, scale: Double) {
        let xValues = sourceData.xValues
        let yValues = sourceData.yValues
        
        let highValues = SCIDoubleValues()
        let lowValues = SCIDoubleValues()
        for i in 0 ..< xValues.count {
            yValues.set(yValues.getValueAt(i) * scale, at: i)
            highValues.add(randf(0.0, 1.0) * 0.2)
            lowValues.add(randf(0.0, 1.0) * 0.2)
        }
        
        dataSeries.append(x: xValues, y: yValues, high: highValues, low: lowValues)
    }
}

< BACK TO ALL IOS CHART CHART EXAMPLES