Scatter Series
Send Feedback

Glossary Item Box

Topic Overview


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

In this topic


Scatter series summary

The scatter series is commonly used for one of two purposes. First, it shows the relationship among the items in several distinct series of data, and second, it plots data values using x and y coordinates. A scatter series draws attention to uneven data intervals or clusters. This type of series is often used to plot scientific data, and can highlight the deviation of collected data from predicted results. The scatter series can also be used to organize data chronologically (even if the data is not in chronological order).

A chart with scatter series, displays data as a collection of points, represented by an ordered pair with one term determining the position on the horizontal axis and the other term 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. If the data does not meet the minimum requirements, based on the type of series that you are using, the IGChartView will appear blank.

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

Adding a Scatter Series to the IGChartView – Code Example


The code below uses the IGScatterSeriesDataSourceHelper to supply randomly generated data to a scatter series that first gets added to the IGChartView instance, and then the IGChartView is added 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 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];
    IGScatterSeries *scatterSeries = [[IGScatterSeries alloc] initWithKey:@"scatterSeries"];
    scatterSeries.xAxis = xAxis;
    scatterSeries.yAxis = yAxis;
    scatterSeries.dataSource = source;
    [infraChart addSeries:scatterSeries];
    [self.view addSubview:infraChart];

In C#:

List<NSObject> x = new List<NSObject>();
Random r = new Random();
for(int i = 0; i <50; i++)
x.Add(new NSNumber(r.Next()% 100));

List<NSObject> y= new List<NSObject>();
for(int i = 0; i <50; i++)
y.Add(new NSNumber(r.Next()% 100));

IGScatterSeriesDataSourceHelper source = new IGScatterSeriesDataSourceHelper ();
source.XValues = x.ToArray();

source.YValues = y.ToArray();

IGChartView chart = new IGChartView(this.View.Frame);
chart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;


IGNumericXAxis xAxis = new IGNumericXAxis ("xAxis");
IGNumericYAxis yAxis = new IGNumericYAxis("yAxis");

IGScatterSeries series= new IGScatterSeries ("series");
series.XAxis = xAxis;
series.YAxis = yAxis;
series.DataSource = source;


Related Content


The following topics provide additional information related to this topic.



This topic provides a conceptual overview of the Scatter series in the IGChartView control and provides a code example showing you how to add it to the chart views.