Create OxyPlot pie-chart for Xamarin.Forms application

Currently, I am testing the waters of mobile development using Xamarin.Forms. For those who have not heard of it yet, as per its developer guides

“Xamarin.Forms is a cross-platform, natively backed UI toolkit abstraction that allows developers to easily create user interfaces that can be shared across Android, iOS, Windows and Windows Phone.”

It’s a great way to delve into mobile development for a C# developer. It allows to build native user interfaces for iOS, Android and Windows Phone wherein nearly 75% of the app code is shared across these platforms.

As a part of my pet project, I needed a pie-chart  and came across OxyPlot , an open source plot generation library, which was suitable for me. However, I had to overcome a number of hurdles before I could get everything working. So, this is my effort to document the steps of creating OxyPlot pie-chart for a mobile app built using Xamarin.Forms. So, here it goes!

Create the project

  1. Create a new project in Visual Studio using a blank Xamarin.Forms app template.

Update the packages and add references

  1. Update the Xamarin.Forms NuGet packages to the latest version.
  2. As per the official documentation for OxyPlot, we need to add the  Nuget package for OxyPlot.Xamarin.Forms. But according to this, as of May 24, 2016, OxyPlot has stopped pushing their packages to nuget.org. Since pre-release packages are pushed to myget.org, we need to set up a package source to get these packages. The steps are given below.
    1. Add a package source in your Visual Studio using the given configuration.

      packagesource

    2. Check the ‘Include prerelease’ checkbox to install the myget packages.

      screenshot2

  3. Install the NuGet package OxyPlot.Xamarin.Forms. Once the package has been installed successfully, you should see the following in your References folder of your platform specific project. If you using the Xamarin.Forms Portable template, you have to install the package for Portable project too.

    references

Initialize renderers

  1. Now, we need to initialize the OxyPlot renderers by adding the following code in MainActivity.cs of your platform-specific project.
    • iOS : OxyPlot.Xamarin.Forms.Platform.iOS.PlotViewRenderer.Init();
    • Android: OxyPlot.Xamarin.Forms.Platform.Android.PlotViewRenderer.Init();
    • Windows Phone: OxyPlot.Xamarin.Forms.Platform.WP8.PlotViewRenderer.Init();

    Use the following code based on the platform that you are using. The snapshot below shows the example for Android project.

    oxyplotrenderer

Create OxyPlot pie-chart in Xamarin.Forms application

The initial setup is complete. Now, we can use the OxyPlot chart controls in our application. I am using FreshMVVM in my project. For this,

  1. Create a view model with a public property “SurveyData” as shown below. This property will contain the sample data used to populate the pie-chart.

    viewmodel

  2. Create a custom value converter “PieChartConverter”. This will transform the sample data into pie series and add them to the PlotModel as shown below.

    converter

  3. Create a xaml page, reference the OxyPlot.Xamarin.Forms namespace and add a control PlotView and bind it to the view model property “SurveyData” using PieChartConverter as shown below.

    xaml

  4. If you run the application, you will the pie-chart with the sample data shown as below. You can modify the look and feel of the plot controls by digging deeper into OxyPlot API.

     chart

Conclusion:

This post provides a detailed overview on how to setup OxyPlot for a Xamarin.Forms application and illustrates how to create a data-bound pie-chart for a cross-platform Xamarin.Forms mobile applications.

References:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s