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 MonoTouch developer that wants to add some flair to the data presentation in your app, we have you covered with the MonoTouch bindings for NUCLiOS. In the current release these bindings are in Beta form. What this means to you is that the API is a direct translation of our Objective-C API and has not been modified to make it look more like a C# API. We wanted to make sure we had some form of MonoTouch support on day 1 and this was the best way to make this possible. In the future, we will update the bindings to bring them more in line with the rest of the MonoTouch experience. In the meantime, let me show you how to get started using NUCLiOS with the MonoTouch bindings.
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 MonoTouch 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 MonoTouch 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 MonoDevelop 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 variable declarations to the NUCLiOS_ChartViewController class:
IGChartView _chart; NSMutableArray _data; IGCategorySeriesDataSourceHelper _source; int _totalItems = 0; Random _random;
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) { _data = new NSMutableArray(10); _random = new Random(1337); _source = new IGCategorySeriesDataSourceHelper(); PopulateData(100); } void PopulateData (int totalItems) { double previousValue = -1; _totalItems = totalItems; _data.RemoveAllObjects(); for (int i = 0; i < totalItems; i++) { double value = 0; if (previousValue == -1) { value = _random.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.Add(new NSNumber(value)); } _source.Values = _data; } double RandomBetween(double small, double large) { double difference = large - small; return _random.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:
_chart = new IGChartView(new RectangleF(20, 64, 280, 376)); _chart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth; _chart.BackgroundColor = UIColor.Black; _chart.Theme = IGChartDefaultThemes.IGThemeDark(); this.View.AddSubview(_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 = new NSString("areaSeries"); var xAxisName = new NSString("xAxis"); var yAxisName = new NSString("yAxis"); IGAreaSeries areaSeries = (IGAreaSeries)_chart.AddSeriesForTypeUsingKeyWithDataSourceFirstAxisKeySecondAxisKey(seriesType, // type seriesName, // key _source, // data source xAxisName, // x-axis name yAxisName); // y-axis name 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 _chart that is configured using the variables configured 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 < _totalItems; i++) { double value = 0; if (previousValue == -1) { value = _random.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.ReplaceObject(i, new NSNumber(value)); _chart.ReplaceItemAtIndexWithSource(i, _source); } };
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.zip
I hope this code has helped you get up and running with the NUCLiOS IGChartView control in MonoTouch. If you have any questions or comments please feel free to email me at bschooley@infragistics.com or find me on Twitter @brentschooley.