// Xamarin Chart Examples

SciChart iOS & Android ship with Xamarin.iOS and Xamarin.Android bindings around our native iOS & Android Chart controls, allowing you to create fast & feature rich charts to your Xamarin applications. We include ~60 native iOS examples and 60 Android examples, but now also ~30 Xamarin Chart Examples to help you get started with SciChart. You can download the source for our Xamarin Chart Examples from Github, or browse the source code below.

DOWNLOAD XAMARIN CHART EXAMPLES

// Xamarin Realtime FIFO Scrolling Chart

This example demonstrates the difference between FIFO DataSeries and standard DataSeries.
A FIFO series discards old data-points once a predefined number of points is met. This type of data-series is extremely efficient for scrolling charts, where you do not care about discarded (off-screen) data.

FIFO Series can be used in more ways than just scrolling a chart. For instance, reload the entire FIFO buffer each frame to get a Spectrum Analyzer style chart. Or, use FIFO series and set the XAxis.VisibleRange to achieve an ECG style chart.

To learn more, read the tutorials on Xamarin.Android adding realtime updates and Xamarin.iOS adding realtime updates.

Tip!
To switch to FIFO series just need to set FifoCapacity for DataSeries.

// Source Code

The C#/Xamarin.iOS/Xamarin.Android source code for the Xamarin Realtime FIFO Scrolling Chart example is included below (Scroll down!).

Did you know you can also view the source code from one of the following sources as well?

Clone the SciChart.Xamarin.Examples from Github.
Also, the SciChart for Xamarin Trial contains the full source code for the Xamarin chart examples (link below).

DOWNLOAD THE XAMARIN CHART EXAMPLES

Xamarin Realtime FIFO Scrolling Chart - View and Export Source Code

// FifoChartViewController.cs (Xamarin.iOS)

ï»¿using System;
using System.Timers;
using SciChart.Examples.Demo.Fragments.Base;
using SciChart.iOS.Charting;
using Xamarin.Examples.Demo.iOS.Resources.Layout;
using Xamarin.Examples.Demo.iOS.Views.Base;

namespace Xamarin.Examples.Demo.iOS.Views.Examples
{
    [ExampleDefinition("FIFO Chart", description: "Demonstrates scrolling charts", icon: ExampleIcon.RealTime)]
    public class FifoChartViewController : ExampleBaseViewController
    {
        public override Type ExampleViewType => typeof(SingleRealtimeChartLayout);

        public SCIChartSurface Surface => ((SingleRealtimeChartLayout)View).SciChartSurface;

        private const int FifoCapacity = 50;
        private const long TimerInterval = 30;
        private const double OneOverTimeInteval = 1.0 / TimerInterval;
        private const double VisibleRangeMax = FifoCapacity * OneOverTimeInteval;
        private const double GrowBy = VisibleRangeMax * 0.1;

        private readonly Random _random = new Random();

        private readonly XyDataSeries<double, double> _ds1 = new XyDataSeries<double, double> { FifoCapacity = FifoCapacity };
        private readonly XyDataSeries<double, double> _ds2 = new XyDataSeries<double, double> { FifoCapacity = FifoCapacity };
        private readonly XyDataSeries<double, double> _ds3 = new XyDataSeries<double, double> { FifoCapacity = FifoCapacity };

        private readonly SCIDoubleRange _xVisibleRange = new SCIDoubleRange(-GrowBy, VisibleRangeMax + GrowBy);

        private double _t = 0;
        private volatile bool _isRunning = false;
        private Timer _timer;

        protected override void InitExample()
        {
            ((SingleRealtimeChartLayout)View).Start.TouchUpInside += (sender, args) => Start();
            ((SingleRealtimeChartLayout)View).Pause.TouchUpInside += (sender, args) => Pause();
            ((SingleRealtimeChartLayout)View).Reset.TouchUpInside += (sender, args) => Reset();

            var xAxis = new SCINumericAxis { VisibleRange = _xVisibleRange, AutoRange = SCIAutoRange.Never };
            var yAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1), AutoRange = SCIAutoRange.Always };

            var rs1 = new SCIFastLineRenderableSeries { DataSeries = _ds1, StrokeStyle = new SCISolidPenStyle(0xFF4083B7, 2f) };
            var rs2 = new SCIFastLineRenderableSeries { DataSeries = _ds2, StrokeStyle = new SCISolidPenStyle(0xFFFFA500, 2f) };
            var rs3 = new SCIFastLineRenderableSeries { DataSeries = _ds3, StrokeStyle = new SCISolidPenStyle(0xFFE13219, 2f) };

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(rs1);
                Surface.RenderableSeries.Add(rs2);
                Surface.RenderableSeries.Add(rs3);
            }
            Start();
        }

        private void Start()
        {
            if (!_isRunning)
            {
                _isRunning = true;
                _timer = new Timer(TimerInterval);
                _timer.Elapsed += OnTick;
                _timer.AutoReset = true;
                _timer.Start();
            }
        }

        private void Pause()
        {
            if (_isRunning)
            {
                _isRunning = false;
                _timer.Stop();
                _timer.Elapsed -= OnTick;
                _timer = null;
            }
        }

        private void Reset()
        {
            if (_isRunning)
            {
                Pause();
            }

            _ds1.Clear();
            _ds2.Clear();
            _ds3.Clear();
        }

        private void OnTick(object sender, ElapsedEventArgs e)
        {
            lock (_timer)
            {
                var y1 = 3.0 * Math.Sin(2 * Math.PI * 1.4 * _t) + _random.NextDouble() * 0.5;
                var y2 = 2.0 * Math.Cos(2 * Math.PI * 0.8 * _t) + _random.NextDouble() * 0.5;
                var y3 = 1.0 * Math.Sin(2 * Math.PI * 2.2 * _t) + _random.NextDouble() * 0.5;

                _ds1.Append(_t, y1);
                _ds2.Append(_t, y2);
                _ds3.Append(_t, y3);

                _t += OneOverTimeInteval;
                if (_t > VisibleRangeMax)
                {
                    _xVisibleRange.SetMinMax(_xVisibleRange.Min + OneOverTimeInteval, _xVisibleRange.Max + OneOverTimeInteval);
                }
            }
        }

        public override void ViewDidDisappear(bool animated)
        {
            base.ViewDidDisappear(animated);

            Reset();
        }
    }
}

// FifoChartFragment.cs (Xamarin.Android)

ï»¿using System;
using System.Timers;
using Android.Widget;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Visuals;
using SciChart.Charting.Visuals.Axes;
using SciChart.Charting.Visuals.RenderableSeries;
using SciChart.Data.Model;
using SciChart.Drawing.Common;
using SciChart.Examples.Demo.Fragments.Base;
using Xamarin.Examples.Demo.Droid.Extensions;
using Xamarin.Examples.Demo.Droid.Fragments.Base;

namespace Xamarin.Examples.Demo.Droid.Fragments.Examples
{
    [ExampleDefinition("FIFO Chart", description:"Demonstrates a scrolling FIFO chart", icon: ExampleIcon.RealTime)]
    public class FifoChartFragment : ExampleBaseFragment
    {
        private const int FifoCapacity = 50;
        private const long TimerInterval = 30;
        private const double OneOverTimeInteval = 1.0/TimerInterval;
        private const double VisibleRangeMax = FifoCapacity*OneOverTimeInteval;
        private const double GrowBy = VisibleRangeMax*0.1;

        public override int ExampleLayoutId => Resource.Layout.Example_Single_Realtime_Chart_Fragment;

        private SciChartSurface Surface => View.FindViewById<SciChartSurface>(Resource.Id.chart);

        private readonly Random _random = new Random(42);

        private readonly XyDataSeries<double, double> _ds1 = new XyDataSeries<double, double> {FifoCapacityValue = FifoCapacity};
        private readonly XyDataSeries<double, double> _ds2 = new XyDataSeries<double, double> {FifoCapacityValue = FifoCapacity};
        private readonly XyDataSeries<double, double> _ds3 = new XyDataSeries<double, double> {FifoCapacityValue = FifoCapacity};

        private readonly DoubleRange _xVisibleRange = new DoubleRange(-GrowBy, VisibleRangeMax + GrowBy);

        private double _t = 0;
        private volatile bool _isRunning = false;
        private readonly object _syncRoot = new object();
        private Timer _timer;

        protected override void InitExample()
        {
            View.FindViewById<Button>(Resource.Id.start).Click += (sender, args) => Start();
            View.FindViewById<Button>(Resource.Id.pause).Click += (sender, args) => Pause();
            View.FindViewById<Button>(Resource.Id.reset).Click += (sender, args) => Reset();

            var xAxis = new NumericAxis(Activity) {VisibleRange = _xVisibleRange, AutoRange = AutoRange.Never};
            var yAxis = new NumericAxis(Activity) {GrowBy = new DoubleRange(0.1, 0.1), AutoRange = AutoRange.Always};

            var rs1 = new FastLineRenderableSeries {DataSeries = _ds1, StrokeStyle = new SolidPenStyle(0xFF4083B7, 2f.ToDip(Activity))};
            var rs2 = new FastLineRenderableSeries {DataSeries = _ds2, StrokeStyle = new SolidPenStyle(0xFFFFA500, 2f.ToDip(Activity))};
            var rs3 = new FastLineRenderableSeries {DataSeries = _ds3, StrokeStyle = new SolidPenStyle(0xFFE13219, 2f.ToDip(Activity))};

            using (Surface.SuspendUpdates())
            {
                Surface.XAxes.Add(xAxis);
                Surface.YAxes.Add(yAxis);
                Surface.RenderableSeries.Add(rs1);
                Surface.RenderableSeries.Add(rs2);
                Surface.RenderableSeries.Add(rs3);
            }
            Start();
        }

        private void Start()
        {
            if (!_isRunning)
            {
                _isRunning = true;
                _timer = new Timer(TimerInterval);
                _timer.Elapsed += OnTick;
                _timer.AutoReset = true;
                _timer.Start();
            }
        }

        private void Pause()
        {
            if (_isRunning)
            {
                _isRunning = false;
                _timer.Stop();
                _timer.Elapsed -= OnTick;
                _timer = null;
            }
        }

        private void Reset()
        {
            if (_isRunning)
            {
                Pause();
            }

            using (Surface.SuspendUpdates())
            {
                _t = 0;
                _xVisibleRange.SetMinMaxDouble(-GrowBy, VisibleRangeMax + GrowBy);

                _ds1.Clear();
                _ds2.Clear();
                _ds3.Clear();
            }
        }

        private void OnTick(object sender, ElapsedEventArgs e)
        {
            lock (_syncRoot)
            {
                if(!_isRunning) return;

                AppendData(_random);
            }
        }

        private void AppendData(Random random)
        {
            var y1 = 3.0*Math.Sin(2*Math.PI*1.4*_t) + random.NextDouble()*0.5;
            var y2 = 2.0*Math.Cos(2*Math.PI*0.8*_t) + random.NextDouble()*0.5;
            var y3 = 1.0*Math.Sin(2*Math.PI*2.2*_t) + random.NextDouble()*0.5;

            _ds1.Append(_t, y1);
            _ds2.Append(_t, y2);
            _ds3.Append(_t, y3);

            _t += OneOverTimeInteval;
            if (_t > VisibleRangeMax)
            {
                _xVisibleRange.SetMinMax(_xVisibleRange.Min + OneOverTimeInteval, _xVisibleRange.Max + OneOverTimeInteval);
            }
        }

        public override void OnDestroyView()
        {
            base.OnDestroyView();

            Reset();
        }

        public override void InitExampleForUiTest()
        {
            base.InitExampleForUiTest();

            lock (_syncRoot)
            {
                Reset(); 

                var random = new Random(42);
                for (var i = 0; i < FifoCapacity; i++)
                {
                    AppendData(random);
                }
            }
        }
    }
}

< BACK TO ALL XAMARIN CHART CHART EXAMPLES

Xamarin Realtime FIFO Scrolling Chart

// Xamarin Chart Examples

// Xamarin Realtime FIFO Scrolling Chart

// Source Code

// FifoChartViewController.cs (Xamarin.iOS)

// FifoChartFragment.cs (Xamarin.Android)

XAMARIN CHART EXAMPLES

2D Charts

Basic Chart Types

Chart Annotations

Create a Multiseries Chart

Create Realtime Charts

Create Stock Charts

Legends

Styling and Theming

Tooltips and Hit Test

Featured Apps

Medical Charts

Performance Demos