Adding the Treemap to a View
Send Feedback

Glossary Item Box

Topic Overview

Purpose

To help you get up and running with the IGTreemapView™ control this topic provides basic information about creating an instance of the control for displaying a tree map.

Required background

The following table lists the prerequisite topic 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 code example included in this topic.

Example

Description

Displaying a pie chart with IGTreemapView

The starting point to using the IGTreemapView 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 IGTreemapView instance.



Displaying a tree map with IGTreemapView – Code Example

Description

The provided data source powers the IGTreemapView data visualization. In this code example, you will:

  • Generate a data source
  • Assign your data source to the IGTreemapView, and
  • View the displayed tree map.

Preview

The following screen shot illustrates a typical IGTreemapView preview.

Code

First, create an instance of the IGTreemapView with the dimensions of the view controller’s bounds and add it to the view.

In Objective-C:

_treemapView = [[IGTreemapView alloc]initWithFrame:self.view.bounds];
_treemapView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
[self.view addSubview:_treemapView];

In C#:

_treemapView = new IGTreemapView ();
_treemapView.Frame = this.View.Bounds;
_treemapView.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
this.View.Add (_treemapView);

Instantiates an NSMutableArray that calls the createData method to fill the array.

In Objective-C:

_data = [[NSMutableArray alloc] init];
[self createData];

In C#:

_data = new NSMutableArray();
createData ();

The data source for this example uses an NSMutableArray, which creates a specific number of tree map data items that use a custom NSObject containing a float value, label string and children NSMutableArray.

In Objective-C:

-(void)createData
{
    for (int j = 0; j < 10; j++)
    {
        TreemapData *dataItem = [[TreemapData alloc] init];
        dataItem.value = arc4random_uniform(1000);
        dataItem.label = [NSString stringWithFormat:@"%c%c%c",
                        arc4random_uniform(26)+65,
                        arc4random_uniform(26)+65,
                        arc4random_uniform(26)+65];
        [_data addObject:dataItem];
    }
}

In C#:

void createData()
{
      for (int j = 0; j < 10; j++)
      {
            TreemapData dataItem = new TreemapData();
            dataItem.Value = new Random(j).Next(1000);
            dataItem.Label = String.Format ("{0}{1}{2}", 
                                           Convert.ToChar(new Random ().Next (26) + 65),
                                            Convert.ToChar(new Random ().Next (26) + 65),
                                            Convert.ToChar(new Random ().Next (26) + 65));
            _data.Add (dataItem);
      }
}

Create an instance of the IGTreemapViewDataSourceHelper using the NSMutableArray that contains our tree map data and a reference of the IGTreemapView.

In Objective-C:

_treemapViewDataSourceHelper = [[IGTreemapViewDataSourceHelper alloc]initWithData:_data treemapView:_treemapView];

In C#:

_treemapViewDataSourceHelper = new IGTreemapViewDataSourceHelper (_data, _treemapView);

Add a level to the IGTreemapViewDataSourceHelper to provide value, label, and children paths from our custom tree map data object. Although, for this example, the children path is left nil.

In Objective-C:

 [_treemapViewDataSourceHelper addLevelWithValuePath:@"value" labelPath:@"label" childSourcePath:nil];

In C#:

_treemapViewDataSourceHelper.AddLevel ("Value", "Label", String.Empty);

Finally, add the IGTreemapViewDataSourceHelper reference to the dataSource property of the IGTreemapView.

In Objective-C:

_treemapView.dataSource = _treemapViewDataSourceHelper;

In C#:

_treemapView.DataSource = _treemapViewDataSourceHelper;

Code: Complete Listing

In Objectve-C:

@interface TreemapData : NSObject
@property (nonatomic) CGFloat value;
@property (nonatomic, copy) NSString *label;
@property (nonatomic, retain) NSMutableArray *children;
@end
@implementation TreemapData
@end
@interface igViewController ()
{
    IGTreemapView *_treemapView;
    NSMutableArray *_data;
    IGTreemapViewDataSourceHelper *_treemapViewDataSourceHelper;
}
@end
@implementation igViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    _treemapView = [[IGTreemapView alloc]initWithFrame:self.view.bounds];
    _treemapView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
    [self.view addSubview:_treemapView];
    _data = [[NSMutableArray alloc] init];
    [self createData];
    _treemapViewDataSourceHelper = [[IGTreemapViewDataSourceHelper alloc]initWithData:_data treemapView:_treemapView];
    [_treemapViewDataSourceHelper addLevelWithValuePath:@"value" labelPath:@"label" childSourcePath:nil];
    _treemapView.dataSource = _treemapViewDataSourceHelper;
    _treemapView.rootNode.label = @"Getting Started";
}
-(void)createData
{
    for (int j = 0; j < 10; j++)
    {
        TreemapData *dataItem = [[TreemapData alloc] init];
        dataItem.value = arc4random_uniform(1000);
        dataItem.label = [NSString stringWithFormat:@"%c%c%c",
                        arc4random_uniform(26)+65,
                        arc4random_uniform(26)+65,
                        arc4random_uniform(26)+65];
        [_data addObject:dataItem];
    }
}
@end

In C#:

public class TreemapData : NSObject
{
      [Export("Value")]
      public float Value { get; set; }
      [Export("Label")]
      public string Label { get; set; }
      [Export("Children")]
      public NSMutableArray Children { get; set; }
}
public partial class TreemapGettingStarted_CSViewController : UIViewController
{
      IGTreemapView _treemapView;
      NSMutableArray _data;
      IGTreemapViewDataSourceHelper _treemapViewDataSourceHelper;
      public TreemapGettingStarted_CSViewController () {}
      public override void ViewDidLoad ()
      {
            base.ViewDidLoad ();
            _treemapView = new IGTreemapView ();
            _treemapView.Frame = this.View.Bounds;
            _treemapView.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
            this.View.Add (_treemapView);
            _data = new NSMutableArray();
            createData ();
            _treemapViewDataSourceHelper = new IGTreemapViewDataSourceHelper (_data, _treemapView);
            _treemapViewDataSourceHelper.AddLevel ("Value", "Label", String.Empty);
            _treemapView.DataSource = _treemapViewDataSourceHelper;
            _treemapView.RootNode.Label = "Getting Started";
      }
      void createData()
      {
            for (int j = 0; j < 10; j++)
            {
                  TreemapData dataItem = new TreemapData();
                  dataItem.Value = new Random(j).Next(1000);
                  dataItem.Label = String.Format ("{0}{1}{2}", 
                                                 Convert.ToChar(new Random ().Next (26) + 65),
                                                  Convert.ToChar(new Random ().Next (26) + 65),
                                                  Convert.ToChar(new Random ().Next (26) + 65));
                  _data.Add (dataItem);
            }
      }
}

Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

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