Adding the IGChartView to a UIView
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides basic information about creating an instance of the IGChartView™ and displaying a chart to help you get up and running with this control.

Required background

The following table lists the prerequisite topics required to understanding this topic.

Topic

Purpose

Adding the Chart Framework File

This topic explains how to add the chart framework file to a project.


In this topic


Code Examples

Code examples summary

The following table lists the code examples, included in this topic.

Example

Description

Code Example: Displaying a chart with IGChartView

The starting point for beginning to use the IGChartView is creating an instance of it and adding it to your view. The code in this example overrides the viewDidLoad method on a UIViewController to create the instance of a column series chart.



Displaying a chart with IGChartView – Code Example

Description

The IGChartView powers its data visualization by the provided data source. In this code example you will:

  • Generate a data source
  • Assign your data source to the IGChartView
  • View the displayed column series chart.

Preview

The following screen shot illustrates how IGChartView renders the result’s preview.

Code

The data source for this example uses an NSMutableArray that contains 25 random numbers. Used to handle the data array, the IGCategorySeriesDataSourceHelper simplifies creating an IGChartView.

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;

In C#:

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();

With the generated data assigned to the data source helper, the IGChartView can be instantiated.

In Objective-C:

    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    [infraChart setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];

In C#:

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

Axes can generally be categorized as either category or numeric. Category axes display string labels that describe data points. Numeric axes display numbers. For this code example, the x axis consists of string labels while the y axis displays numbers.

In Objective-C:

    IGCategoryXAxis *xAxis = [[IGCategoryXAxis alloc] initWithKey:@"xAxis"];
    IGNumericYAxis *yAxis = [[IGNumericYAxis alloc] initWithKey:@"yAxis"];
    [infraChart addAxis:xAxis];
    [infraChart addAxis:yAxis];

In C#:

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

Using a column series chart type, references both the x and y axis on the series, sets the data source to generate an array, and adds the column series to the IGChartView.

In Objective-C:

    IGColumnSeries *columnSeries = [[IGColumnSeries alloc] initWithKey:@"columnSeries"];
    columnSeries.xAxis = xAxis;
    columnSeries.yAxis = yAxis;
    columnSeries.dataSource = source;
    [infraChart addSeries:columnSeries];

In C#:

   IGColumnSeries columnSeries = new IGColumnSeries("columnSeries");
   columnSeries.XAxis = xAxis;
   columnSeries.YAxis = yAxis;
   columnSeries.DataSource = source;
   chart.AddSeries(columnSeries);

The IGChartView is now configured and ready to be added on to our UIViewController as a subview.

In Objective-C:

    [self.view addSubview:infraChart];

In C#:

     this.View.AddSubview(chart);

Code: Complete Listing

In Objective-C:

- (void)viewDidLoad
{
    [super viewDidLoad];
    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];
    
    IGColumnSeries *columnSeries = [[IGColumnSeries alloc] initWithKey:@"columnSeries"];
    columnSeries.xAxis = xAxis;
    columnSeries.yAxis = yAxis;
    columnSeries.dataSource = source;
    
    [infraChart addSeries:columnSeries];
    [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;

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

   IGColumnSeries columnSeries = new IGColumnSeries("columnSeries");
   columnSeries.XAxis = xAxis;
   columnSeries.YAxis = yAxis;
   columnSeries.DataSource = source;
   chart.AddSeries(columnSeries);

   this.View.AddSubview(chart);

}


Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

This section serves as an introduction to the IGChartView’s key features and functions.

This topic explains how to add the chart framework file to a project.