Skip to content

Commit 91ad941

Browse files
marin-bratanovmarin-bratanov
committed
kb(chart): newtonsoft serialization settings
1 parent 77e5ce7 commit 91ad941

File tree

1 file changed

+196
-0
lines changed

1 file changed

+196
-0
lines changed

‎knowledge-base/chart-newtonsoft-seialization-settings.md

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
---
2+
title: Chart not working with Newtonsoft.Json properties
3+
description: Using Newtonsoft.Json serialization settings can break the chart. See how to fix it.
4+
type: troubleshooting
5+
page_title: Chart not working with Newtonsoft.Json serialization properties
6+
slug: chart-kb-newtonsoft-seialization-settings
7+
position:
8+
tags:
9+
ticketid: 1462254
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product Version</td>
18+
<td>2.10.0</td>
19+
</tr>
20+
<tr>
21+
<td>Product</td>
22+
<td>Charts for Blazor</td>
23+
</tr>
24+
<tr>
25+
<td>Blazor application type</td>
26+
<td>Client-side</td>
27+
</tr>
28+
</tbody>
29+
</table>
30+
31+
32+
## Description
33+
34+
If I use the TelerikChart with a class with `JsonProperties` the values are not shown and the template for the Chart doesn't work.
35+
36+
Sample setting:
37+
38+
````CSHTML
39+
[System.CodeDom.Compiler.GeneratedCode("NJsonSchema", "10.1.11.0 (Newtonsoft.Json v12.0.0.0)")]
40+
public partial class ChartDataModel
41+
{
42+
[Newtonsoft.Json.JsonProperty("thedescription", Required = Newtonsoft.Json.Required.Default, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
43+
public string TheDescription { get; set; }
44+
45+
[Newtonsoft.Json.JsonProperty("thevalue", Required = Newtonsoft.Json.Required.Default, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
46+
public decimal? TheValue { get; set; }
47+
48+
[Newtonsoft.Json.JsonProperty("thecolor", Required = Newtonsoft.Json.Required.Default, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
49+
public string TheColor { get; set; }
50+
}
51+
````
52+
53+
Sample chart that does not display any longer after adding serialization settings:
54+
55+
````CSHTML
56+
<TelerikChart Width="500px">
57+
58+
<ChartSeriesItems>
59+
<ChartSeries Field="@nameof(ChartDataModel.TheValue)"
60+
CategoryField="@nameof(ChartDataModel.TheDescription)"
61+
ColorField="@nameof(ChartDataModel.TheColor)"
62+
Type="ChartSeriesType.Bar"
63+
Data="@(_chartData)">
64+
<ChartSeriesLabels Visible="true" Template="@_myTemplate"></ChartSeriesLabels>
65+
</ChartSeries>
66+
</ChartSeriesItems>
67+
68+
</TelerikChart>
69+
70+
71+
@code{
72+
List<ChartDataModel> _chartData { get; set; }
73+
string _myTemplate { get; set; } = "#=dataItem.TheDescription# - color: #=dataItem.TheColor#";
74+
75+
protected override async Task OnInitializedAsync()
76+
{
77+
_chartData = await _dataService.GetData();
78+
}
79+
}
80+
````
81+
82+
83+
## Cause\Possible Cause(s)
84+
85+
The Telerik Chart serializes the data for rendering and thus the serialization settings are honored. This causes changes in the field names from what you set in the markup - the `nameof()` operator does not use these settings. In the example above, it will provide `TheValue` to the chart, while the actual field name will be `val`.
86+
87+
88+
## Solution
89+
90+
You must match the field names you provide in the chart settings (such as `Field` values and strings in templates) to the names that will actually be serialized.
91+
92+
>caption Example of handling custom serialization settings in the chart
93+
94+
````Model
95+
[System.CodeDom.Compiler.GeneratedCode("NJsonSchema", "10.1.11.0 (Newtonsoft.Json v12.0.0.0)")]
96+
public partial class ChartDataModel
97+
{
98+
[Newtonsoft.Json.JsonProperty("thedescription", Required = Newtonsoft.Json.Required.Default, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
99+
public string TheDescription { get; set; }
100+
101+
[Newtonsoft.Json.JsonProperty("thevalue", Required = Newtonsoft.Json.Required.Default, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
102+
public decimal? TheValue { get; set; }
103+
104+
[Newtonsoft.Json.JsonProperty("thecolor", Required = Newtonsoft.Json.Required.Default, NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore)]
105+
public string TheColor { get; set; }
106+
}
107+
````
108+
````Chart
109+
@inject ChartDataService _dataService
110+
111+
@* note how the values of the chart field settings match the serialization settings *@
112+
113+
<TelerikChart Width="500px">
114+
115+
<ChartSeriesItems>
116+
<ChartSeries Field="thevalue"
117+
CategoryField="thedescription"
118+
ColorField="thecolor"
119+
Type="ChartSeriesType.Bar"
120+
Data="@(_chartData)">
121+
<ChartSeriesLabels Visible="true" Template="@_myTemplate"></ChartSeriesLabels>
122+
</ChartSeries>
123+
</ChartSeriesItems>
124+
125+
</TelerikChart>
126+
127+
128+
@code{
129+
List<ChartDataModel> _chartData { get; set; }
130+
string _myTemplate { get; set; } = "#=dataItem.thedescription# - color: #=dataItem.thecolor#";
131+
132+
protected override async Task OnInitializedAsync()
133+
{
134+
_chartData = await _dataService.GetData();
135+
}
136+
}
137+
````
138+
````SampleService
139+
public class ChartDataService
140+
{
141+
[Inject]
142+
private HttpClient Http { get; set; }
143+
144+
public ChartDataService(HttpClient client)
145+
{
146+
Http = client;
147+
}
148+
149+
public async Task<List<ChartDataModel>> GetData()
150+
{
151+
return await Http.GetFromJsonAsync<List<ChartDataModel>>("ChartData?");
152+
}
153+
}
154+
````
155+
````SampleController
156+
[ApiController]
157+
[Route("[controller]")]
158+
public class ChartDataController : ControllerBase
159+
{
160+
161+
private readonly ILogger<ChartDataController> logger;
162+
163+
public ChartDataController(ILogger<ChartDataController> logger)
164+
{
165+
this.logger = logger;
166+
}
167+
168+
private static readonly string[] Colors = new[]
169+
{
170+
"red", "green", "blue", "pink", "yellow", "cyan", "magenta",
171+
};
172+
173+
// this static list acts as our "database" in this sample
174+
private static List<ChartDataModel> _data { get; set; }
175+
176+
[HttpGet]
177+
public async Task<List<ChartDataModel>> Get()
178+
{
179+
if (_data == null)
180+
{
181+
var rng = new Random();
182+
_data = Enumerable.Range(1, 7).Select(index => new ChartDataModel
183+
{
184+
TheDescription = $"description {index}",
185+
TheValue = rng.Next(1, 5),
186+
TheColor = Colors[index - 1]
187+
}).ToList();
188+
}
189+
190+
return await Task.FromResult(_data);
191+
}
192+
}
193+
````
194+
195+
## Notes
196+
The approach used internally by the chart may change in the future. For example, at the time of writing, the new `System.Net.Http.Json` is not yet ready for use, but it may be used in the future. Thus, the approach described in this article may become unnecessary or wrong.

0 commit comments

Comments
 (0)