SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
Please note! These examples are new to SciChart iOS v4 release! SciChart’s OpenGL ES and Metal iOS and Metal macOS Chart library ships with hundred of Objective-C and Swift iOS&macOS 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 and demo application for Mac, which ships as part of the SciChart SDK.
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
The Swift and Objective-C source code for the iOS and macOS 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 and Scichart macOS Trials contain the full source for the examples (link below).
//******************************************************************************
// 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
- (Class)associatedType { return SCIChartSurface.class; }
- (BOOL)showDefaultModifiersInToolbar { return NO; }
- (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;
rSeries.opacity = 0.4;
[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:SCIColor.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:SCIColor.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:SCIColor.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];
SCILineArrowAnnotation *lineArrowAnnotation = [SCILineArrowAnnotation new];
lineArrowAnnotation.x1 = @(120);
lineArrowAnnotation.y1 = @(35);
lineArrowAnnotation.x2 = @(80);
lineArrowAnnotation.y2 = @(31.4);
lineArrowAnnotation.headLength = 8;
lineArrowAnnotation.headWidth = 16;
lineArrowAnnotation.isEditable = YES;
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: SCIColor.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: SCIColor.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, lineArrowAnnotation, 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
//******************************************************************************
// 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: SCDSingleChartViewController<SCIChartSurface> {
override var associatedType: AnyClass { return SCIChartSurface.self }
override var showDefaultModifiersInToolbar: Bool { return false }
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
rSeries.opacity = 0.4
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(color: 0x33FF6600)
boxAnnotation.borderPen = SCISolidPenStyle(color: 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(color: 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(color: 0xAAFF6600, thickness: 2)
let lineArrowAnnotation = SCILineArrowAnnotation()
lineArrowAnnotation.set(x1: 120)
lineArrowAnnotation.set(y1: 35)
lineArrowAnnotation.set(x2: 80)
lineArrowAnnotation.set(y2: 31.4)
lineArrowAnnotation.headLength = 8
lineArrowAnnotation.headWidth = 16
lineArrowAnnotation.isEditable = true
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: .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: .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(color: 0xFF006400, thickness: 2)
let verticalLine2 = SCIVerticalLineAnnotation()
verticalLine2.set(x1: 40)
verticalLine2.set(y1: 34)
verticalLine2.isEditable = true
verticalLine2.verticalAlignment = .top
verticalLine2.stroke = SCISolidPenStyle(color: 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, lineArrowAnnotation, 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
}
}