How to update KendoUI diagram via javascript JSON?

Question

So, I have a diagram that is configured using the MVC style configuration ...

@(Html.Kendo().Chart<DIMVC.ViewModel.CompanyProduction>(Model.CompanyProduction) .Name("Chart") .Title("Files sent") .Legend(legend => legend .Position(ChartLegendPosition.Bottom) ) .ChartArea(chartArea => chartArea .Background("transparent") ) .SeriesDefaults(seriesDefaults => seriesDefaults.Line().Style(ChartLineStyle.Smooth) ) .Series(series => { series.Line(model => model.SentFiles).Name("Sent Files"); ... { lots more series added here } } .CategoryAxis(axis => axis .Categories(model => model.MonthDisplay) .Labels(labels => labels.Rotation(-90)) ) .ValueAxis(axis => axis.Numeric() .Labels(labels => labels.Format("{0:N0}")) .MajorUnit(10000) ) .Tooltip(tooltip => tooltip .Visible(true) .Format("{0:N0}") ) .Events(e => e .SeriesClick("onSeriesClick") ) 

)

I also have a slider on the page. When the value of the slider is changed, I process this event.

 @(Html.Kendo().RangeSlider() .Name("yearRange") .Min(2000) .Max(DateTime.Today.Year) .SmallStep(1) .LargeStep(5) .Values(Model.MinYear, Model.MaxYear) .Events(e => e.Change("yearRangeChange")) ) 

javascript method

 function yearRangeChange(e) { var url = "/FetchData/"; $.ajax({ type: "GET", url: url, data: { startYear: e.values[0], endYear: e.values[1] }, dataType: "json", success: function (json) { $("#DINETChart").kendoChart({ dataSource: { data: json } }); var chart = $("#DINETChart").data("kendoChart"); chart.refresh(); } }); } 

now when the table is updated, the grid is just empty.

The json request is successfully called and the data is retrieved. but after filling in the chart, the chart is empty.

Does anyone have any suggestions?

* EDIT *

adding sample returned json

"[{\"CompanyID\":1,\"Year\":2011,\"Month\":8,\"SentFiles\":1666,\"ReceivedFiles\":1632,\"SentData\":12803.674593292486,\"ReceivedData\":11908.047586546765,\"Note\":null,\"MonthDisplay\":\"Aug\",\"CompanyDisplay\":null},{\"CompanyID\":1,\"Year\":2013,\"Month\":10,\"SentFiles\":21004,\"ReceivedFiles\":20387,\"SentData\":157376.825542573,\"ReceivedData\":152878.87845794103,\"Note\":null,\"MonthDisplay\":\"Oct\",\"CompanyDisplay\":null},{\"CompanyID\":1,\"Year\":2013,\"Month\":4,\"SentFiles\":9989,\"ReceivedFiles\":9880,\"SentData\":74913.53277995327,\"ReceivedData\":75145.16331588416,\"Note\":null,\"MonthDisplay\":\"Apr\",\"CompanyDisplay\":null},{\"CompanyID\":1,\"Year\":2013,\"Month\":11,\"SentFiles\":25956,\"ReceivedFiles\":25249,\"SentData\":196155.8977337967,\"ReceivedData\":189320.44546897494,\"Note\":null,\"MonthDisplay\":\"Nov\",\"CompanyDisplay\":null}]"

I would also like to note that if I add this

 .DataSource(ds => ds.Read(read => read.Action("FetchData", "Home", new { startYear = 2012, endYear = 2013 }) )) 

to my chart configuration, this will fill the chart fine without using the Model page. those. The data is correct for the chart.

Answer 1

The data source expects an array as the value for its data , but it looks like the json variable you assign contains a JSON string (at least if the string added to the question is what you are seeing on the client in json var). jQuery should usually analyze this for you, if you set dataType to "json" (you don't know why this is not happening for you), you should double check that the dataType parameter dataType set correctly).

You can try to parse it yourself; besides this, you should also use chart.setDataSource() instead of creating a new chart. As you do now, you simply replace your original diagram with your configuration with a diagram that has no configuration. Try something like this in your callback:

 var data = JSON.parse(json); var chart = $("#DINETChart").data("kendoChart"); var dataSource = new kendo.data.DataSource({ data: data }); chart.setDataSource(dataSource); 

Note that in your yearRangeChange function yearRangeChange you are trying to invoke an update in a chart outside of your ajax call. You do not need to refresh when you use setDataSource , but even if you need to do this, it should be in the callback. Otherwise, this happens before the ajax call completes.