Quick Start Guide > Tutorials (Xamarin.iOS) > Tutorial 03 - Adding Series to ChartSurface
Tutorial 03 - Adding Series to ChartSurface

Adding Series to a SciChartSurface

Following on from Tutorial 02 - Creating a SciChartSurface where we created the chart control, added an XAxis and a YAxis, we will now add a some Series with some data to the chart.

Source code for this tutorial can be found at our Xamarin Examples Github Repository under Tutorials.iOS

Declaring a RenderableSeries

To draw a Line and Scatter series on the chart, we need to define RenderableSeries, and DataSeries to hold the data.

First, lets declare the data series and renderable series:

Create Data for the Charts
Copy Code
using System;
using UIKit;
using SciChart.iOS.Charting;
namespace HavingFunWithSciChartiOS
{
    public partial class ViewController : UIViewController
    {
        private SCIChartSurface _surface;
        private XyDataSeries<Double, Double> _lineDataSeries;
        private XyDataSeries<Double, Double> _scatterDataSeries;

        private SCIFastLineRenderableSeries _lineRenderableSeries;
        private SCIXyScatterRenderableSeries _scatterRenderableSeries;
...

In the following step, let's add two methods for initializing these properties:

Create Data for the Charts
Copy Code
        void CreateDataSeries()
        {
            // Init line data series
            _lineDataSeries = new XyDataSeries<Double, Double>();
            for (var i = 0; i<10; i++)
            {
                _lineDataSeries.Append(i, Math.Sin(i));
            }
            // Init scatter data series
            _scatterDataSeries = new XyDataSeries<Double, Double>();
            for (var i = 0; i < 10; i++)
            {
                _scatterDataSeries.Append(i, Math.Sin(i));
            }
        }
        void CreateRenderableSeries()
        {
            _lineRenderableSeries = new SCIFastLineRenderableSeries();
            _lineRenderableSeries.DataSeries = _lineDataSeries;

            _scatterRenderableSeries = new SCIXyScatterRenderableSeries();
            _scatterRenderableSeries.DataSeries = _scatterDataSeries;

            _surface.RenderableSeries.Add(_lineRenderableSeries);
            _surface.RenderableSeries.Add(_scatterRenderableSeries);
        }

Now, to show the renderable series, we need to call these two methods. Let's call them in ViewDidLoad method, where we created SCIChartSurface object.

After all manipulations, our ViewController should be like follows:

ViewController.cs
Copy Code
using System;
using UIKit;
using SciChart.iOS.Charting;
namespace HavingFunWithSciChartiOS
{
    public partial class ViewController : UIViewController
    {
        private SCIChartSurface _surface;
        private XyDataSeries<Double, Double> _lineDataSeries;
        private XyDataSeries<Double, Double> _scatterDataSeries;

        private SCIFastLineRenderableSeries _lineRenderableSeries;
        private SCIXyScatterRenderableSeries _scatterRenderableSeries;
        public ViewController(IntPtr handle) : base(handle)
        {
        }
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // Perform any additional setup after loading the view, typically from a nib.
            _surface = new SCIChartSurface();
            _surface.TranslatesAutoresizingMaskIntoConstraints = true;
            _surface.Frame = this.View.Bounds;
            this.View.AddSubview(_surface);
            _surface.XAxes.Add(new SCINumericAxis());
            _surface.YAxes.Add(new SCINumericAxis());
            CreateDataSeries();
            CreateRenderableSeries();
        }
        void CreateDataSeries()
        {
            // Init line data series
            _lineDataSeries = new XyDataSeries<Double, Double>();
            for (var i = 0; i<10; i++)
            {
                _lineDataSeries.Append(i, Math.Sin(i));
            }
            // Init scatter data series
            _scatterDataSeries = new XyDataSeries<Double, Double>();
            for (var i = 0; i < 10; i++)
            {
                _scatterDataSeries.Append(i, Math.Sin(i));
            }
        }
        void CreateRenderableSeries()
        {
            _lineRenderableSeries = new SCIFastLineRenderableSeries();
            _lineRenderableSeries.DataSeries = _lineDataSeries;

            _scatterRenderableSeries = new SCIXyScatterRenderableSeries();
            _scatterRenderableSeries.DataSeries = _scatterDataSeries;

            _surface.RenderableSeries.Add(_lineRenderableSeries);
            _surface.RenderableSeries.Add(_scatterRenderableSeries);
            }
        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
            // Release any cached data, images, etc that aren't in use.
        }
    }
}

Congratulations! You now have added some series to a chart!

 

See Also