Getting Started using NucliOS with Xamarin.iOS Part 1: IGChartView

NucliOS is Infragistics toolset that allows you to create high performance iOS applications that feature the wonderful data visualization you have come to expect from our developer tools. If you are a Xamarin.iOS developer that wants to add some flair to the data presentation in your app, we have you covered with the Xamarin.iOS bindings for NucliOS. This post will introduce you to what is required to get started with these Xamarin.iOS bindings using a simple IGChartView control.

Using IGChartView with MonoTouch

IGChartView is a data visualization control that creates a graphical representation of the user’s data. It is designed to display high amounts of data and can handle constant data updates. It supports a variety of different series types including Area, Bar, Column, etc. For this Getting Started tutorial I'll use the Area series. The finished application will look like this:

The data is populated using 100 random data points with values between 5.0 and 45.0. When the Refresh button is tapped, the data will be regenerated and the data points will smoothly animate to their new locations. Let's get started!

Step 1: Creating the project

Start by creating a Single View iPhone application by clicking on "Start new solution…" and configure the project as shown in the following screenshot:

This will set up a project that uses a single view (i.e. no navigation) which is all we need for this simple sample. A ViewController with a XIB file will be created to represent the view. In the next step we'll customize this XIB file to add the title bar and refresh button.

Step 2: Customizing the XIB interface file

We could do this next step in code, but I wanted to briefly touch on the interface builder portion of the Xamarin.iOS workflow since I feel like it is a good fit for this kind of task and keeps your code a bit cleaner. Start by double-clicking the "NUCLiOS_ChartViewController.xib" file. This will open the interface file in Xcode. Click on the gray portion of the iPhone view and in the upper right side of the IDE click on the Background color to set it to black (you may need to switch to the Attributes inspector as shown in the top of the screenshot):

After setting the background color, use the Library in the bottom right of Xcode to search for the Navigation Bar control as shown here:

Drag the Navigation Bar control to the top of the iPhone view. The result should look like this:

Click on the Navigation Bar control at the top of your view and, using the Attributes inspector, set the "Style" of the navigation bar to "Black Opaque". Double-click on the portion of the Navigation Bar that says "Title" and change the title to "NUCLiOS Chart". Using the Library panel, search for "Bar Button Item" and drag one to the right-hand side of the Navigation Bar. The result should look like this:

Click on the newly added Bar Button Item and change the "Identifier" to "Refresh" to make the button look like a traditional refresh button. Now we need to add an outlet to the view controller which will allow us to access the refresh button from code back in our MonoTouch project. Start by selecting the Assistant editor from the Editor picker at the top right of the IDE (it looks like this):

This will put Xcode into a split screen mode where the left-hand side of the screen is the interface and the right-hand side is the code related to the interface, in this case the view controller. Hold down the Ctrl key on your keyboard and left-drag from the refresh button to the code file on the right and drop when the line is below the set of curly braces. Configure the resulting popover like this and click "Connect":

This will add an outlet to the Xcode project that will be automatically picked up by the Xamarin.iOS project when it is saved. Click the interface file on the left and save the file. Then click the code file on the right and save it. Switch back to Xamarin Studio and the changes will be picked up automatically. We are ready to add our chart.

Step 3: Adding and configuring the IGChartView

The first thing we need to do is add a reference to the IGChartView.dll which is found in /Developer/Infragistics/MonoTouch on your machine. To do this, right-click on References and chose "Edit references…". Go to the .NET Assembly tab and navigate to the IGChartView.dll as shown here:

Now open the NUCLiOS_ChartViewController.cs file and add the using statement for Infragistics:

using Infragistics;

Add the following property declarations to the NUCLiOS_ChartViewController class:

public IGChartView Chart { get; set; }
public NSObject[] Data { get; set; }
public IGCategorySeriesDataSourceHelper Source { get; set; }
public int TotalItems { get; set; }
public Random NumberGenerator {	get; set; }

The Data array will hold 100 random numbers between 5.0 and 45.0 and the Source object will make that data consumable by the IGChartView. In the constructor, initialize the variables and add & call the PopulateData function to get our data set up:

public NUCLiOS_ChartViewController () : base ("NUCLiOS_ChartViewController", null)
{
	this.Data = new NSObject[100];
	this.NumberGenerator = new Random(1337);
	this.Source = new IGCategorySeriesDataSourceHelper();
	this.PopulateData(100);
}

void PopulateData (int totalItems)
{
	double previousValue = -1;
	this.TotalItems = totalItems;
	this.Data.Initialize();
	for (int i = 0; i < totalItems; i++)
	{
		double value = 0;
		if (previousValue == -1)
		{
			value = this.NumberGenerator.NextDouble() * 40.0 + 5.0;
		}
		else
		{
			value = RandomBetween(previousValue - 2.0, previousValue + 2.0);
			if (value < 5.0)
				value = 5.0;
			if (value > 40.0)
				value = 40.0;
		}
		previousValue = value;
		Data[i] = new NSNumber(value);
	}
	
	Source.Values = Data;
}

double RandomBetween(double small, double large)
{
	double difference = large - small;
	return this.NumberGenerator.NextDouble() * difference + small;
}

The PopulateData(int totalItems) method creates a set of randomized data that we will visualize using our chart. Each value is added to the _data array and once the _data array is full it is stored in the _source.Values property. Next, we will add code to the ViewDidLoad() method that is called when our view controller loads onto the screen. Underneath the call to base.ViewDidLoad(); add the following code:

this.Chart = new IGChartView(new RectangleF(20, 64, 280, 376));
this.Chart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
this.Chart.BackgroundColor = UIColor.Black;
this.Chart.Theme = IGChartDefaultThemes.IGThemeDark();

this.View.AddSubview(this.Chart);

This code creates a new chart with 20px padding around it that will stretch in both the height and width such that it will work on all sizes of iPhones in all orientations. The background is set to black and the theme is set to IGThemeDark. Next, add the following code which will set up the series that will be displayed in the chart:

var seriesType = new Class(typeof(IGAreaSeries));
var seriesName = "areaSeries";
var xAxisName = "xAxis";
var yAxisName = "yAxis";

IGAreaSeries areaSeries = 
				(IGAreaSeries)this.Chart.AddSeries(seriesType, seriesName, Source, xAxisName, yAxisName);

areaSeries.XAxis.LabelsVisible = false;
areaSeries.YAxis.Minimum = 0;
areaSeries.YAxis.Maximum = 45;
areaSeries.TransitionDuration = 1;

The first four lines set up the series type (area in this case), the name for the series, and the names for the x and y axes. The next line adds a new series to the chart that is configured using the variables we set up in the first four lines. Then, we configure the axis labels and minimums and maximums. The transition duration controls how long animations will last when switching between old and new values. These will be triggered using the refresh button. When tapped, the refresh button will generate a new set of data which the chart will switch to. Add the code for the refresh button right after the transition duration:

this.RefreshButton.Clicked += (object sender, EventArgs e) => {
	double previousValue = -1;
	for (int i = 0; i < this.TotalItems; i++)
	{
		double value = 0;
		if (previousValue == -1)
		{
			value = this.NumberGenerator.NextDouble() * 40.0 + 5.0;
		}
		else
		{
			value = RandomBetween(previousValue - 2.0, previousValue + 2.0);
			if (value < 5.0)
				value = 5.0;
			if (value > 40.0)
				value = 40.0;
		}
		previousValue = value;
		
		Data[i] = new NSNumber(value);
		Chart.ReplaceItem(i, Source);
	}
	Source.Values = Data;
};

This code hooks up the Clicked event for the RefreshButton which will replace each element in the Data array with a new random value and then updates the Source that the chart is displaying. The chart will then animate to the new values. At this point the application should be complete so build and run it!

Summary

You can download the solution here: NUCLiOS-Chart-Simple.zip

I hope this code has helped you get up and running with the NucliOS IGChartView control in Xamarin Studio.

Contact

If you have any questions or comments please feel free to email me at bschooley@infragistics.com or find me on Twitter @brentschooley.