Articles in this section
Category / Section

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
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied