// iOS Chart Examples

Please note! These examples are new to SciChart iOS v3 release! SciChart’s OpenGLES and Metal iOS Chart library ships with ~90 Objective-C and Swift iOS Chart Examples which you can browse, play with and view the source-code. All of this is possible with the new and improved SciChart iOS Examples Suite, which ships as part of the SciChart iOS SDK.

DOWNLOAD THE IOS CHART EXAMPLES

// iOS Chart Interaction with Annotations

Demonstrates the SciChart iOS Charts Annotations API, which allows UIView elements to be placed over the iOS Chart at specific X and Y data-values.

In this example you can tap and manipulate annotations be dragging the annotation body, or, dragging the annotation corners.

Annotation Types Include:

– AxisMarkerAnnotation
– BoxAnnotation
– CustomAnnotation
– HorizontalLineAnnotation
– LineAnnotation
– LineArrowAnnotation
– TextAnnotation
– VerticalLineAnnotation

Documentation Links

– iOS Annotations API Documentation
– SCIAnnotationCollection

// Source Code

The Swift and Objective-C source code for the iOS Chart Interaction with Annotations example is included below (Scroll down!).

Did you know that we have the source code for all our example available for free on Github?

Clone the SciChart.iOS.Examples from Github.

Also the SciChart iOS Trial contains the full source for the examples (link below).

DOWNLOAD THE IOS CHART EXAMPLES

iOS Chart Interaction with Annotations - View Source Code for this example

The SciChart Examples source code is available on Github and viewable in-app for some platforms

// InteractionWithAnnotations.m

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

@implementation InteractionWithAnnotations

- (void)initExample {
    SCICategoryDateAxis *xAxis = [SCICategoryDateAxis new];
    SCINumericAxis *yAxis = [SCINumericAxis new];
    yAxis.visibleRange = [[SCIDoubleRange alloc] initWithMin:30 max:37];
    
    SCIOhlcDataSeries *dataSeries = [[SCIOhlcDataSeries alloc] initWithXType:SCIDataType_Date yType:SCIDataType_Double];
    
    SCDMarketDataService *marketDataService = [[SCDMarketDataService alloc] initWithStartDate:NSDate.date TimeFrameMinutes:5 TickTimerIntervals:0.005];
    SCDPriceSeries *data = [marketDataService getHistoricalData:200];
    
    [dataSeries appendValuesX:data.dateData open:data.openData high:data.highData low:data.lowData close:data.closeData];
    
    SCIFastCandlestickRenderableSeries *rSeries = [SCIFastCandlestickRenderableSeries new];
    rSeries.dataSeries = dataSeries;
    
    [self.surface.xAxes add:xAxis];
    [self.surface.yAxes add:yAxis];
    [self.surface.renderableSeries add:rSeries];
    [self.surface.chartModifiers add:[SCIZoomPanModifier new]];

    SCITextAnnotation *textAnnotation1 = [SCITextAnnotation new];
    textAnnotation1.x1 = @(10);
    textAnnotation1.y1 = @(30.5);
    textAnnotation1.isEditable = YES;
    textAnnotation1.verticalAnchorPoint = SCIVerticalAnchorPoint_Bottom;
    textAnnotation1.text = @"Buy";
    textAnnotation1.fontStyle = [[SCIFontStyle alloc] initWithFontSize:20 andTextColor:UIColor.whiteColor];
                                       
    SCITextAnnotation *textAnnotation2 = [SCITextAnnotation new];
    textAnnotation2.x1 = @(50);
    textAnnotation2.y1 = @(34);
    textAnnotation2.isEditable = YES;
    textAnnotation2.verticalAnchorPoint = SCIVerticalAnchorPoint_Bottom;
    textAnnotation2.text = @"Sell";
    textAnnotation2.fontStyle = [[SCIFontStyle alloc] initWithFontSize:20 andTextColor:UIColor.whiteColor];
    
    SCITextAnnotation *rotatedTextAnnotation = [SCITextAnnotation new];
    rotatedTextAnnotation.x1 = @(80);
    rotatedTextAnnotation.y1 = @(36);
    rotatedTextAnnotation.isEditable = YES;
    rotatedTextAnnotation.rotationAngle = -30;
    rotatedTextAnnotation.text = @"Rotated text";
    rotatedTextAnnotation.fontStyle = [[SCIFontStyle alloc] initWithFontSize:20 andTextColor:UIColor.whiteColor];
    
    SCIBoxAnnotation *boxAnnotation = [SCIBoxAnnotation new];
    boxAnnotation.x1 = @(50);
    boxAnnotation.y1 = @(35.5);
    boxAnnotation.x2 = @(120);
    boxAnnotation.y2 = @(32);
    boxAnnotation.isEditable = YES;
    boxAnnotation.fillBrush = [[SCISolidBrushStyle alloc] initWithColorCode:0x33FF6600];
    boxAnnotation.borderPen = [[SCISolidPenStyle alloc] initWithColorCode:0x77FF6600 thickness:1.0];
    
    SCILineAnnotation *lineAnnotation1 = [SCILineAnnotation new];
    lineAnnotation1.x1 = @(30);
    lineAnnotation1.y1 = @(30.5);
    lineAnnotation1.x2 = @(60);
    lineAnnotation1.y2 = @(35.5);
    lineAnnotation1.isEditable = YES;
    lineAnnotation1.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xAAFF6600 thickness:2];
    
    SCILineAnnotation *lineAnnotation2 = [SCILineAnnotation new];
    lineAnnotation2.x1 = @(120);
    lineAnnotation2.y1 = @(30.5);
    lineAnnotation2.x2 = @(175);
    lineAnnotation2.y2 = @(36);
    lineAnnotation2.isEditable = YES;
    lineAnnotation2.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xAAFF6600 thickness:2];
    
    SCIAxisMarkerAnnotation *axisMarker1 = [SCIAxisMarkerAnnotation new];
    axisMarker1.y1 = @(32.7);
    axisMarker1.isEditable = YES;

    SCIAxisMarkerAnnotation *axisMarker2 = [SCIAxisMarkerAnnotation new];
    axisMarker2.x1 = @(100);
    axisMarker2.isEditable = YES;
    axisMarker2.formattedValue = @"Horizontal";
    axisMarker2.annotationSurface = SCIAnnotationSurface_XAxis;

    SCIHorizontalLineAnnotation *horizontalLine1 = [SCIHorizontalLineAnnotation new];
    horizontalLine1.x1 = @(150);
    horizontalLine1.y1 = @(32.2);
    horizontalLine1.isEditable = YES;
    horizontalLine1.horizontalAlignment = SCIAlignment_Right;
    horizontalLine1.stroke = [[SCISolidPenStyle alloc] initWithColor: [UIColor redColor] thickness:2];
    [horizontalLine1.annotationLabels add:[self createLabelWithText:nil alignment:SCILabelPlacement_Axis]];
    
    SCIHorizontalLineAnnotation *horizontalLine2 = [SCIHorizontalLineAnnotation new];
    horizontalLine2.x1 = @(130);
    horizontalLine2.x2 = @(160);
    horizontalLine2.y1 = @(33.9);
    horizontalLine2.isEditable = YES;
    horizontalLine2.horizontalAlignment = SCIAlignment_CenterHorizontal;
    horizontalLine2.stroke = [[SCISolidPenStyle alloc] initWithColor: [UIColor blueColor] thickness:2];
    [horizontalLine2.annotationLabels add:[self createLabelWithText:@"Top" alignment:SCILabelPlacement_Top]];
    [horizontalLine2.annotationLabels add:[self createLabelWithText:@"Left" alignment:SCILabelPlacement_Left]];
    [horizontalLine2.annotationLabels add:[self createLabelWithText:@"Right" alignment:SCILabelPlacement_Right]];
    
    SCIVerticalLineAnnotation *verticalLine1 = [SCIVerticalLineAnnotation new];
    verticalLine1.x1 = @(20);
    verticalLine1.y1 = @(35);
    verticalLine1.y2 = @(33);
    verticalLine1.isEditable = YES;
    verticalLine1.verticalAlignment = SCIAlignment_CenterVertical;
    verticalLine1.stroke = [[SCISolidPenStyle alloc] initWithColorCode: 0xFF006400 thickness:2];
    
    SCIVerticalLineAnnotation *verticalLine2 = [SCIVerticalLineAnnotation new];
    verticalLine2.x1 = @(40);
    verticalLine2.y1 = @(34);
    verticalLine2.isEditable = YES;
    verticalLine2.verticalAlignment = SCIAlignment_Top;
    verticalLine2.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xFF006400 thickness:2];
    [verticalLine2.annotationLabels add:[self createLabelWithText:nil alignment:SCILabelPlacement_Top]];
    
    SCITextAnnotation *textAnnotation3 = [SCITextAnnotation new];
    textAnnotation3.x1 = @(0.5);
    textAnnotation3.y1 = @(0.5);
    textAnnotation3.coordinateMode = SCIAnnotationCoordinateMode_Relative;
    textAnnotation3.horizontalAnchorPoint = SCIHorizontalAnchorPoint_Center;
    textAnnotation3.text = @"EUR/USD";
    textAnnotation3.fontStyle = [[SCIFontStyle alloc] initWithFontSize:72 andTextColorCode:0x77FFFFFF];

    self.surface.annotations = [[SCIAnnotationCollection alloc] initWithCollection:@[textAnnotation3, textAnnotation1, textAnnotation2, rotatedTextAnnotation, boxAnnotation, lineAnnotation1, lineAnnotation2, axisMarker1, axisMarker2, horizontalLine1, horizontalLine2, verticalLine1, verticalLine2]];
}

- (SCIAnnotationLabel *)createLabelWithText:(NSString *)text alignment:(SCILabelPlacement)labelPlacement {
    SCIAnnotationLabel *annotationLabel = [SCIAnnotationLabel new];
    if (text != nil) {
        annotationLabel.text = text;
    }
    annotationLabel.labelPlacement = labelPlacement;
    
    return annotationLabel;
}
@end

// InteractionWithAnnotations.swift

//******************************************************************************
// SCICHARTÂ® Copyright SciChart Ltd. 2011-2019. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// InteractionWithAnnotations.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 InteractionWithAnnotations: SingleChartLayout {
    
    override func initExample() {
        let xAxis = SCICategoryDateAxis()
        let yAxis = SCINumericAxis()
        yAxis.visibleRange = SCIDoubleRange(min: 30, max: 37)
        
        let dataSeries = SCIOhlcDataSeries(xType: .date, yType: .double)
        
        let marketDataService = SCDMarketDataService(start: Date(), timeFrameMinutes: 5, tickTimerIntervals: 0.005)
        let data = marketDataService.getHistoricalData(200)
        
        dataSeries.append(x: data.dateData, open: data.openData, high: data.highData, low: data.lowData, close: data.closeData)
        
        let rSeries = SCIFastCandlestickRenderableSeries()
        rSeries.dataSeries = dataSeries
        
        surface.xAxes.add(xAxis)
        surface.yAxes.add(yAxis)
        surface.renderableSeries.add(rSeries)
        surface.chartModifiers.add(SCIZoomPanModifier())
        
        let textAnnotation1 = SCITextAnnotation()
        textAnnotation1.set(x1: 10)
        textAnnotation1.set(y1: 30.5)
        textAnnotation1.isEditable = true
        textAnnotation1.verticalAnchorPoint = .bottom
        textAnnotation1.text = "Buy"
        textAnnotation1.fontStyle = SCIFontStyle(fontSize: 20, andTextColor: .white)
        
        let textAnnotation2 = SCITextAnnotation()
        textAnnotation2.set(x1: 50)
        textAnnotation2.set(y1: 34)
        textAnnotation2.isEditable = true
        textAnnotation2.text = "Sell"
        textAnnotation2.fontStyle = SCIFontStyle(fontSize: 20, andTextColor: .white)
        
        let rotatedTextAnnotation = SCITextAnnotation()
        rotatedTextAnnotation.set(x1: 80)
        rotatedTextAnnotation.set(y1: 36)
        rotatedTextAnnotation.isEditable = true
        rotatedTextAnnotation.rotationAngle = -30
        rotatedTextAnnotation.text = "Rotated text"
        rotatedTextAnnotation.fontStyle = SCIFontStyle(fontSize: 20, andTextColor: .white)
        
        let boxAnnotation = SCIBoxAnnotation()
        boxAnnotation.set(x1: 50)
        boxAnnotation.set(y1: 35.5)
        boxAnnotation.set(x2: 120)
        boxAnnotation.set(y2: 32)
        boxAnnotation.isEditable = true
        boxAnnotation.fillBrush = SCISolidBrushStyle(colorCode: 0x33FF6600)
        boxAnnotation.borderPen = SCISolidPenStyle(colorCode: 0x77FF6600, thickness: 1.0)
        
        let lineAnnotation1 = SCILineAnnotation()
        lineAnnotation1.set(x1: 30)
        lineAnnotation1.set(y1: 30.5)
        lineAnnotation1.set(x2: 60)
        lineAnnotation1.set(y2: 35.5)
        lineAnnotation1.isEditable = true
        lineAnnotation1.stroke = SCISolidPenStyle(colorCode: 0xAAFF6600, thickness: 2)
        
        let lineAnnotation2 = SCILineAnnotation()
        lineAnnotation2.set(x1: 120)
        lineAnnotation2.set(y1: 30.5)
        lineAnnotation2.set(x2: 175)
        lineAnnotation2.set(y2: 36)
        lineAnnotation2.isEditable = true
        lineAnnotation2.stroke = SCISolidPenStyle(colorCode: 0xAAFF6600, thickness: 2)
        
        let axisMarker1 = SCIAxisMarkerAnnotation()
        axisMarker1.set(y1: 32.7)
        axisMarker1.isEditable = true
        
        let axisMarker2 = SCIAxisMarkerAnnotation()
        axisMarker2.set(x1: 100)
        axisMarker2.isEditable = true
        axisMarker2.formattedValue = "Horizontal"
        axisMarker2.annotationSurface = .xAxis
        
        let horizontalLine1 = SCIHorizontalLineAnnotation()
        horizontalLine1.set(x1: 150)
        horizontalLine1.set(y1: 32.2)
        horizontalLine1.isEditable = true
        horizontalLine1.horizontalAlignment = .right
        horizontalLine1.stroke = SCISolidPenStyle(color: UIColor.red, thickness: 2)
        horizontalLine1.annotationLabels.add(createLabelWith(text: nil, labelPlacement: .axis))
        
        let horizontalLine2 = SCIHorizontalLineAnnotation()
        horizontalLine2.set(x1: 130)
        horizontalLine2.set(x2: 160)
        horizontalLine2.set(y1: 33.9)
        horizontalLine2.isEditable = true
        horizontalLine2.horizontalAlignment = .centerHorizontal
        horizontalLine2.stroke = SCISolidPenStyle(color: UIColor.blue, thickness: 2)
        horizontalLine2.annotationLabels.add(createLabelWith(text: "Top", labelPlacement: .top))
        horizontalLine2.annotationLabels.add(createLabelWith(text: "Left", labelPlacement: .left))
        horizontalLine2.annotationLabels.add(createLabelWith(text: "Right", labelPlacement: .right))
        
        let verticalLine1 = SCIVerticalLineAnnotation()
        verticalLine1.set(x1: 20)
        verticalLine1.set(y1: 35)
        verticalLine1.set(y2: 33)
        verticalLine1.isEditable = true
        verticalLine1.verticalAlignment = .centerVertical
        verticalLine1.stroke = SCISolidPenStyle(colorCode: 0xFF006400, thickness: 2)
        
        let verticalLine2 = SCIVerticalLineAnnotation()
        verticalLine2.set(x1: 40)
        verticalLine2.set(y1: 34)
        verticalLine2.isEditable = true
        verticalLine2.verticalAlignment = .top
        verticalLine2.stroke = SCISolidPenStyle(colorCode: 0xFF006400, thickness: 2)
        verticalLine2.annotationLabels.add(createLabelWith(text: nil, labelPlacement: .top))
        
        let textAnnotation3 = SCITextAnnotation()
        textAnnotation3.set(x1: 0.5)
        textAnnotation3.set(y1: 0.5)
        textAnnotation3.coordinateMode = .relative
        textAnnotation3.horizontalAnchorPoint = .center
        textAnnotation3.text = "EUR/USD"
        textAnnotation3.fontStyle = SCIFontStyle(fontSize: 72, andTextColorCode: 0x77FFFFFF)
        
        surface.annotations = SCIAnnotationCollection(collection: [textAnnotation3, textAnnotation1, textAnnotation2, rotatedTextAnnotation, boxAnnotation, lineAnnotation1, lineAnnotation2, axisMarker1, axisMarker2, horizontalLine1, horizontalLine2, verticalLine1, verticalLine2])
    }
    
    fileprivate func createLabelWith(text: String?, labelPlacement: SCILabelPlacement) -> SCIAnnotationLabel {
        let annotationLabel = SCIAnnotationLabel()
        if (text != nil) {
            annotationLabel.text = text!
        }
        annotationLabel.labelPlacement = labelPlacement
        
        return annotationLabel
    }
}

< BACK TO ALL IOS CHART CHART EXAMPLES

iOS Chart Interaction with Annotations

// iOS Chart Examples

// iOS Chart Interaction with Annotations

// Source Code

// InteractionWithAnnotations.m

// InteractionWithAnnotations.swift

IOS CHART EXAMPLES

2D Charts

Basic Chart Types

Chart Annotations

Create a Multiseries Chart

Create Custom Charts

Create Realtime Charts

Create Stock Charts

Legends

Link Multiple Charts

Manipulate Series

Modify Axis Behavior

Styling and Theming

Tooltips and Hit Test

Zoom and Pan a Chart

3D Charts

Axis3D

Basic Chart Types

Create Surface Mesh Chart

Manipulate series

Realtime 3D Charts

Style 3D Chart

Tooltips and Hit Test 3D Charts

Zoom and Pan 3D Chart

Featured Apps

Medical Charts

Performance Demos

Scientific Charts