Custom IGChartView Labelling (Objective - C / Xamarin.iOS)

Darrell Kress / Thursday, April 03, 2014

Why are we here?

When showing data in the IGChartView, a common question is how can one format the data for the axis labels.  So I threw together a little sample on how to use the IGChartViewDelegate

-(NSString)chartView:labelForAxis:withItem method and change our axis labels.

The Delegate

The code to set up the delegate is pretty simple. We simply define a new object* that will contain our delegate methods and implement one of the methods.

@interface MyCustomChartDelegate : NSObject
  -(NSString *)chartView:(IGChartView *)chartView labelForAxis:(IGAxis *)axis withItem:(NSObject *)item
  // We need to filter out that we are looking at the Y-axis. I know in this case that my Y axis has
  // a key value of "y".
  if([axis.key isEqualToString:@"y"])
    NSNumber* num = ((NSNumber*) item);
    NSNumberFormatter* formatter = [[NSNumberFormatter alloc]init];
    NSString* longString = [formatter stringFromNumber:num];

    // I want to make any number > 1000 into a "k" denomination, so if the string is 4 or more characters then clip it, add a k and return.

    if (longString.length > 3)
      NSString* subString = [longString substringToIndex:(longString.length-3)];
      subString = [NSString stringWithFormat:@"%@%@",subString,@"K"];
      return subString;

    return longString;

  // Since we are overriding this method we also need to handle the X - axis labels. Since
  // IGLineSeries is a CategorySeries and the x - axis is the category axis in this case, we can
  // cast the item to a IGDataPoint and return the label.
  //IGDataPoint* pt = (IGDataPoint*)item;
  //return pt.label;

  // But just doing that isn't any fun. So instead lets get the underlying data object and make a better label.

  IGDataPoint* pt = (IGDataPoint*)item;

  IGColumnSeries* colSeries = (IGColumnSeries*)chartView.series[0];

  MyDataClass* dataObj = (MyDataClass*)[colSeries.dataSource objectForDataPoint:pt inSeries:colSeries];
  NSString* firstInitial = [dataObj.firstName substringToIndex:1];

  return [NSString stringWithFormat:@"%@. %@", firstInitial, dataObj.lastName];

Now for our delegate we chose to format both the X and Y axis values. On the X axis, instead of just using a single field off the data object to provide the label, we combine two fields. In this case we strip out the first initial of one of the employees and make a better identifying name for the Category. For the Y axis, we convert longer number strings to a more compact format.

A side by side comparison of how the chart would look 

That's about it.  I attached the sample projects in Obj-C and Xamarin.iOS so please download it and check out how the delegate is being used.  As this is using the NucliOS IGChartView if you need trial that can be downloaded here : Infragistics NucliOS Trial.

IGChartViewDelegate Sample Code (Objective C)

IGChartViewDelegate Sample Code (Xamarin.iOS) - Added 10 July 2014.

If you have a request for a feature in our frameworks, please let us know and we will see what can be done. 

Questions about a feature?  Hit us on the NucliOS Forums.

And if you have a request for a how to article for the NucliOS product you can tweet it to the @Infragistics feed or myself @DarrellKress17 and we will see if we can write that up for you.


By Darrell Kress