Android & Xamarin.Android Charting Documentation - SciChart Android Charts SDK v2.x
Tutorial 07 - Adding Annotations

In the second tutorial, Creating a Chart, we touched a little on the Annotations API. It allows you to add UI elements to a chart: Lines, Text, Boxes, Arrows, custom Markers. The markers update as you zoom and pan the chart.

We're going to build on our previous tutorial: Adding Realtime Updates to add annotations to a chart in a realtime context.

Chart Annotations in SciChart

There are many different types of annotations provided out of the box in SciChart. All these are custom UI elements that share the IAnnotation interface, which provide the API to configure and place them on a SciChartSurface. There are such annotation types as LineArrowAnnotationBoxAnnotationTextAnnotation, etc. Also, it is possible to create a custom annotations via the API exposed by the CustomAnnotation type.

Adding Annotations to the Chart

In this tutorial, we are going to build on the FIFO scrolling chart that was implemented in the previous tutorial. Please make corresponding amendments to your code if required.

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 updateDataTask. We want to create a TextAnnotation with some text and background and add it to the Annotations collection of SciChartSurface. Similarly to as we did, we are going to use SciChartBuilder to create and configure the annotation.

The modified code is shown below:

Copy Code
final int fifoCapacity = 500;
final XyDataSeries lineData = sciChartBuilder.newXyDataSeries(Integer.class, Double.class)
        .withFifoCapacity(fifoCapacity)
        .build();
final XyDataSeries scatterData = sciChartBuilder.newXyDataSeries(Integer.class, Double.class)
        .withFifoCapacity(fifoCapacity)
        .build();

        TimerTask updateDataTask = new TimerTask() {
            private int x = 0;
            @Override
            public void run() {
                UpdateSuspender.using(surface, new Runnable() {
                    @Override
                    public void run() {
                        lineData.append(x, Math.sin(x * 0.1));
                        scatterData.append(x, Math.cos(x * 0.1));

                        // New code here
                        // Add an annotation every 100 data points
                        if(x%100 == 0) {
                            TextAnnotation marker = sciChartBuilder.newTextAnnotation()
                                    .withIsEditable(false)
                                    .withText("N")
                                    .withBackgroundColor(ColorUtil.Green)
                                    .withX1(x)
                                    .withY1(0.0)
                                    .withVerticalAnchorPoint(VerticalAnchorPoint.Center)
                                    .withHorizontalAnchorPoint(HorizontalAnchorPoint.Center)
                                    .withFontStyle(20, ColorUtil.White)
                                    .withZIndex(1)
                                    .build();

                            surface.getAnnotations().add(marker);

                            // Remove one annotation from the beginning
                            // in the FIFO way
                            if(x > fifoCapacity){
                                surface.getAnnotations().remove(0);
                            }
                        }

                        // Zoom series to fit the viewport
                        surface.zoomExtents();
                        ++x;
                    }
                });
            }
        };

        Timer timer = new Timer();
        long delay = 0;
        long interval = 10;
        timer.schedule(updateDataTask, delay, interval);

The code from above will result in the following chart:

Further Reading

You can find out more about the Annotations API in the relevant section of the documentation: What Is an Annotation. Also, there is a couple of examples showcasing annotations in the SciChart Android Examples Suite.

See Also