SciChart Android Tutorial - Annotations
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:
- BoxAnnotation
- LineAnnotation
- LineArrowAnnotation
- HorizontalLineAnnotation
- VerticalLineAnnotation
- TextAnnotation
- AxisLabelAnnotation
- AxisMarkerAnnotation
- CustomAnnotation
Getting Started
This tutorial is suitable for Java and Kotlin.
Note
Source code for this tutorial can be found at our Github Repository: Java and Kotlin Tutorials Repository
In this tutorial, we are going to build on top of the FIFO scrolling chart that was implemented in the previous Adding Realtime Updates tutorial.
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 TextAnnotation with some text and background and add it to the annotations collection.
See the modified code below:
private final Runnable updateData = () -> {
Integer x = count;
UpdateSuspender.using(surface, () -> {
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.zoomExtentsX();
count += 1;
});
};
private void tryAddAnnotationAt(int x) {
// add label every 100 data points
if (x % 100 == 0) {
final TextAnnotation label = new TextAnnotation(this);
label.setText("N");
label.setX1(x);
label.setY1(0);
label.setHorizontalAnchorPoint(HorizontalAnchorPoint.Center);
label.setVerticalAnchorPoint(VerticalAnchorPoint.Center);
label.setFontStyle(new FontStyle(30f, Color.WHITE));
// add label into annotation collection
surface.getAnnotations().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.getAnnotations().remove(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 Java and Kotlin Tutorials Repository.
Also, you can found next tutorial from this series here - SciChart Android Tutorial - Multiple Axis
Of course, this is not the limit of what you can achieve with the SciChart Android. You might want to read the article about annotations:
as well as some other general articles listed below:
Finally, start exploring. The SciChart Android library and functionality is quite extensive. You can look into our SciChart Android Examples Suite which are full of 2D and 3D examples, which are also available on our GitHub