telerik kendo chart not binding to string

[Tom]

I am new to telerik kendo chart I have created a string that is being returned from an ashx page. I want the x Axis to be the date has in the month and year and for each date there will be two box going up to the number.

 

ASHX.CS Page

string JSON = sb.ToString(); context.Response.ContentType = "text/json"; context.Response.Write(JSON);

Returns

[{"Date":"2/2018""Images":"199956""ImagesDownloads":"540903"},{"Date":"3/2018""Images":"226606""ImagesDownloads":"635068"}]

 

JS Page

var DataSource = new kendo.data.DataSource({ transport: { read: { url: function() {return "/URI";}, dataType: "json"}},group: { field: "Date"}, sort: { field: "Date", dir: "asc"}, schema: { model: { fields: { date: { type: "date"}}}}});function createChart() { $("#chart1").kendoChart({ dataSource: DataSource, legend: { position: "bottom"}, series:[{ field: "Images", categoryField: "Date", name: "Number of Images"}, { field: "ImagesDownloads", categoryField: "Date", name: "Number of Images download"}], categoryAxis: { field: 'Date'}, tooltip: { visible: true, shared: true}});} $(document).ready(function () { $(document).ready(createChart); $(document).bind("kendo:skinChange", createChart);

[Tsvetina]

Hi Tom,
 
I tested your code and the changes that I had to make in order to display the Chart as described were:
1. Fix the format of the data. The following is invalid JSON, it might be a copy-paste problem, but there need to be commas between the properties in the object:

[{"Date":"2/2018""Images":"199956""ImagesDownloads":"540903"},{"Date":"3/2018""Images":"226606""ImagesDownloads":"635068"}]

This has to be:

[{"Date":"2/2018","Images":"199956","ImagesDownloads":"540903"},{"Date":"3/2018","Images":"226606","ImagesDownloads":"635068"}]

Then, I removed the grouping from the Chart DataSource because it was mixing up the format of the data:

var data = [{"Date":"2/2018","Images":"199956","ImagesDownloads":"540903"},{"Date":"3/2018","Images":"226606","ImagesDownloads":"635068"}];

var DataSource = new kendo.data.DataSource({
  transport: {
    read: function(e){
      e.success(data)
    }
  },
  sort: { field: "Date", dir: "asc"},
  schema: {
    model: {
      fields: {
        date: { type: "date"}
      }
    }
  }
});

Here is an example showing the working result:
https://dojo.telerik.com/IkUROtuC


Regards,
Tsvetina
Progress Telerik