Scatter Line Series
Send Feedback

Glossary Item Box

Topic Overview


This topic provides a conceptual overview of the Scatter Line Series in the IGChartView™ control and uses a code example to demonstrate how to add it to the chart view.

In this topic


Scatter Line series summary

The Scatter Line series is a Scatter Series where the points are sequentially connected by line segments to show either the relationship among the items in several distinct data series or to plot a line-using x and y coordinates. The data marker’s x and y coordinates are determined by two data values. A Scatter Line series draws attention to uneven intervals in data and is often used to plot scientific data; highlight the deviation of collected data from predicted results; and used to organize data chronologically.

A chart with Scatter Line series, displays data as a collection of points connected by a straight line with each connected point having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis.

Data requirements

While the IGChartView control allows easy binding to your own data model, make sure to supply the appropriate amounts and types of data required by the series. Failing to do so causes the IGChartView to appear blank.

Required – the data model must contain two numeric fields representing the x and y values for each point on the chart to render the data.

Adding a Scatter Line Series to the IGChartView – Code Example


The code below uses the IGScatterSeriesDataSourceHelper to supply randomly generated data to a Scatter Line Series by first adding to the IGChartView instance, and then adding the IGChartView as a subview of the current UIView.


This code example requires the inclusion of the IGChartView framework, detail about how to add this framework can be found in the Adding the Chart Framework File topic.


In C#:

NSMutableArray x = new NSMutableArray();
for (int i = 0; i < 50; i++) {
      x.Add(new NSNumber((new Random(DateTime.Now.Millisecond).Next() % 100)));
NSMutableArray y = new NSMutableArray();
for (int i = 0; i < 50; i++) {
      y.Add(new NSNumber((new Random(DateTime.Now.Millisecond).Next() % 100)));
IGScatterSeriesDataSourceHelper source = new IGScatterSeriesDataSourceHelper();
source.XValues = x;
source.YValues = y;
IGChartView infraChart = new IGChartView(this.View.Frame);
IGNumericXAxis xAxis = new IGNumericXAxis("xAxis");
IGNumericYAxis yAxis = new IGNumericYAxis("yAxis");
IGScatterLineSeries scatterSeries = new IGScatterLineSeries("scatterSeries");
scatterSeries.XAxis = xAxis;
scatterSeries.YAxis = yAxis;
scatterSeries.DataSource = source;

In Objective-C:

    NSMutableArray *x = [[NSMutableArray alloc] init];
    for (int i = 0; i < 50; i++) {
        [x addObject:[[NSNumber alloc] initWithDouble:(arc4random() % 100)]];
    NSMutableArray *y = [[NSMutableArray alloc] init];
    for (int i = 0; i < 50; i++) {
        [y addObject:[[NSNumber alloc] initWithDouble:(arc4random() % 100)]];
    IGScatterSeriesDataSourceHelper *source = [[IGScatterSeriesDataSourceHelper alloc] init];
    source.xValues = x;
    source.yValues = y;
    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    IGNumericXAxis *xAxis = [[IGNumericXAxis alloc] initWithKey:@"xAxis"];
    IGNumericYAxis *yAxis = [[IGNumericYAxis alloc] initWithKey:@"yAxis"];
    [infraChart addAxis:xAxis];
    [infraChart addAxis:yAxis];
    IGScatterLineSeries *scatterSeries = [[IGScatterLineSeries alloc] initWithKey:@"scatterSeries"];
    scatterSeries.xAxis = xAxis;
    scatterSeries.yAxis = yAxis;
    scatterSeries.dataSource = source;
    [infraChart addSeries:scatterSeries];
    [self.view addSubview:infraChart];

Related Content


The following topics provide additional information related to this topic.



This collection of topics explains each of the individual charts supported by the IGChartView control.