This is a migrated thread and some comments may be shown as answers.

How to bind Json Data to kendo Line Chart

1 Answer 303 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Earl
Top achievements
Rank 1
Earl asked on 03 Feb 2021, 10:14 AM
Here is my code 
try
         {
             if (list != null && list.Count > 0)
             {
                 var serializer = new JavaScriptSerializer();
                 var hourList = list.GroupBy(x => x.LogDate.Hour).Select(x =>x.First()).Select(x => x.LogDate.Hour);
 
                 foreach (var hour in hourList)
                 {
                     result.AddRange(list.Where(y => y.LogDate.Hour == hour).Select(y =>
                     {
                         var jsonObj = serializer.Deserialize<Dictionary<string, object>>(y.DashboardChartData);
                         var jsonDoc = new Dictionary<string, object>();
                         jsonDoc.Add(y.DashboardChartName, jsonObj.ContainsKey("Usage") ? jsonObj["Usage"] : string.Empty);
                         jsonDoc.Add("LogDateTime", y.LogDate);
                         jsonDoc.Add("Type", y.DashboardChartType);
 
                         var json = JsonConvert.SerializeObject(jsonDoc);
 
                         return json;
                     }));
                 }
             }
         }

 

Html.Kendo().Chart()
                              .Name("datastoreUsageChart" + i)
                              .Title("DataStoreChart")
                              .Legend(legend => legend
                              .Visible(false)
                              )
                              .ChartArea(chartArea => chartArea
                              .Background("transparent")
                              .Height(300)
                              )
                              .HtmlAttributes(new { style = "height:100%; margin-bottom:0px; width:30%; display:inline-block; vertical-align: top; padding-right: 2%;", @class = "chart-small-screen" })
                              .DataSource(ds => ds.Read(read => read.Action("GetDatastoreChartTotalData", "DashBoard", new { vCenterId = vCenter.vCenterID })))
                              .Series(series =>
                              {
                                  foreach (var datastore in tempList)
                                  {
                                      series.Line(datastore).ColorHandler("getColor").CategoryField("LogDateTime").Aggregate(ChartSeriesAggregate.Max);
                                  }
                              }
                              )
                              .CategoryAxis(axis => axis
                              .Date()
                              .BaseUnit(ChartAxisBaseUnit.Hours)
                              .Min(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0))
                              .Max(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 23, 59, 59))
                              .MajorGridLines(lines => lines.Visible(false))
                              )
                              .ValueAxis(axis => axis
                              .Numeric()
                              .Labels(labels => labels.Format("{0}"))
                              )
                              .Events(e=>e.DataBound("onDataBoundChart"))
                              .Tooltip(tooltip => tooltip
                              .Visible(true)
                              .Format("{0}-Session")
                              ).ToHtmlString()

Json Data comes like this 

 

but it doesn't work 


1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 05 Feb 2021, 06:37 AM

Hi Earl,

I have investigated the provided code snippets and I have noticed that the JSON that is being returned is actually a serialized Dictionary object. However, the Chart expects to receive and IEnumerable collection with objects that contain the different properties and their respective values. 

Is it possible for you to create a list with objects, pass the values as part of objects (might be anonymous), and serialize the list collection?

Let me know if the data is still not bound.

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Charts
Asked by
Earl
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or