How to create a WinUI Chart using the JSON data (SfCartesianChart)?

4 mins read

This article explains how to bind JSON data to WinUI Cartesian charts.

JSON data cannot be bound directly to SfCartesianChart, so it is necessary to deserialize the JSON data into a bindable format. You can use the open-source NuGet package Newtonsoft.Json to serialize and deserialize JSON objects.

Steps to pass JSON data to SfCartesianChart

JSON data

{
 'Country': 'USA',
 'Count': 46
}, {
 'Country': 'China',
 'Count': 36
}, {
 'Country': 'Japan',
 'Count': 63
}, {
 'Country': 'Australia',
 'Count': 54
}, {
 'Country': 'France',
 'Count': 50
}

Step 1: Add the Newtonsoft.Json reference to your project.

Step 2: Create a data model to store JSON data.

public class Medal
{
    public string Country { get; set; }
    public int Count { get; set; }
}

Step 3: Create a ViewModel to store a collection of model objects.

public class ViewModel
{
    public ObservableCollection<Medal> Medal { get; set; }
}

Step 4: Deserialize the JSON data as a collection of data models.

{
     …
     string jsonData = @"{'Medal':[{'Country':'USA','Count':46},{'Country':'China','Count':36},{'Country':'Japan','Count':63},{'Country':'Australia','Count':54},{'Country':'France','Count':50}]}";
 
     var jsonDataCollection = JsonConvert.DeserializeObject<ViewModel>(jsonData);
     chart.DataContext = jsonDataCollection;
}

Step 5: Bind the deserialized JSON data to the ChartSeries ItemsSource property and set the XBindingPath and YBindingPath to map respective properties in the data model for plotting the series.

<chart:SfCartesianChart x:Name="chart">
    …
    <chart:ColumnSeries ItemsSource="{Binding Medal}"
                        XBindingPath="Country" 
                        YBindingPath="Count">
    </chart:ColumnSeries>
</chart:SfCartesianChart>

Output

WinUI column chart with JSON data

How to create a WinUI Chart using the JSON data (SfCartesianChart)?

Access denied