Visualize JSON Data Quickly Using XamCategoryChart

With the simplicity of the XamCategoryChart it is easy to quickly display data from a JSON web service in three simple steps:

1. Retrieve the data from the service using HttpClient.
2. Deserialize the JSON data into a list of Dictionaries of type <string,object> .
3. Set the ItemsSource property of the Category Chart to the list of dictionaries.

In this example, you will be pulling data from a web service providing population data. We will select population data from the United States for the year 2016 using the following request:  http://api.population.io/1.0/population/2016/United%20States/?format=json.

The following code snippet demonstrates the method used to retrieve the data for the chart and set it to the BindingContext of the page:

private async void GetData()
{
    HttpClient c = new HttpClient();
    string srvRequest = 
     "http://api.population.io/1.0/population/2016/United%20States/?format=json";
    var str = await c.GetStringAsync(srvRequest);
    var data = await Task.Run(() => 
      JsonConvert.DeserializeObject<List<Dictionary<string, object>>>(str));
    Device.BeginInvokeOnMainThread(() =>
    {
        this.BindingContext = data;
    });
}

This service will return data with the following properties:

Property Name	Property Type	Description
females	long	The number of females in the United States in 2016 for the specified age group.
country	string	The country name: this will be United States for all values returned from our query.
age	long	The age group for the returned data.
males	long	The number of males in the United States in 2016 for the specified age group.
year	long	The year: this will be 2016 for all values returned from our query.
total	long	The total number of people in the United States in 2016 for the specified age group.

Since you have already set the BindingContext of the page to the collection, you can simply bind the ItemsSource property of the Category Chart to the page’s BindingContext using the following code snippet:

<ig:XamCategoryChart x:Name="chart" ItemsSource="{Binding}"/>

Once you have set the ItemsSource, you can run the application and the chart will appear as follows:

Adding a Legend

To get an even better view of the data plotted, you can make use of another Infragistics control, the Legend, which will let you know what each series represents. To use the legend you simply add the legend control to the page and set the legend property of the chart to the instance of the legend as follows:

<Grid>
  <Grid.RowDefinitions>
	<RowDefinition />
	<RowDefinition Height="100" />
  Grid.RowDefinitions>
  <ig:XamCategoryChart x:Name="chart" 
    ItemsSource="{Binding}"
 Legend="{x:Reference legend}"/>
  <ig:Legend x:Name="legend" Grid.Row="1" />
Grid>

By adding the legend, you can easily see exactly which properties the chart plotted as series.

From the image, you can see that the chart has automatically picked to use the Age property for the X Axis Labels and has created Series for each of the other numeric values: females, males, year, and total. Normally the Category Chart will pick a string property to use as the Labels, however in this case the only string property returned, country, contained only one unique value, “United States”. Therefore, this data is ignored and instead the chart is wise enough to pick Age for the Labels since this property contains unique values.

Final Steps

At this point, you have a working visualization of the data. By setting only a few more properties, you can add more information to your chart and clean up its appearance somewhat. First, since the year was a parameter you specified in the query and does not provide any valuable information as a series in the chart, you can exclude the Series for the year using the Category Chart’s ExcludedProperties property. The Excluded Properties is simply an array of strings containing the property names for the properties that should not be considered when determining the Axes and Series values. In your scenario you set the excluded properties as follows:

ExcludedProperties="[year]"

Instead, you can set the Title of the Category Chart and the Axes to provide more information on what the chart is conveying by using the Title, XAxisTitle, and YAxisTitle properties. In addition, since your data points are rather close together you can turn off Markers in the chart to show smooth lines. With a few extra tweaks to your XAML as follows:

<ig:XamCategoryChart x:Name="chart" 
    Title="2016 US Population Breakdown" 
 MarkerTypes="None"
 ItemsSource="{Binding}"
 Legend="{x:Reference legend}"
 IsTransitionInEnabled="True"
 ExcludedProperties="[year]"
 YAxisTitle="Number of People"
 YAxisLabelRightMargin="5"
 XAxisTitle="Age"
 XAxisLabelTopMargin="5" />

You have easily created a clear visualization of your data.

If you would like to try it out for yourself, download a trial of the Infragistics Ultimate UI Controls for Xamarin to get started, and here is the link to the sample application. To run the sample, restore the Infragistics NuGet packages needed (more information here), compile, and deploy the application to a device/emulator/simulator.