How to use FlexChart in Xamarin.iOS

Xamarin.iOS and Xamarin.Android exist in a mingled area between .NET and the pure native platforms. Xamarin.iOS strikes a middle-ground between a Xamarin.Forms (a more total .NET experience) and native iOS (where you're beholden to the native language and APIs). You'll often find yourself writing C# code that interacts with Native iOS APIs which Xamarin has ported to their platform. While it's initially an odd experience if you're coming from Xamarin.Forms, it offers a lot of flexibility and power. Today, we'll take a look at using the Xuni FlexChart in Xamarin.iOS.

Xuni and Xamarin.iOS

Xamarin.iOS projects are structured similarly to native iOS projects in XCode. There are ViewControllers for each screen in your app, and a storyboard for setting up navigation between your ViewControllers. Just like on native iOS, you'll be placing all of your UI code into these ViewControllers. It's also worth pointing out that the native API's (UIKit, Foundation, etc.) are visible in these ViewControllers, and, though you're writing C# code, you need some knowledge of how the native APIs work. The Xuni controls in Xamarin.iOS are no different. Though you're writing C# code to interact with the controls, the controls themselves are very close to their native counterparts. There's generally less abstraction here between the native control and your C# code compared to Xamarin.Forms. If you're curious about that binding process we have an article that explores the topic more completely. The important detail to take away from this is that the controls tend to behave closer to their native counterparts compared to the Xamarin.Forms versions.

Getting Started

Adding Xuni to a Xamarin.iOS project is similar to Xamarin.Forms. All that you need to do is add the appropriate NuGet packages to your project. Just be sure that you add the controls that follow the naming convention Xuni.iOS..

Licensing

The licensing is similar to other platforms where you simply need to generate a key for your app on our website, place the key into your app, and assign your generated key to the XuniLicenseManager at run time. You can add the key to the FinishedLaunching method in your AppDelegate in a similar manner to native iOS:

public override bool FinishedLaunching (UIApplication application, NSDictionary launchOptions)  
{  
     XuniLicenseManager.Key = License.Key;  
     return true;  
}  

Using the Control

In most ways, using the FlexChart control in Xamarin.iOS is similar to native iOS, though it trades Objective-C for C#. The control can be instantiated inside your ViewDidLoad method just as you would on native iOS:

public override void ViewDidLoad ()  
{  
     base.ViewDidLoad ();  

     FlexChart chart = new FlexChart();  
     ...  

Setting properties is also similar to the native controls. For properties like color we'll need to use a UIColor object. Also, I can pass .NET Strings into my properties a NSStrings. These details position the control much closer to the native platform than Xamarin.Forms:

chart.Header = (NSString)"FlexChart Sales";  
chart.Footer = (NSString)"GrapeCity Xuni";  
chart.Legend.BorderWidth = 1;  
chart.Legend.BorderColor = UIColor.Gray;  

The chart's ItemsSource is also an NSMutableArray which, once again, is very similar to the native iOS control:

NSMutableArray chartData = SalesData.GetSalesDataList();  
chart.ItemsSource = chartData;  

If we wanted to do something like provide a static annotation to display some hit test data, we'll see a combination of the native and .NET approaches. Creating the annotation is very similar to the native approach:

rectAnno = new XuniChartRectangleAnnotation(chart);  
rectAnno.Attachment= XuniChartAnnotationAttachment.XuniChartAnnotationAttachmentAbsolute;  
rectAnno.Point = new XuniPoint(100, 75);  
rectAnno.Width = 100;  
rectAnno.Height = 100;  
rectAnno.Text = (NSString)"Tap the chart";  
rectAnno.TextColor = UIColor.Gray;  
rectAnno.Font = UIFont.SystemFontOfSize (10);  
rectAnno.BorderWidth = 2;  
rectAnno.BorderColor = UIColor.FromRGBA(224, 224, 224, 204);  
rectAnno.Color = UIColor.FromRGBA(119, 204, 204, 204);  
chart.Annotations.Add (rectAnno);  

Obtaining the HitTestInfo is much more like traditional .NET in that it's event based (rather than dealing with a delegate as in iOS). First, we'll set an event handler for the Tapped event:

chart.Tapped += chart_tapped;  

The actual chart_tapped method is also a little more .NET-like:

private bool chart_tapped(FlexChart sender, XuniPoint point)  
{  
bool result = false;  
XuniChartHitTestInfo hitTest = chart.HitTest(point);  
chart.PointToData (point);  
if (hitTest.DataPoint != null) {  
rectAnno.Text = "Series: " + hitTest.DataPoint.SeriesName + "\\n" + "Value: $" + Math.Round(hitTest.DataPoint.Value);  

}  
return result;  
}  

Those additions will allow you to present your hit test in a static annotation:

Wrap Up

Using Xuni in Xamarin.iOS gives you the same basic capabilities that you have natively, but allows you to keep all of your code in C#. While using Xamarin.iOS does require some knowledge of the native APIs, it provides you much more control than is otherwise available in Xamarin.Forms.

Download the Sample >>