Tutorial 07 - Adding Annotations

In the second tutorial, Creating a Chart, we briefly mentioned the Text Annotations API to write Hello World on the chart.

This API also It lets you to add other UI elements to a chart, like:

Lines
Text
Boxes
Arrows
Android Views, like, e.g., an ImageView
custom Markers

Source code for this tutorial can be found at SciChart.Android.Examples Github Repository.

Chart Annotations in SciChart

The SciChart annotations derive from the IAnnotation interface.

This annotation types include:

Adding Annotations to the Chart

In this tutorial, we are going to build on the previous tutorial. We will add a bulletin type marker (e.g., text, like a stock ticker or news item) to the chart.

To do this, we will modify the updateDataTask.

We create a TextAnnotation and add it to the Annotations collection of the SciChartSurface. We use SciChartBuilder to create and configure the annotation.

The modified code is shown below:

Example Title	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);

Example Title

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);

This code from produces this following chart where we have added the letter N as a TextAnnotation as each points where x is a multiple of 100.

Chart Annotations in SciChart

Adding Annotations to the Chart

Further Reading