Getting Started using NucliOS IGChartView with Xamarin.iOS

Once upon a time, I wrote a post called “Getting Started using NucliOS with Xamarin.iOS Part 1: IGChartView”. It was a decent post and many people have told me they found it helpful. Unfortunately, I hosted all of the images for the post on a server that no longer exists and now the post is littered with broken images and a project download link that no longer works. That’s not very helpful so hopefully this post will fill that void. This post will help you get started with the Xamarin bindings for Infragistics NucliOS IGChartView.

<

Using IGChartView with Xamarin.iOS

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 Storyboard application by clicking on “Start new solution…” and configure the project as shown in the following screenshot:

We will customize the storyboard file that is created to utilize a Navigation Controller instead of the basic controller that we are given.

Step 2: Customizing the storyboard

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 “MainStoryboard.storyboard” file. This will open the interface file in Xcode. Select the View Controller that is initially in the storyboard. If properly selected, it should look like this:

Press Delete to remove this view controller. After deleting the view controller, use the Library in the bottom right of Xcode to search for the Navigation Controller as shown here:

Drag a Navigation Controller object onto the storyboard. The result should look like this:

Next, delete the “Root View Controller” that was created with the Navigation Controller. We will replace this with our own View Controller. Use the Library to find the View Controller object and drag one onto the storyboard next to the Navigation Controller. The result should look like this:

Now, hold down Control and drag from the Navigation Controller to the newly created View Controller. Your screen should look like this if you’re doing it right:

In the resulting popover, select “root view” under “Relationship Segue”.

Double-click on the empty middle portion of the Navigation Bar and type to change the title to “NucliOS Simple 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:

Next, select the View Controller and go to the “Identity inspector” and set the “Class” property to ChartViewController. Doing this will generate a C# class in Xamarin Studio when we switch back. If you’ve done it correctly (it should look like the image below), save the storyboard and switch over to Xamarin Studio to synchronize the changes we’ve made so far.

Once synchronized, double-click the “MainStoryboard.storyboard” file again to head back to Xcode. Click on the Bar Button Item we added (it should currently say “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 Xamarin.iOS 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. Make sure the “ChartViewController.h” file is loaded in the Assistant Editor. 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/NuCLiOS 2013 Volume 2/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 and add it by double-clicking it and then clicking “Ok”:

Now open the “ChartViewController.cs” file and add the using statement for Infragistics:

using Infragistics;
using MonoTouch.ObjCRuntime;

Add the following property declarations to the 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 ChartViewController (IntPtr handle) : base (handle)
{
    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:

// For iOS 7 we want to make sure we don't go under the Navigation Bar
this.EdgesForExtendedLayout = UIRectEdge.None;

// Set it up to fill...
this.Chart = new IGChartView (this.View.Bounds);
this.Chart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;

// Set the theme
this.Chart.Theme = IGChartDefaultThemes.IGTheme();

// Add the chart to the View Controller's View
this.View.AddSubview(this.Chart);

This code creates a new chart that fills the area underneath the Navigation Bar that will stretch in both the height and width such that it will work on all sizes of iPhones in all orientations. The chart theme is set to IGTheme. 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-Xamarin-SimpleChart.zip

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

Contact

If you want to comment or reach out to me, the best place to do that is on Twitter @brentschooley. I can also be reached via email at bschooley@infragistics.com.