How to bind JSON data to UWP Charts?

​This article provides a step-by-step guide on how to effectively bind and display data from a JSON file within an UWP Chart. By following these instructions, you will learn to configure your UWP application to parse JSON data and present it visually using the Chart control.

Step 1: Define the Model class to represent the structure of your JSON data. This model will facilitate the deserialization of the JSON into a strongly typed object.

public class Model
{
    public DateTime Date { get; set; }
    public decimal CapacityUsed { get; set; }
    public decimal CapacityAvailable { get; set; }
    public decimal OverCapacity { get; set; }
    public decimal TotalHours { get; set; }
}

JSON Data (Capacities.json)

[
    {
        "Date": "2017-01-01T00:00:00",
        "CapacityUsed": 33.000,
        "CapacityAvailable": 60.000,
        "OverCapacity": 0.0,
        "TotalHours": 60.000
    },
    {
        "Date": "2017-02-05T00:00:00",
        "CapacityUsed": 53.000,
        "CapacityAvailable": 60.000,
        "OverCapacity": 0.0,
        "TotalHours": 60.000
    },
    {
        "Date": "2017-03-05T00:00:00",
        "CapacityUsed": 43.000,
        "CapacityAvailable": 60.000,
        "OverCapacity": 0.0,
        "TotalHours": 60.000
    },
…

Step 2: Create a ViewModel to handle the deserialization of the JSON data from an embedded resource into a list of Model objects. Ensure the JSON file's build action is set to `Embedded Resource`.

public class ViewModel 
{
    public List<Model> Items { get; set; }
 
    public ViewModel()
    {
          using (var stream = GetType().GetTypeInfo().Assembly.GetManifestResourceStream("JsonDataBinding.Capacities.json"))
          using (TextReader textStream = new StreamReader(stream))
          {
               var text = textStream.ReadToEnd();
               Items = JsonConvert.DeserializeObject<List<Model>>(text);
          }
    }
}

Step 3: Bind the List<Model> from your ViewModel to the SfChart control in your XAML. Specify the XBindingPath and YBindingPath for your series to correctly visualize the data.

<chart:SfChart>
    . . .
    <chart:ColumnSeries XBindingPath="Date"
                        YBindingPath="CapacityUsed"
                        ItemsSource="{Binding Items}" />
</chart:SfChart>

Output