In the prior tutorials we have familiarized with a great and powerful SciChart functionality.
In this one we are going to lean about another powerful SciChart API - Annotations API which allows placing different elements to the Chart.
Annotation available out of the box in SciChart are listed below:
Please make corresponding amendments to your code if required.
Adding Annotations to the Chart
Lets add a kind of news bulletin markers to the chart, one per 100 data points.
To achieve this, we are going to modify our updateData handler.
We want to create a SCITextAnnotation with some text and background and add it to the ISCIChartSurface.annotations collection.
See the modified code below:
- (void)updateData {
NSInteger x = _lineDataSeries.count;
[SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
[_lineDataSeries appendX:@(x) y:@(sin(x * 0.1))];
[_scatterDataSeries appendX:@(x) y:@(cos(x * 0.1))];
[self tryAddAnnotationAt:x];
// zoom series to fit viewport size into X-Axis direction
[self.surface zoomExtents];
}];
}
- (void)tryAddAnnotationAt:(NSInteger)x {
// add label every 100 data points
if (x % 100 == 0) {
SCITextAnnotation *label = [SCITextAnnotation new];
label.text = @“N”;
label.x1 = @(x);
label.y1 = @(0);
label.horizontalAnchorPoint = SCIHorizontalAnchorPoint_Center;
label.verticalAnchorPoint = SCIVerticalAnchorPoint_Center;
label.fontStyle = [[SCIFontStyle alloc] initWithFontSize:30 andTextColor:UIColor.whiteColor];
// add label into annotation collection
[self.surface.annotations add:label];
// if we add annotation and x > fifoCapacity
// then we need to remove annotation which goes out of the screen
if (x > _fifoCapacity) {
[self.surface.annotations removeAt:0];
}
}
}
@objc fileprivate func updateData(_ timer: Timer) {
let x = count
SCIUpdateSuspender.usingWith(surface) {
self.lineDataSeries.append(x: x, y: sin(Double(x) * 0.1))
self.scatterDataSeries.append(x: x, y: cos(Double(x) * 0.1))
self.tryAddAnnotation(at: x)
// zoom series to fit viewport size into X-Axis direction
self.surface.zoomExtents()
self.count += 1
}
}
fileprivate func tryAddAnnotation(at x: Int) {
// add label every 100 data points
if (x % 100 == 0) {
let label = SCITextAnnotation()
label.text = “N”
label.set(x1: x)
label.set(y1: 0)
label.horizontalAnchorPoint = .center
label.verticalAnchorPoint = .center
label.fontStyle = SCIFontStyle(fontSize: 30, andTextColor: .white)
// add label into annotation collection
self.surface.annotations.add(label)
// if we add annotation and x > fifoCapacity
// then we need to remove annotation which goes out of the screen
if (x > fifoCapacity) {
self.surface.annotations.remove(at: 0)
}
}
}
private void UpdateData(object sender, ElapsedEventArgs e)
{
InvokeOnMainThread(() =>
{
if (!_isRunning) return;
var x = count;
using (Surface.SuspendUpdates())
{
lineDataSeries.Append(x, Math.Sin(x * 0.1));
scatterDataSeries.Append(x, Math.Cos(x * 0.1));
TryAddAnnotationAt(x);
// zoom series to fit viewport size into X-Axis direction
Surface.ZoomExtents();
count++;
}
});
}
private void TryAddAnnotationAt(int x)
{
// add label every 100 data points
if (x % 100 == 0)
{
var label = new SCITextAnnotation
{
Text = “N”,
X1Value = x,
Y1Value = 0,
HorizontalAnchorPoint = SCIHorizontalAnchorPoint.Center,
VerticalAnchorPoint = SCIVerticalAnchorPoint.Center,
FontStyle = new SCIFontStyle(30, 0xFFFFFFFF)
};
// add label into annotation collection
Surface.Annotations.Add(label);
// if we add annotation and x > fifoCapacity
// then we need to remove annotation which goes out of the screen
if (x > fifoCapacity)
{
Surface.Annotations.RemoveAt(0);
}
}
}
NOTE: After appending new data we call zoomExtents to make series to fit the viewport.
Which will result in the following:
Where to Go From Here?
You can download the final project from our GitHub Repository:
Finally, start exploring. The SciChart iOS is quite extensive.
You can look into our SciChart iOS Examples Suite which are full of 2D and 3D examples, which are also available on our GitHub.