Animating Multiple Data Sources in Xamarin.Forms Data Chart

Introduction

Have you ever wanted to create a dashboard application or learn how to visualize large data sets? If so, this blog post will show you how to create an application that will visualize the U.S. population over time by animating changes of population grouped by age in a pyramid chart, as well as population grouped by generation in a radial chart.

Note that the above animation does not represent actual charts animation, where data animation is faster and it has smooth frame interpolation between data updates.

Dashboard applications are a great data visualization tools for presenting large and complex data sets. You can build these types of applications using UI controls that consume data and display them in easy-to-understand views. The XamDataChart is highly flexible, cross-platform control that you can configure and use with any combination of 60 build-in views to visualize a wide range of data types in Xamarin.Forms applications. This control is part of Ultimate UI for Xamarin and you can try it for free.

Running Application

You can get the full source code for the application that we'll be building in this blog post from this GitHub repository. Once you open the application, you'll need to make sure you have our Trial or RTM Nuget packages in your local repository and restore the Nuget packages for Infragistics components.

Instructions

The following sections will provide instructions on creating a dashboard application using the XamDataChart control.

1. Create Data Model

First, we need to implement a data model that will store demographic information about population such as age, gender, and generation range. The PopulationData class is an example of such a data model that utilizes JSON attributes to de-serialize data from JSON strings.

Note that this data model implements the INotifyPropertyChanged interface, which ensures that changes to property values will raise a PropertyChanged event and thus inform the Data Chart control to animate those changes.

2. Create View Model

Next, we need a view model to connect to the www.api.population.io service, retrieve population data sets, and finally de-serialize JSON strings into a list of PopulationData objects:

3. Create Pyramid Chart

With the back-end implemented, we can move to the fun part of visualizing and animating data. The XamDataChart control supports over 60 types of series. You can create a pyramid chart using two BarSeries views that are stacked next to each other to show population of the U.S. between ages 0 and 100.

When implemented, the pyramid chart will display the difference between male and female populations grouped by their age, and animate changes in data over time.

Note that you can control the duration of data animation by setting the TransitionDuration property on the individual BarSeries. However, this duration should always be smaller or equal to the time interval at which the view model is updating data, otherwise, data animation will not be smooth.

4. Create Radial Chart

The XamDataChart control can also display grouped data points around a center point of the plot area using one of the RadialSeries types, as demonstrated in the following code snippet:

When implemented, the radial chart will display the difference between male and female populations grouped by their birthday, and animate changes in data over time.

5. Create Legend

No chart would be complete without a legend that identifies the data sets. The Legend is a simple control that we can overlay over the XamDataChart control or place in any location outside of the chart:

Final Thoughts

The above code snippets show the most important elements of implementing a dashboard application that visualizes and animates the U.S. population over time. You can download the full source code for this application from this GitHub repository. I hope you found this blog post interesting and got inspired to create your own dashboard applications using the Ultimate UI for Xamarin product.