Area Series
Send Feedback

Glossary Item Box

Topic Overview

Purpose

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

In this topic


Introduction

Area series summary

The Area series, a member of the Category Series group, uses a collection of points, connected by a line segment with the area beneath the line shaded when rendered. Values are plotted along the y-axis (IGNumericYAxis) and categories are plotted along the x-axis (IGCategoryXAxis or IGCategoryDateTimeXAxis). Multiple series can be plotted in one chart view.

Area series is typically used to emphasize one of the following things:

  • Amount of change over time
  • Comparison of multiple items
  • Relationship of parts to the whole (achieved by displaying the total of the plotted values)

The area series is very similar to the spline area series, with the noted exception that the lines connecting data points do not have spline interpolation or smoothing, thus providing a more precise rendering of the data.

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.

The following is a list of data requirements for the area series type:

  • Required – the data model must contain at least one numeric data field. Two or more data points are recommended since a line segment consists of two or more points; by definition.
  • Optional – the data model may contain a string or NSDate field for labels.

Adding an Area Series to IGChartView – Code Example

Description

The following code uses the IGCategorySeriesDataSourceHelper to supply randomly generated data to an area series that gets added to the IGChartView instance, and then the IGChartView is added as a sub-view of the current UIView.

Prerequisites

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.

Code

In Objective-C:

    NSMutableArray data = [[NSMutableArray alloc] init];
    for (int i = 0; i < 25; i++)
    {
        double value = arc4random() % 100;
        [data addObject:[[NSNumber alloc] initWithDouble:value]];
    }
    
    IGCategorySeriesDataSourceHelper *source = [[IGCategorySeriesDataSourceHelper alloc] init];
    source.values = data;
    
    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    [infraChart setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];
    
    IGCategoryXAxis *xAxis = [[IGCategoryXAxis alloc] initWithKey:@"xAxis"];
    IGNumericYAxis *yAxis = [[IGNumericYAxis alloc] initWithKey:@"yAxis"];
    [infraChart addAxis:xAxis];
    [infraChart addAxis:yAxis];
    
    IGAreaSeries *areaSeries = [[IGAreaSeries alloc] initWithKey:@"areaSeries"];
    areaSeries.xAxis = xAxis;
    areaSeries.yAxis = yAxis;
    areaSeries.dataSource = source;
    
    [infraChart addSeries:areaSeries];
    [self.view addSubview:infraChart];

In C#:

public override void ViewDidLoad ()
{
base.ViewDidLoad ();

List<NSObject> data = new List<NSObject>();
Random r = new Random();
for(int i = 0;i <25; i++)
{
double val = r.Next() % 100;
data.Add(new NSNumber(val));
}

IGCategoryDateSeriesDataSourceHelper source = new IGCategoryDateSeriesDataSourceHelper();
source.Values = data.ToArray();


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

this.View.AddSubview(chart);

IGCategoryXAxis xAxis = new IGCategoryXAxis("xAxis");
IGNumericYAxis yAxis = new IGNumericYAxis("yAxis");
chart.AddAxis(xAxis);
chart.AddAxis(yAxis);


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

chart.AddSeries(columnSeries);


}


Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

This is a group of topics explaining the various types of Category series supported by the IGChartView control.