Configuring Custom Highlighting
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides a brief overview of custom highlighting on the IGChartView™ control and demonstrates their use with a code example.

In this topic


Introduction

Custom highlighting summary

Custom highlighting allows for style customization of category series data points and markers displayed on the IGChartView. To use this functionality, adopt the IGChartViewDelegate protocol and override any of the following methods.

  • - (void)chartSeriesRenderHighlight:(IGChartView *)chartView forSeries:(IGSeries *)series withArgs:(IGAssigningCategoryStyleEventArgs *)args
  • - (void)chartSeriesRenderMarkerHighlight:(IGChartView *)chartView forSeries:(IGSeries *)series withArgs:(IGAssigningCategoryMarkerStyleEventArgs *)args
Note: Stacked series chart types are not currently supported for this style customization.

When the series renders to the chart and calls these delegate methods it passes in an argument class object containing properties for fill, stroke, opacity and point index information for querying the associated data source item.

Note: When your chart displays lots of data points, data points can become condensed and a single data point can represent several points. The argument class object passed to these delegate methods contains properties for startIndex and endIndex.

Setting the isCustomCategoryMarkerStyleAllowed or isCustomCategoryStyleAllowed property, located on the participating series, to YES enable this functionality; however, this could seriously affect chart performance.


Customizing Column Series Points – Code Example

Description

The code example below creates an instance of the IGChartView containing an IGColumnSeries with 10 points of custom coloring.

Preview

Prerequisites

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

Code

In Objective-C:

@interface igViewController () <IGChartViewDelegate>
{
    NSMutableArray *_values;
    IGChartView *_chart;
    IGCategorySeriesDataSourceHelper *_source;
    IGColumnSeries *_series;
}
@end
@implementation igViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self generateData:10];
    _source = [[IGCategorySeriesDataSourceHelper alloc] initWithValues:_values];
    _chart = [[IGChartView alloc] initWithFrame:CGRectInset(self.view.bounds, 10, 10)];
    _chart.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
    _chart.delegate = self;
    [self.view addSubview:_chart];
    _series = (IGColumnSeries *)[_chart addSeriesForType:[IGColumnSeries class] usingKey:@"series" withDataSource:_source firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];
    _series.xAxis.majorStrokeThickness = 0;
    _series.isCustomCategoryStyleAllowed = YES;
}
- (void)generateData:(NSInteger)totalItems
{
    _values = [[NSMutableArray alloc] init];
    for (int i = 0; i < totalItems; i++)
    {
        [_values addObject:[[NSNumber alloc] initWithDouble:arc4random_uniform(100)]];
    }
}
- (void)chartSeriesRenderHighlight:(IGChartView *)chartView forSeries:(IGSeries *)series withArgs:(IGAssigningCategoryStyleEventArgs *)args
{
    CGFloat redColor = arc4random_uniform(255)/255.0;
    CGFloat greenColor = arc4random_uniform(255)/255.0;
    CGFloat blueColor = arc4random_uniform(255)/255.0;
    args.fill = [[IGBrush alloc] initWithR:redColor andG:greenColor andB:blueColor andA:1.0];
    args.stroke = [[IGBrush alloc] initWithColor:[UIColor blackColor]];
}
@end

In C#:

public class ChartDelegate : IGChartViewDelegate
{
      public override void RenderHighlight (IGChartView chartView, IGSeries series, IGAssigningCategoryStyleEventArgs args)
      {
            float redColor = new Random (DateTime.Now.Millisecond).Next(255)/255.0f;
            float greenColor = new Random (2 * DateTime.Now.Millisecond).Next(255)/255.0f;
            float blueColor = new Random (3 * DateTime.Now.Millisecond).Next(255)/255.0f;
            args.Fill = new IGBrush (redColor, greenColor, blueColor, 1.0f);
            args.Stroke = new IGBrush (UIColor.Black);
      }
}
public partial class ChartCustomHighlighting_CSViewController : UIViewController
{
      List<NSObject> _values;
      IGChartView _chart;
      IGCategorySeriesDataSourceHelper _source;
      IGColumnSeries _series;
      public ChartCustomHighlighting_CSViewController ()
      {
      }
      public override void ViewDidLoad ()
      {
            base.ViewDidLoad ();
            this.View.BackgroundColor = UIColor.White;
            GenerateData (10);
            _source = new IGCategorySeriesDataSourceHelper (_values.ToArray ());
            _chart = new IGChartView ();
            RectangleF chartRect = this.View.Bounds;
            chartRect.Inflate (-10, -10);
            _chart.Frame = chartRect;
            _chart.AutoresizingMask = UIViewAutoresizing.FlexibleWidth|UIViewAutoresizing.FlexibleHeight;
            _chart.Delegate = new ChartDelegate();
            this.View.Add (_chart);
            _series = (IGColumnSeries)_chart.AddSeries (new Class ("IGColumnSeries"), "series", _source, "xAxis", "yAxis");
            _series.XAxis.MajorStrokeThickness = 0;
            _series.IsCustomCategoryStyleAllowed = true;
      }
      public void GenerateData(int TotalItems)
      {
            _values = new List<NSObject>();
            for (int i = 0; i < TotalItems; i++)
            {
                  _values.Add (new NSNumber (new Random (i).Next (100)));
            }
      }
}

Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

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