How to bind the JSON data in WPF Chart?

3 mins read

This article explains how to populate the JSON data to WPF SfChart with the following steps

Step 1: Create the required model in accordance with the JSON data.

[JSON Data]

[
    {
        "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
    },
…

[C#] Model

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; }
}

Step 2: Convert JSON data to List<Model>.

[C#] ViewModel

public class ViewModel 
{
    public List<Model> Items { get; set; }
 
    public ViewModel()
    {
using (var stream = GetType().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 converted List<Model> to SfChart.

[XAML]

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

Output

How to bind JSON data to the WPF chart

Did you find this information helpful?

Yes

How to bind the JSON data in WPF Chart?

Access denied