Configuring the Color Mapper
Send Feedback

Glossary Item Box

Topic Overview


This topic provides an introductory overview of configuring the color mapper on the IGTreemapView™ control and demonstrates its configuration using a code example.

In this topic


Color mapper summary

The IGTreemapNodeColorMapper uses auto calculated or manually set minimum and maximum values to map the from and to brush color range across the tree map leaf nodes based on their propertyPath value.

Illustrated below is the IGTreemapView using the color mapper.

Color Mapping on the IGTreemapView – Code Example


The following code creates a color mapper with the minimum and maximum value range of 0 to 1000 and maps out varied green hues based on the propertyPath value.


This code example requires the inclusion of the Chart framework, detail about how to add this framework can be found in the Adding the Chart Framework File topic.


In C#:

IGTreemapView treemapView = new IGTreemapView();
//Configure the tree map
IGTreemapNodeColorMapper colorMapper = new IGTreemapNodeColorMapper ();
colorMapper.Minimum = 0;
colorMapper.Maximum = 1000;
colorMapper.From = new IGBrush (0.5f, 0.75f, 0.5f, 1.0f);
colorMapper.To = new IGBrush (0.85f, 1.0f, 0.85f, 1.0f);
colorMapper.PropertyPath = @"Value";
treemapView.ColorMapper = colorMapper;

In Objective-C:

IGTreemapView *treemapView = [[IGTreemapView alloc] init];
//Configure the tree map
IGTreemapNodeColorMapper *colorMapper = [[IGTreemapNodeColorMapper alloc] init];
colorMapper.minimum = 0;
colorMapper.maximum = 1000;
colorMapper.from = [[IGBrush alloc] initWithR:0.5 andG:0.75 andB:0.5 andA:1.0]; = [[IGBrush alloc] initWithR:0.85 andG:1.0 andB:0.85 andA:1.0];
colorMapper.propertyPath = @"value";
treemapView.colorMapper = colorMapper;

Code: Complete Listing

In C#:

public class TreemapData : NSObject
      public float Value { get; set; }
      public string Label { get; set; }
      public NSMutableArray Children { get; set; }
public partial class TreemapColorMapper_CSViewController : UIViewController
      IGTreemapView _treemapView;
      NSMutableArray _data;
      IGTreemapViewDataSourceHelper _treemapViewDataSourceHelper;
      IGTreemapNodeColorMapper _colorMapper;
      public TreemapColorMapper_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 = "Color Mapper";
            _colorMapper = new IGTreemapNodeColorMapper ();
            _colorMapper.Minimum = 0;
            _colorMapper.Maximum = 1000;
            _colorMapper.From = new IGBrush (0.5f, 0.75f, 0.5f, 1.0f);
            _colorMapper.To = new IGBrush (0.85f, 1.0f, 0.85f, 1.0f);
            _colorMapper.PropertyPath = @"Value";
            _treemapView.ColorMapper = _colorMapper;
      void createData()
            for (int j = 0; j < 100; j++)
                  TreemapData dataItem = new TreemapData();
                  dataItem.Value = new Random(j).Next(1000);
                  dataItem.Label = String.Format ("{0}{1}{2}", 
                                                  Convert.ToChar(new Random (j).Next (26) + 65),
                                                  Convert.ToChar(new Random (j+1).Next (26) + 65),
                                                  Convert.ToChar(new Random (j+2).Next (26) + 65));
                  _data.Add (dataItem);

In Objective-C:

@interface TreemapData : NSObject
@property (nonatomic) CGFloat value;
@property (nonatomic, copy) NSString *label;
@property (nonatomic, retain) NSMutableArray *children;
@implementation TreemapData
@interface igViewController ()
    IGTreemapView *_treemapView;
    NSMutableArray *_data;
    IGTreemapViewDataSourceHelper *_treemapViewDataSourceHelper;
    IGTreemapNodeColorMapper *_colorMapper;
@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 = @"Color Mapper";
    _colorMapper = [[IGTreemapNodeColorMapper alloc] init];
    _colorMapper.minimum = 0;
    _colorMapper.maximum = 1000;
    _colorMapper.from = [[IGBrush alloc] initWithR:0.5 andG:0.75 andB:0.5 andA:1.0]; = [[IGBrush alloc] initWithR:0.85 andG:1.0 andB:0.85 andA:1.0];
    _colorMapper.propertyPath = @"value";
    _treemapView.colorMapper = _colorMapper;
    for (int j = 0; j < 100; j++)
        TreemapData *dataItem = [[TreemapData alloc] init];
        dataItem.value = arc4random_uniform(1000);
        dataItem.label = [NSString stringWithFormat:@"%c%c%c",
        [_data addObject:dataItem];

Related Content


The following topic provides additional information related to this topic.



The topics in this group cover enabling, configuring, and using the IGTreemapView control’s supported features.