IGChartView : Custom Data Styling (ObjectiveC / Xamarin.iOS - Monotouch)

Introduction

NucliOS 2014 v 1 introduces the ability to style individual parts of Category Series based charts. Now when certain datapoint needs to be brought to attention, you can change it's appearance dynamically.

So how does this work, well for the impatient you can hop down to the bottom and download a demo project in both Objective C or Xamarin.iOS.   And of course you will need the latest NucliOS Trial Download if you aren't already a subscriber.

Example Code

So the first thing we will need to do is to set up an IGChartViewDelegate in order to handle delegate method. In Objective C we could just add the delegate declaration to the hosting view controller but for this example I declared a class that would implement the delegate for me

Objective - C

.h
@interface MyChartViewDelegate : NSObject
@end

Xamarin.iOS - C#

public class MyChartViewDelegate : IGChartViewDelegate

Once we have the declarations out of the way, we override/implement the method that will be called by the chart each time rendering is done.

Objective - C

-(void)chartSeriesRenderHighlight:(IGChartView *)chartView forSeries:(IGSeries *)series withArgs:(IGAssigningCategoryStyleEventArgs *)args
{
  // this is extra for this sample, but since we can have more than one series in a chart, we should
   // filter our actions for the correct series.
   if ([series.key isEqualToString:@"a"])
  {
     // so this delegate method gets passed in information about the     rendering. For this sample
    // we know we are getting 10 data points so from the start index we will change the alpha level
    int i = args.startIndex;

    // once we figure out what the new color will be, we set the brush that will be used for the data item.
    args.fill = [[IGBrush alloc]initWithR:0 andG:1 andB:1 andA: (i+1)/12.0];


// ok the above code is pretty simple and just uses the index of the item as the only data. But by using the index we can find the underlying data object by looking through the data series. So if we need the actual data series object we can get that.

MyFakeData* fakeData = (MyFakeData*) [series.dataSource objectAtIndex:i];

  if (fakeData.nonCompleteData)
  {
    args.stroke = [[IGBrush alloc] initWithColor: [UIColor redColor]];
  }
 }
}

Xamarin.iOS

public override void RenderHighlight (IGChartView chartView, IGSeries series, IGAssigningCategoryStyleEventArgs args)
{
if (series.Key == "a") {

// so this delegate method gets passed in information about the rendering. For this sample
// we know we are getting 10 data points so from the start index we will change the alpha level
int i = args.StartIndex;

// once we figure out what the new color will be, we set the brush that will be used for the data item.
float percent = .9f - (((float)args.StartIndex/10f) * .4f);
args.Fill = new IGBrush( 136f/255f ,46f/255f ,75f/255f , percent);

// ok the above code is pretty simple and just uses the index of the item as the only data. But by using
the index we can find the underlying data object by looking through the data series. So if we need the actual data series object we can
get that.

MyFakeData fakeData = (MyFakeData) ((IGCategorySeriesDataSourceHelper) series.DataSource).Data[i] ;

if (fakeData.NonCompleteData)
{
args.Stroke = new IGBrush(52f/255f,179f/255f, 222f/255f,1f );
args.StrokeThickness = 4.0f;
}
}
}

So now that the delegate is set up, we should be done right? Well no, there is one more step. We need tell the series that we want to use the delegate method. This type of styling can be expensive, so we made it opt in rather than opt out. So when we make our series in the ViewController we also have to set a property on the series to hook it up.

Objective - C
// In order for the delegate to use it's method, we need to turn it on for the series. Otherwise
// the series will display it's default colors.
columnSeries.isCustomCategoryStyleAllowed = YES;
Xamarin.iOS
// In order for the delegate to use it's method, we need to turn it on for the series. Otherwise
// the series will display it's default colors.
columnSeries.IsCustomCategoryStyleAllowed = true;

And that's about it. This is what our output would be

Anyway as promised you can download the source code for this sample below :

IGChartView Series Styling Example - Objective C

IGChartView Series Styling Example - Xamarin.iOS

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