Adding Data to the IGChartView at runtime (Xamarin.iOS / Objective C)

Intro

Last week a customer asked in our forums how to add data at run time to the IGChartView.  After answering the question I figured I would convert the sample over to Xamarin.

So attached is a zip file with both the Xamarin-iOS sample with the IGChartView and an Objective -C version written in XCode.

The different series in the IGChartView all have datasource helper objects which take the array of data and process it for the various series to render.  In this example we are using a IGLineSeries, so the IGCategorySeriesDataSourceHelper will be used.  This data source helper is what we would use for area charts, bar charts, column charts, and line charts. 

Basic Process

The basic process for adding more data into the chart is to add the data to the underlying data array which is feeding the datasource helper and then tell chart that data at a particular index has been modified.

<p >So in Xamarin iOS C#

// On the Tick, make a new object in the bounds.
MyDataObject newOb = this.createDataObject ();
// Since we only want to show the last twenty data points, remove the first if we have hit the threshold
if (_dataArray.Count >= 21) {
// remove the data point and tell the chart that the point of data has been removed.
_dataArray.RemoveAt (0);
_chart.RemoveItem (0, _helper);
}

// now add in our new data point and tell the chart that a new point has been added.
_dataArray.Add (newOb);
_convertedData = _dataArray.ToArray ();
_helper.Data = _convertedData;
_chart.InsertItem (_convertedData.Length - 1, _helper);

And in Objective C

// Since we only want to show the last twenty data points, remove the first if we have hit the threshold
if (_dataArray.count >= 21) {
// remove the data point and tell the chart that the point of data has been removed.
[_dataArray removeObjectAtIndex:0];
[_chart removeItemAtIndex:0 withSource:_helper];
}

// adds a new data object to our underlying data collection
[_dataArray addObject:[self createDataObject]];

// tells the chart to put a new point into the view
[_chart insertItemAtIndex:(_dataArray.count-1) withSource:_helper];

So what is the above code doing. First it's checking that we are only showing 20 data points. I wanted to show a limited window of data. I could have let it add points indefinitely but that would only clutter the layout over time and make it very difficult to read. After it removes the expired point of data, it tells the chart that the data at that point has been removed. Then it adds a new point and tells the chart a new point has been added.

So we can add and remove data easily and allow the UI to reflect those changes.

Now this next part isn't in the sample, but we can also change data in place and have the UI reflect those changes as well.  

So if we take the existing sample code and make a few modifications we will demonstrate how to update data in the chart rather then add / remove it.

First we want to change the series being used from an IGLineSeries to and IGColumnSeries.

Objective C
IGColumnSeries* lineSeries = (IGColumnSeries*)[_chart addSeriesForType:[IGColumnSeries class] usingKey:@"series1" withDataSource:_helper firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];
// adding a transitionDuration (how long an animation will run) onto the series so that when data switches it will animate the change. lineSeries.transitionDuration =0.5;

Then in the tick we change the code to modify an existing member of our data array and then inform the chart of the change.

int newValue = rand() % 10;
int indexToChange = rand() % 10;
MyDataObject* obj = [_dataArray objectAtIndex:indexToChange];
obj.value = newValue;
[_chart updateItemAtIndex:indexToChange withSource:_helper];

So I hope you liked this little demonstration on how you can update data and have those changes reflect in the IGDataChart. Hopefully I will be able to get back to my book app in the near future.

By Darrell Kress