Stacked 100 Spline Series
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides a conceptual overview of the Stacked 100 Spline series in the IGChartView™ control and demonstrates adding it to the chart series using a code example.

In this topic


Introduction

Stacked 100 Spline series summary

Stacked 100 Spline series belongs to a group of Category Series and renders using a collection of points connected by smooth curves of spline segments that are stacked on top of each other. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative value, with positive values grouped on the positive side of the y-axis, and all negative values grouped on the negative side of the y-axis. The Stacked 100 Spline series is identical to the Stacked Spline Series in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100 Spline series presents the data in terms of percent of the sum of all values in a data point.

Data requirements

While the IGChartView control allows for easy binding to your own data model, make sure to supply the appropriate data amounts and types required by that series. Failing to do so causes the IGChartView to appear blank.

Required – The bound data model must contain at least one numeric field, for rendering Stacked 100 Spline data and may contain an optional string for labels. For optimal viewing, we recommend using a data model containing two or more numeric data fields so that each point of the Stacked 100 Spline series has two or more stacked fragments.

Data rendering rules

The Stacked 100 Spline series renders data using the following rules:

  • Every numeric column in the data model that you want rendered needs an IGStackedFragmentSeries added to the series collection property of the IGStacked100SplineSeries.
  • Each row in the data model represents a single stacked area polygon. Created based on the columns in the data model, sections map to the IGStackedFragmentSeries object’s valueProperty.
  • When rendering the second value in the row its value is added to the points of the previous values in that row. Therefore, each point going upwards on the chart is a cumulative sum of the values up to that point.
  • Category labels are derived using the mapped string field of the label property of data mapping on the x-axis. If the data mapping for label is not specified, default labels are used.
  • Category labels render on the x-axis. Data values render on the y-axis.
  • Category labels are drawn on the x-axis. Data values are drawn on the y-axis.
  • When rendering multiple series of the Stacked 100 Spline series type in layers, with each successive series rendered in front of the previous one in the series collection of the IGChartView control.

Adding a Stacked 100 Spline Series to the IGChartView – Code Example

Description

The code below uses the IGStackedSeriesDataSourceHelper to supply randomly generated data to a Stacked 100 Spline series firstly addeding to the IGChartView instance, and then adding the IGChartView as a subview of the current UIView.

Prerequisites

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

Code

In C#:

public class DataModel : NSObject
{
      [Export("Label")]
      public string Label { get; set; }
      [Export("Value1")]
      public float Value1 { get; set; }
      [Export("Value2")]
      public float Value2 { get; set; }
      [Export("Value3")]
      public float Value3 { get; set; }
}
//...
IGChartView _chartView;
IGStackedSeriesDataSourceHelper _stackedChartDataSourceHelper;
IGLegend _legend;
List<NSObject> _data;
void PopulateData()
{
      _data = new List<NSObject>();
      for (int i = 0; i < 10; i++) {
            DataModel item = new DataModel();
            item.Value1 = new Random((int)DateTime.Now.Ticks).Next(100);
            item.Value2 = new Random((int)DateTime.Now.Ticks).Next(100);
            item.Value3 = new Random((int)DateTime.Now.Ticks).Next(100);
            item.Label = string.Format ("Label {0}", i);
            _data.Add(item);
      }      
}
public override void ViewDidLoad ()
{
      this.PopulateData();
      RectangleF bounds = new RectangleF(0, 0, this.View.Frame.Size.Width, this.View.Frame.Size.Height);
      _chartView = new IGChartView(bounds);
      _chartView.BackgroundColor = UIColor.White;
      _stackedChartDataSourceHelper = new IGStackedSeriesDataSourceHelper(_data.ToArray(), NSArray.FromObjects("Value1", "Value2", "Value3"));
      _chartView.AddStackedSeries(new Class(typeof(IGStacked100SplineSeries)), "series", _stackedChartDataSourceHelper, "xAxis", "yAxis");
      (this.View).AddSubview(_chartView);
      _legend = new IGLegend(IGChartLegendType.IGChartLegendTypeSeries);
      _legend.Frame = new RectangleF(20, 20, 100, 100);
      _chartView.Legend = _legend;
      (this.View).AddSubview(_legend);
}

In Objective-C:

@interface DataModel : NSObject
@property (nonatomic, retain) NSString *label;
@property (nonatomic) float value1;
@property (nonatomic) float value2;
@property (nonatomic) float value3;
@end
@interface igViewController : UIViewController
{
    IGChartView *_chartView;
    IGStackedSeriesDataSourceHelper *_stackedChartDataSourceHelper;
    IGLegend *_legend;
    NSMutableArray *_data;
}
@end
@implementation DataModel
@synthesize value1, value2, value3;
@end
@implementation igViewController
-(void)populateData
{
    _data = [[NSMutableArray alloc]init];
    for (int i=0; i<10; i++)
    {
        DataModel *item = [[DataModel alloc]init];
        item.value1 = arc4random() % 100;
        item.value2 = arc4random() % 100;
        item.value3 = arc4random() % 100;
        item.label = [NSString stringWithFormat:@"Label %d", i];
        [_data addObject:item];
    }
}
-(void)viewDidLoad
{
    [self populateData];
    CGRect bounds = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
    _chartView = [[IGChartView alloc] initWithFrame:bounds];
    _chartView.backgroundColor = [UIColor whiteColor];
    _stackedChartDataSourceHelper = [[IGStackedSeriesDataSourceHelper alloc]initWithData:_data fields:@"value1", @"value2", @"value3", nil];
    [_chartView addStackedSeriesForType:[IGStacked100SplineSeries class] usingKey:@"series" withDataSource:_stackedChartDataSourceHelper firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];    
    [self.view addSubview:_chartView];
    _legend = [[IGLegend alloc] initWithLegendType:IGChartLegendTypeSeries];
    [_legend setFrame:CGRectMake(20, 20, 100, 100)];
    _chartView.legend = _legend;
    [self.view addSubview:_legend];
}
@end

Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

This collection of topics explains each of the individual charts supported by the IGChartView control.