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(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:
See Also