Xamarin Tutorial 07 - Adding Annotations

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

Adding Annotations to the Chart

In this tutorial, we are going to build on the FIFO scrolling chart that was implemented in the Xamarin Tutorial 06 - Adding Realtime Updates. 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 handler for timer's Elapsed event. We want to create a TextAnnotation with some text and background and add it to the Annotations collection of SciChartSurface.

The modified code is shown below:

Add Annotation	Copy Code
var x = lineData.Count; // Append on each tick of timer timer.Elapsed += (s, e) => { using (chart.SuspendUpdates()) { lineData.Append(x, Math.Sin(x0.1)); scatterData.Append(x, Math.Cos(x0.1)); // add label every 100 data points if (x%100 == 0) { // create text annotation with label var label = new TextAnnotation(this) { Text = "N", X1Value = x, Y1Value = 0, HorizontalAnchorPoint = HorizontalAnchorPoint.Center, VerticalAnchorPoint = VerticalAnchorPoint.Center, FontStyle = new FontStyle(20, Color.White), Background = new ColorDrawable(Color.DarkGreen), ZIndex = 1 }; // add label into annotation collection chart.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) chart.Annotations.Remove(0); } // zoom series to fit viewport size into XAxis direction chart.ZoomExtentsX(); x++; } }; timer.Start();

Add Annotation

Copy Code

var x = lineData.Count;
         
// Append on each tick of timer
timer.Elapsed += (s, e) =>
{
     using (chart.SuspendUpdates())
     {
         lineData.Append(x, Math.Sin(x*0.1));
         scatterData.Append(x, Math.Cos(x*0.1));

         // add label every 100 data points
         if (x%100 == 0)
         {
             // create text annotation with label
             var label = new TextAnnotation(this)
             {
                 Text = "N",
                 X1Value = x,
                 Y1Value = 0,
                 HorizontalAnchorPoint = HorizontalAnchorPoint.Center,
                 VerticalAnchorPoint = VerticalAnchorPoint.Center,
                 FontStyle = new FontStyle(20, Color.White),
                 Background = new ColorDrawable(Color.DarkGreen),
                 ZIndex = 1
             };

             // add label into annotation collection
             chart.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)
                 chart.Annotations.Remove(0);
         }

         // zoom series to fit viewport size into XAxis direction
         chart.ZoomExtentsX();
         x++;
     }
};

timer.Start();

The code from above will result in the following chart: