Rendering FusionCharts with Microsoft Xamarin

FusionCharts Suite XT has always provided better charting solutions to ease the process of data visualization. Our team frequently comes up with new ways to implement FusionCharts according to your usage requirements, like in this tutorial.

This tutorial showcases how you can render charts using Fusioncharts in Microsoft Xamarin.

Xamarin is a platform to write native Android, iOS and Windows apps with native user interfaces. These codes can be shared across multiple platforms. The Xamarin platform also supports development of mobile applications for the above mentioned platforms, based on the .NET framework.

In March 2016, Microsoft acquired Xamarin with the goal of bringing cross platform mobile development to the wider Microsoft developer community. Xamarin Forms is now available to all Visual Studio users for free.

Let’s now get started with the requirements and the steps to render charts using FusionCharts in Microsoft Xamarin.

Core Requirements for Setup

Before we start with creating and rendering FusionCharts using the Xamarin platform, we need to make sure that we have the following components downloaded on our local machine:

Creating the WebView App Project

We’ll create a simple chart that showcases the monthly revenue for Harry’s SuperMart for a period of one year. Following are the steps to be followed for creating a column 2D chart using the Xamarin platform:

Step 1: Create a new project.
Click File -> New. The File menu renders.
Select Project

The image below outlines the steps:


Step 2: Select Android under the installed template within Visual C# and select WebView App(Android). Refer to the image below:


Step 3: Give a name to the project (FusionCharts in our case) and save it to the desired location in your system.

Step 4: From the View menu, open Solution Explorer and locate the assets folder.

Step 5: Insert the fusioncharts.js and fusioncharts.charts.js files within the Assets folder. Refer to the image below:


Step 6: Search for the RazorView.cshtml file in Views folder, which is a view component and will be used for rendering the chart within the WebView component.

Step 7: In RazorView.cshtml file create a label and a button within a <div> tag. Place it in the <form> tag as shown below:

Step 8: Include the fusioncharts.js and fusioncharts.charts.js libraries within <head> tag of RazorView.cshtml.

Step 9: Declare a JavaScript function, getChart(), and define the entire FusionCharts JSON code (chart data) there.

Step 10: In MainActivity.cs file create a WebView object instance. Set the JavaScript.Enabled property to true for WebView settings, as shown below:

Step 11: Render the view that has been generated from RazorView. This can be done by including the following code in MainActivity.cs:

Step 12: Load the rendered HTML into the view with a base URL that points to the root of the bundled Assets folder, as shown in the code below:

Step 13: Define the subclass of the WebViewClient to render the view generated from RazorView.cshtml as shown below:

Step 14: Save the application and run the project using the Android_Accelerated_x86 6.0 emulator. Now, you are ready to run the application created. While you are in emulator, press ctrl + f5. to run and start the FusionCharts app as shown in image below:


Viewing the Chart

We are all set to render the chart now!
All you need to do is click the Chart button, you should be able to see your output.
The output should look as shown in the image below:


Leave a Comment