How to bind Json Data to kendo Line Chart

[Earl]

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 

[Tsvetomir]

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