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.

What is 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. Also, the Xamarin platform supports the 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. Do you want some good news? 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 year. Let’s follow these steps to create 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: xamarin_project

Step 2

Select Android under the installed template within Visual C# and select WebView App(Android). Please refer to the image below: xamarin

Step 3

Next, 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. Please see the image below: xamarin_folder_structure

Step 6

Search for the RazorView.cshtml file in the Views folder, which is a view component. Also, it 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:
<html>

<body>
    <div data-role="page" data-theme="b">
        <form>

            <div data-role="content">

                <h1 id="label">@Medel.Text</h1>
                <input type="button" name="chart" value="Chart" onclick="getChart()" />

            </div>

        </form>
    </div>
</body>

</html>

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:
var webView = FindViewById<WebView>(Resource.Id.webView);
webView.Settings.JavaScript.Enabled = true;

Step 11

Render the view that has been generated from RazorView. This can be done by including the following code in MainActivity.cs:
var model = new Model1() { Text = "Please click chart button to render chart..." };
var template = new RazorView() { Model = model };
var page = template.GenerateString();

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:
webView.LoadDataWithBaseURL("file:///android_asset", page, "text/html", "UTF-8", null);

Step 13

Define the subclass of the WebViewClient to render the view generated from RazorView.cshtml as shown below:
private class HybridWebViewClient: WebViewClient {
    public override bool ShouldOverrideUrlLoading(WebView webView, string url) {
        // If the URL is not our own custom scheme, just let the webView load the URL as usual
        var scheme = "hybrid:";

        if (!url.StartWith(scheme))
            return false;
        // This handler will treat everything between the protocol and "?" as the method name. The querystring has all f the parameters.

        var resources = url.Substring(scheme.Length).Split('?');
        var method = resources[0];
        var parameters = System.Web.HttpUtility.PparseQueryString(resources[1]);
        return true;
    }
}

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 the emulator, press ctrl + f5. to run and start the FusionCharts app as shown in the image below: xamarin_fc_app

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: xamarin_output

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.