Android & Xamarin.Android Charting Documentation - SciChart Android Charts SDK v2.x
Xamarin Tutorial 06 - Adding Realtime Updates

This article is a continuation of a tutorial series on how to create a chart using SciChart Android. So far we have focused on static charts where the data doesn't change. Assuming you have completed Xamarin Tutorial 05 - Adding Tooltips and Legends, we will now make some changes to update the data dynamically.

Updating Data Values

In our DataSeries, we have some static data so far. Lets animate it now.

We are going to add a Timer and schedule updating the data on timer tick. To update data in a DataSeries, we have to call one of the available UpdateXXX methods on that DataSeries. Also to avoid unnecessary boxing/unboxing of primitive types we'll use two DoubleValues instances as a buffers.

Update Data
Copy Code
double phase = 0;

var timer = new Timer(30) {AutoReset = true};
var lineBuffer = new DoubleValues(1000);
var scatterBuffer = new DoubleValues(1000);

// Update on each tick of timer
timer.Elapsed += (s, e) =>
{
     lineBuffer.Clear();
     scatterBuffer.Clear();

     for (int i = 0; i < 1000; i++)
     {
         lineBuffer.Add(Math.Sin(i*0.1 + phase));
         scatterBuffer.Add(Math.Cos(i*0.1 + phase));
     }

     using (chart.SuspendUpdates())
     {
         lineData.UpdateRangeYAt(0, lineBuffer);
         scatterData.UpdateRangeYAt(0, scatterBuffer);
     }

     phase += 0.01;
};

timer.Start();

Adding New Data Values

The DataSeries class declares a bunch of Append() methods. You should call a suitable one and pass new data as a param into it to add the data to a DataSeries. The code from above can be rewritten as follows to append new data constantly to the DataSeries:

Append Data
Copy Code
var timer = new Timer(30) {AutoReset = true};

// Update on each tick of timer
timer.Elapsed += (s, e) =>
{
     using (chart.SuspendUpdates())
     {
         var x = lineData.Count;
         lineData.Append(x, Math.Sin(x * 0.1 ));
         scatterData.Append(x, Math.Cos(x * 0.1));
        
         // zoom series to fit viewport size into XAxis direction
         chart.ZoomExtentsX();
     }
};

timer.Start();

 

Scrolling Realtime (FIFO) Charts

The most memory efficient way to achieve scrolling is to set FifoCapacity on a DataSeries to set the maximum size of a DataSeries before old points are discarded. DataSeries in FIFO mode act as a circular (first-in-first-out) buffer. Once the capacity is exceeded, old points are discarded. You cannot zoom back to see the old points, once they are lost, they are lost.

To make a DataSeries use the FIFO buffer, you have to set fifo capacity on the DataSeries, which defines the size of the FIFO buffer. The declaration of DataSeries from our application should be rewritten like the following to utilize a FIFO buffer:

FIFO Scrolling Charts
Copy Code
const int fifoCapacity = 500;

// Create XyDataSeries to host data for our chart
var lineData = new XyDataSeries<double, double>() {SeriesName = "Sin(x)", FifoCapacity = new Integer(fifoCapacity)};
var scatterData = new XyDataSeries<double, double>() {SeriesName = "Cos(x)", FifoCapacity = new Integer(fifoCapacity) };

 

 

See Also