iOS & macOS Charting Documentation - SciChart iOS & macOS Charts SDK v4.x

SciChart iOS Tutorial - Create a simple 2D Chart

In this SciChart iOS 3D tutorial, you will learn to:

create a 2D Chart
add X and Y Axes to a Chart;
render a Simple Line and Scatter Series.

NOTE: This tutorial assumes that you’ve already know how to Link SciChart iOS and Add SCIChartSurface instance into your ViewController. If you need more information - please read the following articles:

Integrating SciChart.framework

The SCIChartSurface Type

Getting Started

This tutorial is suitable for Objective-C, Swift and C# with Xamarin.iOS.

NOTE: Source code for this tutorial can be found at our Github Repository:

Swift

Xamarin

Adding Axes to the SCIChartSurface

Once you have added a SCIChartSurface into your ViewController, you will not see anything drawn because you need to add axes. This is important thing here - two axes X and Y has to be added to your surface. This is a bare minimum to see drawn grid on your device.

[self.surface.xAxes add:[SCINumericAxis new]];
[self.surface.yAxes add:[SCINumericAxis new]];

self.surface.xAxes.add(items: SCINumericAxis())
self.surface.yAxes.add(items: SCINumericAxis())

Surface.XAxes.Add(new SCINumericAxis());
Surface.YAxes.Add(new SCINumericAxis());

Empty SCIChartSurface

Adding Series to the Chart

Now, we would like to see something more than just empty grid, e.g. Some Scatter Chart or a Line Chart. To draw some data in chart we need to create 3D DataSeries and RenderableSeries.

The DataSeries is a class which is responsible for storing data which should be displayed. For more information about the DataSeries types available in SciChart - refer to the DataSeries Types article.

The RenderableSeries on the other hand are the special classes in SciChart, that determines how data should be visualized by chart. You can find more information about RenderableSeries in the 2D Chart Types.

In this tutorial, we are going to add a Line and a Scatter series onto the chart. First, let’s declare the DataSeries for both and generate some data for them below:

SCIXyDataSeries *lineDataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Int yType:SCIDataType_Double];
SCIXyDataSeries *scatterDataSeries = [[SCIXyDataSeries alloc] initWithXType:SCIDataType_Int yType:SCIDataType_Double];
for (int i = 0; i < 200; i++) {
[lineDataSeries appendX:@(i) y:@(sin(i * 0.1))];
[scatterDataSeries appendX:@(i) y:@(cos(i * 0.1))];
}

let lineDataSeries = SCIXyDataSeries(xType: .int, yType: .double)
let scatterDataSeries = SCIXyDataSeries(xType: .int, yType: .double)
for i in 0 ..< 200 {
lineDataSeries.append(x: i, y: sin(Double(i) * 0.1))
scatterDataSeries.append(x: i, y: cos(Double(i) * 0.1))
}

var lineDataSeries = new XyDataSeries<int, double>();
var scatterDataSeries = new XyDataSeries<int, double>();
for (int i = 0; i < 200; i++)
{
lineDataSeries.Append(i, Math.Sin(i * 0.1));
scatterDataSeries.Append(i, Math.Cos(i * 0.1));
}

The next step is to create Line and Scatter RenderableSeries and provide previously created DataSeries to it. Please note, that Scatter Series requires a PointMarker to be drawn.

SCIFastLineRenderableSeries *lineSeries = [SCIFastLineRenderableSeries new];
lineSeries.dataSeries = lineDataSeries;
SCIEllipsePointMarker *pointMarker = [SCIEllipsePointMarker new];
pointMarker.fillStyle = [[SCISolidBrushStyle alloc] initWithColorCode:0xFF32CD32];
pointMarker.size = CGSizeMake(10, 10);
SCIXyScatterRenderableSeries *scatterSeries = [SCIXyScatterRenderableSeries new];
scatterSeries.dataSeries = scatterDataSeries;
scatterSeries.pointMarker = pointMarker;

let lineSeries = SCIFastLineRenderableSeries()
lineSeries.dataSeries = lineDataSeries
let pointMarker = SCIEllipsePointMarker()
pointMarker.fillStyle = SCISolidBrushStyle(colorCode: 0xFF32CD32)
pointMarker.size = CGSize(width: 10, height: 10)
let scatterSeries = SCIXyScatterRenderableSeries()
scatterSeries.dataSeries = scatterDataSeries
scatterSeries.pointMarker = pointMarker

var lineSeries = new SCIFastLineRenderableSeries { DataSeries = lineDataSeries };
var scatterSeries = new SCIXyScatterRenderableSeries
{
DataSeries = scatterDataSeries,
PointMarker = new SCIEllipsePointMarker { FillStyle = new SCISolidBrushStyle(0xFF32CD32), Size = new CGSize(10, 10) }
};

Finally, we need to add newly created series into the ISCIChartSurface.renderableSeries collection, like so:

[SCIUpdateSuspender usingWithSuspendable:self.surface withBlock:^{
[self.surface.xAxes add:xAxis];
[self.surface.yAxes add:yAxis];
[self.surface.renderableSeries addAll:lineSeries, scatterSeries, nil];
}];

SCIUpdateSuspender.usingWith(self.surface) {
self.surface.xAxes.add(items: SCINumericAxis())
self.surface.yAxes.add(items: SCINumericAxis())
self.surface.renderableSeries.add(items: lineSeries, scatterSeries)
}

using (Surface.SuspendUpdates())
{
Surface.XAxes.Add(new SCINumericAxis());
Surface.YAxes.Add(new SCINumericAxis());
Surface.RenderableSeries.Add(lineSeries);
Surface.RenderableSeries.Add(scatterSeries);
}

Which will render the following Chart:

Simple Chart

NOTE: Please note that we’ve added axes and renderableSeries to SCIChartSurface inside +[SCIUpdateSuspender usingWithSuspendable:withBlock:] block. This allows to suspend surface instance and refresh it only one time after you finished all needed operations. That’s highly recommended technique, if you want to omit performance decrease due to triggering refreshes on every operation which could be performed in one batch.

Where to Go From Here?

You can download the final project from our GitHub Repository:

Also, you can found next tutorial from this series here - SciChart iOS Tutorial - Zooming and Panning Behavior

Of course, this is not the limit of what you can achieve with the SciChart iOS. Our documentation contains lots of useful information, some of the articles you might want to read are listed below:

Finally, start exploring. The SciChart iOS library and functionality is quite extensive. You can look into our SciChart iOS Examples Suite which are full of 2D and 3D examples, which are also available on our GitHub