iOS Charting Documentation - SciChart
Tutorial 03 - Adding Series to a Chart

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.

Declaring a RenderableSeries

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

First, lets declare the data series and renderable series:

Create Data for the Charts
Copy Code
   var lineDataSeries: SCIXyDataSeries!
   var scatterDataSeries: SCIXyDataSeries!
    
   var lineRenderableSeries: SCIFastLineRenderableSeries!
   var scatterRenderableSeries: SCIXyScatterRenderableSeries!

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

Create Data for the Charts
Copy Code
    func createDataSeries(){
        // Init line data series
        lineDataSeries = SCIXyDataSeries(xType: .double, yType: .double)
        for i in 0..<500{
            lineDataSeries.appendX(SCIGeneric(i), y: SCIGeneric(sin(Double(i))*0.01))
        }
       
        // Init scatter data series
        scatterDataSeries = SCIXyDataSeries(xType: .double, yType: .double)
        for i in 0..<500{
            scatterDataSeries.appendX(SCIGeneric(i), y: SCIGeneric(cos(Double(i))*0.01))
        }
    }
   
    func createRenderableSeries(){
        lineRenderableSeries = SCIFastLineRenderableSeries()
        lineRenderableSeries.dataSeries = lineDataSeries
       
        scatterRenderableSeries = SCIXyScatterRenderableSeries()
        scatterRenderableSeries.dataSeries = scatterDataSeries
       
        sciChartSurface?.renderableSeries.add(lineRenderableSeries)
        sciChartSurface?.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:

Create Data for the Charts
Copy Code
         
...
    override func viewDidLoad() {
        super.viewDidLoad()
       
        // Do any additional setup after loading the view, typically from a nib.
       
        sciChartSurface = SCIChartSurface(frame: self.view.bounds)
        sciChartSurface?.translatesAutoresizingMaskIntoConstraints = true
       
        self.view.addSubview(sciChartSurface!)
       
        sciChartSurface?.xAxes.add(SCINumericAxis())
        sciChartSurface?.yAxes.add(SCINumericAxis())
       
        createDataSeries()
        createRenderableSeries()
    } 
...

 

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

Further Reading

Each series type deserves an article in itself! For further reading, please see the articles below:

  1. FastLineRenderableSeries - The Line Series Type
  2. XyScatterRenderableSeries - The Scatter Series Type

Tutorials Repository

As it was mentioned previously - we've created Git repository with all Tutorials. So you can clone/download the appropriate project you need!