Demonstrates how to use multiple SCIFastBandRenderableSeries to create an iOS Fan Chart. In this example, we overlay several Band-Series with varying opacity to create a Fan-chart effect. See Documentation on how to use this type here: The iOS Band Chart Documentation.

A Fan Chart may be used to visualize statistical uncertainty, such as forecasts or margins of error in a known timeseries.

The SCIFastBandRenderableSeries requires an XyyDataSeries, which has X,Y0,Y1 points, to display a solid band between high and low Y-value.

// SCIFanChartView.m

//
//  SCIFanChartView.m
//  SciChartDemo
//
//  Created by Hrybenuik Mykola on 9/21/16.
//  Copyright © 2016 ABT. All rights reserved.
//

#import "FanChartView.h"
#import <SciChart/SciChart.h>
#import "DataManager.h"

typedef void(^SCIGeneratingPointsHandler)(double max, double min, double value1, double value2, double value3, double value4, double actualValue, NSDate *date);

@implementation FanChartView


@synthesize surface;

- (void)generateRenderableSeries {
    
    SCIXyDataSeries *xyDataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
    
    SCIXyyDataSeries *xyyDataSeries = [[SCIXyyDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
    
    SCIXyyDataSeries *xyyDataSeries1 = [[SCIXyyDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
    
    SCIXyyDataSeries *xyyDataSeries2 = [[SCIXyyDataSeries alloc] initWithXType:SCIDataType_DateTime YType:SCIDataType_Double];
    
    [self p_generatingDataSourceWithCount:10
                               andHandler:^(double max, double min, double value1, double value2, double value3, double value4, double actualValue, NSDate *date) {
                                   [xyDataSeries appendX:SCIGeneric(date) Y:SCIGeneric(actualValue)];
                                   [xyyDataSeries appendX:SCIGeneric(date) Y1:SCIGeneric(max) Y2:SCIGeneric(min)];
                                   [xyyDataSeries1 appendX:SCIGeneric(date) Y1:SCIGeneric(value1) Y2:SCIGeneric(value4)];
                                   [xyyDataSeries2 appendX:SCIGeneric(date) Y1:SCIGeneric(value2) Y2:SCIGeneric(value3)];
                               }];
    
    [surface.renderableSeries add:[self p_generateRenderableSeriesWithDataSeries:xyyDataSeries]];
    [surface.renderableSeries add:[self p_generateRenderableSeriesWithDataSeries:xyyDataSeries1]];
    [surface.renderableSeries add:[self p_generateRenderableSeriesWithDataSeries:xyyDataSeries2]];
    
    SCIFastLineRenderableSeries * fourierRenderableSeries = [SCIFastLineRenderableSeries new];
    fourierRenderableSeries.strokeStyle = [[SCISolidPenStyle alloc] initWithColor:[UIColor redColor] withThickness:1];
    [fourierRenderableSeries setDataSeries:xyDataSeries];
    [surface.renderableSeries add:fourierRenderableSeries];
    
    [surface invalidateElement];
}

- (SCIFastBandRenderableSeries*)p_generateRenderableSeriesWithDataSeries:(SCIXyyDataSeries*)dataSeries {
    SCIFastBandRenderableSeries * bandRenderableSeries = [[SCIFastBandRenderableSeries alloc] init];
    bandRenderableSeries.fillBrushStyle = [[SCISolidBrushStyle alloc] initWithColor:[UIColor colorWithRed:1.f green:0.4f blue:0.4f alpha:0.5]];
    bandRenderableSeries.style.fillY1BrushStyle  = [[SCISolidBrushStyle alloc] initWithColor:[UIColor colorWithRed:1.f green:0.4f blue:0.4f alpha:0.5]];
    bandRenderableSeries.style.strokeY1Style = [[SCISolidPenStyle alloc] initWithColor:[UIColor clearColor] withThickness:1.0];
    bandRenderableSeries.style.strokeStyle = [[SCISolidPenStyle alloc] initWithColor:[UIColor clearColor] withThickness:1.0];
    bandRenderableSeries.pointMarker1 = nil;
    bandRenderableSeries.pointMarker = nil;
    [bandRenderableSeries setDataSeries:dataSeries];
    return bandRenderableSeries;
}

- (void)p_generatingDataSourceWithCount:(int)count andHandler:(SCIGeneratingPointsHandler)handler {
    
    double lastValue = 0.0f;
    NSDate *date = [NSDate date];
    
    for (int i = 0; i <= count; i++) {
        double nextValue = lastValue + randf(-0.5, 0.5);
        lastValue = nextValue;
        date = [date dateByAddingTimeInterval: 3600*24];
        
        double maxValue = NAN;
        double minValue = NAN;
        double value1 = NAN;
        double value2 = NAN;
        double value3 = NAN;
        double value4 = NAN;
        
        if (i > 4) {
            maxValue = nextValue + (i - 5) * 0.3;
            value4 = nextValue + (i - 5) * 0.2;
            value3 = nextValue + (i - 5) * 0.1;
            value2 = nextValue - (i - 5) * 0.1;
            value1 = nextValue - (i - 5) * 0.2;
            minValue = nextValue - (i - 5) * 0.3;
        }
        
        if (handler) {
            handler(maxValue, minValue, value1, value2, value3, value4, nextValue, date);
        }
    }
}

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    
    if (self) {
        SCIChartSurface * view = [[SCIChartSurface alloc]init];
        surface = view;
        
        [surface setTranslatesAutoresizingMaskIntoConstraints:NO];
        
        [self addSubview:surface];
        NSDictionary *layout = @{@"SciChart":surface};
        
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-(0)-[SciChart]-(0)-|" options:0 metrics:0 views:layout]];
        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(0)-[SciChart]-(0)-|" options:0 metrics:0 views:layout]];
        [self initializeSurfaceData];
    }
    
    return self;
}

- (void)initializeSurfaceData {
    
    
    id<SCIAxis2DProtocol> axis = [[SCINumericAxis alloc] init];
    [axis setGrowBy: [[SCIDoubleRange alloc]initWithMin:SCIGeneric(0.05) Max:SCIGeneric(0.05)]];
    [surface.yAxes add:axis];
    
    axis = [[SCIDateTimeAxis alloc] init];
    [axis setGrowBy: [[SCIDoubleRange alloc]initWithMin:SCIGeneric(0.05) Max:SCIGeneric(0.05)]];
    [surface.xAxes add:axis];
    
    SCIXAxisDragModifier * xDragModifier = [SCIXAxisDragModifier new];
    xDragModifier.dragMode = SCIAxisDragMode_Scale;
    xDragModifier.clipModeX = SCIClipMode_None;
    
    SCIYAxisDragModifier * yDragModifier = [SCIYAxisDragModifier new];
    yDragModifier.dragMode = SCIAxisDragMode_Pan;
    
    SCIPinchZoomModifier * pzm = [[SCIPinchZoomModifier alloc] init];
    SCIZoomExtentsModifier * zem = [[SCIZoomExtentsModifier alloc] init];
    SCIRolloverModifier * rollover = [[SCIRolloverModifier alloc] init];
    
    SCIChartModifierCollection * gm = [[SCIChartModifierCollection alloc] initWithChildModifiers:@[xDragModifier, yDragModifier, pzm, zem, rollover]];
    surface.chartModifiers = gm;
    
    [self generateRenderableSeries];
}

@end

// SCSFanChartView.swift

//
//  SCSFanChartView.swift
//  SciChartSwiftDemo
//
//  Created by Hrybenuik Mykola on 9/22/16.
//  Copyright © 2016 SciChart Ltd. All rights reserved.
//

import Foundation
import SciChart

class SCSFanChartView: UIView {
    let surface = SCIChartSurface()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        completeConfiguration()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        completeConfiguration()
    }
    
    func addDefaultModifiers() {
        
        let xAxisDragmodifier = SCIXAxisDragModifier()
        xAxisDragmodifier.dragMode = .scale
        xAxisDragmodifier.clipModeX = .none
        
        let yAxisDragmodifier = SCIYAxisDragModifier()
        yAxisDragmodifier.dragMode = .pan
        
        let extendZoomModifier = SCIZoomExtentsModifier()
        
        let pinchZoomModifier = SCIPinchZoomModifier()
        
        let rolloverModifier = SCIRolloverModifier()
        rolloverModifier.style.tooltipSize = CGSize(width: 200, height: CGFloat.nan)
        
        let groupModifier = SCIChartModifierCollection(childModifiers: [xAxisDragmodifier, yAxisDragmodifier, pinchZoomModifier, extendZoomModifier, rolloverModifier])
        
        surface.chartModifiers = groupModifier
    }
    
    // MARK: initialize surface
    fileprivate func addSurface() {
        surface.translatesAutoresizingMaskIntoConstraints = true
        surface.frame = bounds
        surface.autoresizingMask = [.flexibleHeight, .flexibleWidth]
        addSubview(surface)
    }

    // MARK: Overrided Functions
    
    func completeConfiguration() {
        addSurface()
        addAxis()
        addDefaultModifiers()
        addDataSeries()
    }
    
    // MARK: Private Methods
    
    fileprivate func addAxis() {
        surface.xAxes.add(SCIDateTimeAxis())
        surface.yAxes.add(SCINumericAxis())
    }
    
    fileprivate func addDataSeries() {
        
        let dataSeries = SCIXyDataSeries(xType:.dateTime, yType:.float)
        let xyyDataSeries = SCIXyyDataSeries(xType:.dateTime, yType:.float)
        let xyyDataSeries1 = SCIXyyDataSeries(xType:.dateTime, yType:.float)
        let xyyDataSeries2 = SCIXyyDataSeries(xType:.dateTime, yType:.float)
        
        self.generatingDataPoints(10) { (result: SCSDataPoint) in
            dataSeries.appendX(SCIGeneric(result.date), y: SCIGeneric(result.actualValue))
            xyyDataSeries.appendX(SCIGeneric(result.date), y1: SCIGeneric(result.maxValue), y2: SCIGeneric(result.minValue))
            xyyDataSeries1.appendX(SCIGeneric(result.date), y1: SCIGeneric(result.value1), y2: SCIGeneric(result.value4))
            xyyDataSeries2.appendX(SCIGeneric(result.date), y1: SCIGeneric(result.value2), y2: SCIGeneric(result.value3))
        }
      
        let dataRenderSeries = SCIFastLineRenderableSeries()
        dataRenderSeries.dataSeries = dataSeries
        dataRenderSeries.strokeStyle = SCISolidPenStyle(color: UIColor.red, withThickness: 1.0)
        
        surface.renderableSeries.add(createRenderableSeriesWith(xyyDataSeries))
        surface.renderableSeries.add(createRenderableSeriesWith(xyyDataSeries1))
        surface.renderableSeries.add(createRenderableSeriesWith(xyyDataSeries2))
        surface.renderableSeries.add(dataRenderSeries)
        
        
    }
    
    fileprivate func createRenderableSeriesWith(_ dataSeries: SCIXyyDataSeries) -> SCIFastBandRenderableSeries {
        let renderebleDataSeries = SCIFastBandRenderableSeries()
        renderebleDataSeries.style.fillBrushStyle = SCISolidBrushStyle(color: UIColor.init(red: 1.0, green: 0.4, blue: 0.4, alpha: 0.5))
        renderebleDataSeries.style.fillY1BrushStyle = SCISolidBrushStyle(color: UIColor.init(red: 1.0, green: 0.4, blue: 0.4, alpha: 0.5))
        renderebleDataSeries.style.strokeStyle = SCISolidPenStyle(color: UIColor.clear, withThickness: 1.0)
        renderebleDataSeries.style.strokeY1Style = SCISolidPenStyle(color: UIColor.clear, withThickness: 1.0)
        renderebleDataSeries.dataSeries = dataSeries
        return renderebleDataSeries;
    }
    
    fileprivate func generatingDataPoints(_ count: Int, handler: (SCSDataPoint) -> Void) {
        var dateTime = Date()
        var lastValue: Double = 0.0

        for i in 0..<count {
            let nextValue = lastValue + SCSDataManager.randomize(-0.5, max: 0.5)
            lastValue = nextValue
            dateTime = dateTime.addingTimeInterval(3600*24)
            
            var dataPoint = SCSDataPoint()
            dataPoint.date = dateTime
            dataPoint.actualValue = nextValue
            if i > 4 {
                dataPoint.maxValue = nextValue + (Double(i) - 5) * 0.3
                dataPoint.value4 = nextValue + (Double(i) - 5) * 0.2
                dataPoint.value3 = nextValue + (Double(i) - 5) * 0.1
                dataPoint.value2 = nextValue - (Double(i) - 5) * 0.1
                dataPoint.value1 = nextValue - (Double(i) - 5) * 0.2
                dataPoint.minValue = nextValue - (Double(i) - 5) * 0.3
            }
            handler(dataPoint)
        }
    }
}

public struct SCSDataPoint {
    var maxValue = Double.nan
    var minValue = Double.nan
    var value1 = Double.nan
    var value2 = Double.nan
    var value3 = Double.nan
    var value4 = Double.nan
    var actualValue = Double.nan
    var date = Date()
}

< BACK TO ALL IOS CHART CHART EXAMPLES