Adding the Funnel Chart to a View
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic uses a code example to demonstrate how to create and display a basic instance of the IGFunnelChartView™ control on a view.

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


Displaying an IGFunnelChartView – Code Example

Description

This code example demonstrates how to create a funnel chart consisting of five slices using a custom data object.

Preview

Code

To start, you will first need to create the data object to feed the funnel chart’s data source helper. This object contains a double value property and an NSString property for the innerLabel and outerLabel.

In Objective-C:

@interface FunnelData : NSObject
@property (nonatomic, assign) double value;
@property (nonatomic, retain) NSString *innerLabel;
@property (nonatomic, retain) NSString *outerLabel;
@end
@implementation FunnelData
@end

In C#:

public class FunnelData : NSObject
{
      [Export("Value")]
      public double Value { get; set; }
      [Export("InnerLabel")]
      public string InnerLabel { get; set; }
      [Export("OuterLabel")]
      public string OuterLabel { get; set; }
}

With the custom funnel data object complete, create a method to populate an array with our custom object.

In Objective-C:

-(NSMutableArray *)createFunnelData:(int)itemCount
{
    NSMutableArray *retValue = [[NSMutableArray alloc] init];
    for (int i = 0; i < itemCount; i++)
    {
        FunnelData *funnelData = [[FunnelData alloc] init];
        funnelData.innerLabel = [NSString stringWithFormat:@"Slice %d", i];
        funnelData.outerLabel = [NSString stringWithFormat:@"Slice %d", i];
        [retValue addObject:funnelData];
    }
    return retValue;
}

In C#:

public List<NSObject> CreateFunnelData(int itemCount)
{
      List<NSObject> retValue = new List<NSObject>();
      for (int i = 0; i < itemCount; i++)
      {
            FunnelData funnelData = new FunnelData();
            funnelData.InnerLabel = String.Format ("Slice {0}", i);
            funnelData.OuterLabel = String.Format ("Slice {0}", i);
            retValue.Add (funnelData);
      }
      return retValue;
}

Next, override the viewDidLoad method and set the view controller’s background color to white.

In Objective-C:

self.view.backgroundColor = [UIColor whiteColor];

In C#:

this.View.BackgroundColor = UIColor.White;

Next, assign the data created from the createFunnelData method to the IGFunnelChartViewDataSourceHelper instance.

In Objective-C:

NSMutableArray *data = [self createFunnelData:5];
IGFunnelChartViewDataSourceHelper *source = [[IGFunnelChartViewDataSourceHelper alloc] initWithData:data valuePath:@"value" innerLabelPath:@"innerLabel" outerLabelPath:@"outerLabel"];

In C#:

List<NSObject> data = CreateFunnelData (5);
IGFunnelChartViewDataSourceHelper source = new IGFunnelChartViewDataSourceHelper (data.ToArray(), "Value", "InnerLabel", "OuterLabel");

Now, instantiate the funnel chart, using the IGFunnelChartViewDataSourceHelper with the dataSource property, to display our data.

In Objective-C:

IGFunnelChartView *funnel = [[IGFunnelChartView alloc] init];
funnel.frame = CGRectInset(self.view.bounds, 10, 10);
funnel.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
funnel.dataSource = source;
funnel.theme = [[IGFunnelChartIGTheme alloc] init];

In C#:

IGFunnelChartView funnel = new IGFunnelChartView();
funnel.Frame = this.View.Bounds;
funnel.Frame.Inflate(-10.0f, -10.0f);
funnel.AutoresizingMask = UIViewAutoresizing.FlexibleWidth|UIViewAutoresizing.FlexibleHeight;
funnel.DataSource = source;
funnel.Theme = new IGFunnelChartIGTheme();

Finally, add the funnel chart to the view.

In Objective-C:

 [self.view addSubview:funnel];

In C#:

this.View.Add(funnel);

Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

This topic provides a conceptual overview of the IGFunnelChartView control and its key features.