iOS & macOS charts - Examples
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).
InteractionWithAnnotations.m
View source code//******************************************************************************
// 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"
@interface CustomGripBoxAnnotation : SCIBoxAnnotation
@end
@implementation CustomGripBoxAnnotation
// Override to draw custom resizing grips
- (void)internalDrawResizingGripsOnCGContext:(CGContextRef)context inRect:(CGRect)rect atCoordinates:(SCIAnnotationCoordinates *)coordinates {
double center = (coordinates.pt1.y + coordinates.pt2.y) / 2.0;
CGPoint origin = CGPointMake(coordinates.pt1.x, center);
[self drawCustomGripWithContext:context origin:origin];
}
// Draws the custom grip
- (void)drawCustomGripWithContext:(CGContextRef)context origin:(CGPoint)origin {
SCIImage *gripImage = [SCIImage imageNamed:@"chart.custom.grip"];
if (!gripImage) {
gripImage = [[SCIImage alloc] init];
}
CGRect drawRect = CGRectMake(origin.x - 24, origin.y - 12, 24, 24);
[self.resizingGrip onDrawCustomGripAt:context imgGrip:gripImage isHorizontal:YES drawRect:drawRect];
}
// Override to detect hit on custom grip
- (SCIAnnotationPointIndex)getResizingGripHitIndexAt:(CGPoint)hitPoint
andAnnotationCoordinates:(SCIAnnotationCoordinates *)annotationCoordinates {
double center = (annotationCoordinates.pt1.y + annotationCoordinates.pt2.y) / 2.0;
CGRect gripFrame = CGRectMake(annotationCoordinates.pt1.x - 24, center - 12, 24, 24);
BOOL isHit = [self.resizingGrip customGripIsHitAtPoint:hitPoint andDrawnFrame:gripFrame];
if (isHit) {
return SCIAnnotationPointIndexX1Y1Index;
}
return -1;
}
@end
@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:38];
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;
SCIZoomPanModifier *zoom = [SCIZoomPanModifier new];
zoom.receiveHandledEvents = YES;
[self.surface.xAxes add:xAxis];
[self.surface.yAxes add:yAxis];
[self.surface.renderableSeries add:rSeries];
[self.surface.chartModifiers add:zoom];
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] initWithColorCode: 0xFFc43360 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] initWithColorCode:0x55274b92 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: 0xFF68bcae thickness:2];
SCIVerticalLineAnnotation *verticalLine2 = [SCIVerticalLineAnnotation new];
verticalLine2.x1 = @(40);
verticalLine2.y1 = @(34);
verticalLine2.isEditable = YES;
verticalLine2.verticalAlignment = SCIAlignment_Top;
verticalLine2.stroke = [[SCISolidPenStyle alloc] initWithColorCode:0xFF68bcae 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];
// Create and configure the custom grip box annotation
CustomGripBoxAnnotation *customGripAnnotation = [[CustomGripBoxAnnotation alloc] init];
customGripAnnotation.isEditable = YES;
customGripAnnotation.isSelected = YES;
[customGripAnnotation setX1:@70];
[customGripAnnotation setX2:@170];
[customGripAnnotation setY1:@36.4];
[customGripAnnotation setY2:@37.2];
customGripAnnotation.dragDirections = SCIDirection2D_XDirection;
// Create and configure the custom grip text annotation
SCITextAnnotation *customGripTextAnnotation = [[SCITextAnnotation alloc] init];
[customGripTextAnnotation setX1:@70];
[customGripTextAnnotation setY1:@37.4];
customGripTextAnnotation.verticalAnchorPoint = SCIVerticalAnchorPoint_Bottom;
customGripTextAnnotation.horizontalAnchorPoint = SCIHorizontalAnchorPoint_Left;
customGripTextAnnotation.text = @"Annotation with Custom Grip";
customGripTextAnnotation.fontStyle = [[SCIFontStyle alloc] initWithFontSize:14 andTextColor:SCIColor.whiteColor];
self.surface.annotations = [[SCIAnnotationCollection alloc] initWithCollection:@[textAnnotation3, textAnnotation1, textAnnotation2, rotatedTextAnnotation, boxAnnotation, lineAnnotation1, lineAnnotation2, lineArrowAnnotation, axisMarker1, axisMarker2, horizontalLine1, horizontalLine2, verticalLine1, verticalLine2, customGripAnnotation, customGripTextAnnotation]];
}
- (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
View source code//******************************************************************************
// 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: 38)
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
let zoom = SCIZoomPanModifier()
zoom.receiveHandledEvents = true
surface.xAxes.add(xAxis)
surface.yAxes.add(yAxis)
surface.renderableSeries.add(rSeries)
surface.chartModifiers.add(zoom)
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: 0xFFc43360, 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: 0x55274b92, 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: 0xFF68bcae, thickness: 2)
let verticalLine2 = SCIVerticalLineAnnotation()
verticalLine2.set(x1: 40)
verticalLine2.set(y1: 34)
verticalLine2.isEditable = true
verticalLine2.verticalAlignment = .top
verticalLine2.stroke = SCISolidPenStyle(color: 0xFF68bcae, 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)
let customGripAnnotation = customGripBoxAnnotation()
customGripAnnotation.isEditable = true
customGripAnnotation.isSelected = true
customGripAnnotation.set(x1: 70)
customGripAnnotation.set(x2: 170)
customGripAnnotation.set(y1: 36.4)
customGripAnnotation.set(y2: 37.2)
customGripAnnotation.dragDirections = .xDirection
let customGripTextAnnotation = SCITextAnnotation()
customGripTextAnnotation.set(x1: 70)
customGripTextAnnotation.set(y1: 37.4)
customGripTextAnnotation.verticalAnchorPoint = .bottom
customGripTextAnnotation.horizontalAnchorPoint = .left
customGripTextAnnotation.text = "Annotation with Custom Grip"
customGripTextAnnotation.fontStyle = SCIFontStyle(fontSize: 14, andTextColor: .white)
surface.annotations = SCIAnnotationCollection(collection: [textAnnotation3, textAnnotation1, textAnnotation2, rotatedTextAnnotation, boxAnnotation, lineAnnotation1, lineAnnotation2, lineArrowAnnotation, axisMarker1, axisMarker2, horizontalLine1, horizontalLine2, verticalLine1, verticalLine2, customGripAnnotation, customGripTextAnnotation])
}
fileprivate func createLabelWith(text: String?, labelPlacement: SCILabelPlacement) -> SCIAnnotationLabel {
let annotationLabel = SCIAnnotationLabel()
if (text != nil) {
annotationLabel.text = text!
}
annotationLabel.labelPlacement = labelPlacement
return annotationLabel
}
}
class customGripBoxAnnotation: SCIBoxAnnotation {
override func internalDrawResizingGrips(on context: CGContext, in rect: CGRect, at coordinates: SCIAnnotationCoordinates) {
let center = (coordinates.pt1.y + coordinates.pt2.y) / 2
drawCustomGrip(context: context, origin: CGPoint(x: coordinates.pt1.x, y: center))
}
private func drawCustomGrip(context: CGContext, origin: CGPoint) {
if let image = SCIImage(named: "chart.custom.grip"){
self.resizingGrip.onDrawCustomGrip(at: context, imgGrip: image, isHorizontal: true, draw: CGRect(x: origin.x - 24, y: origin.y - 12, width: 24, height: 24))
}
}
override func getResizingGripHitIndex(at hitPoint: CGPoint, andAnnotationCoordinates annotationCoordinates: SCIAnnotationCoordinates) -> SCIAnnotationPointIndex {
let center = (annotationCoordinates.pt1.y + annotationCoordinates.pt2.y) / 2
let result = self.resizingGrip.customGripIsHit(at: hitPoint, andDrawnFrame: CGRect(x: annotationCoordinates.pt1.x - 24, y: center - 12, width: 24, height: 24))
if result {
return SCIAnnotationPointIndex(rawValue: 0)
}
return SCIAnnotationPointIndex(rawValue: -1)
}
}
