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