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
