Come aggiornare un grafico KendoUI tramite javascript JSON?

Question

Così ho una tabella che è configurato utilizzando la configurazione stile MVC ...

@(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") 
) 

)

Ho anche un cursore sulla pagina. Quando il valore del cursore viene modificato, gestisco questo evento.

@(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 metodo

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(); 
} 
}); 
} 

ora quando il grafico si aggiorna la griglia è semplicemente vuoto.

La richiesta JSON viene richiamata con successo e i dati vengono recuperati. ma dopo che il grafico è stato compilato, il grafico è vuoto.

qualcuno ha qualche suggerimento?

* EDIT *

l'aggiunta di un campione del JSON restituito

"[{\"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}]"

Vorrei anche far notare che se aggiungo questo

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

alla mia configurazione del grafico, questo popolerà bene il grafico, senza utilizzare la pagina Model. i.e. I dati sono corretti per il grafico.

Answer 1

L'origine dati si aspetta un array come valore per la sua data, ma sembra che la variabile json si sta assegnando contiene una stringa JSON (almeno se la stringa è stato aggiunto alla domanda è quello che stai vedendo sul client nel json var). jQuery dovrebbe normalmente analizzarlo per te se si imposta dataType su "json" (non è sicuro il motivo per cui ciò non sta accadendo per te, dovresti ricontrollare che il parametro dataType sia impostato correttamente).

Puoi provare a analizzarlo da solo; a parte questo, dovresti usare anche chart.setDataSource() invece di creare un nuovo grafico. Il modo in cui lo stai facendo ora, stai semplicemente sostituendo il grafico originale con la sua configurazione con un grafico che non ha alcuna configurazione. Provare qualcosa di simile nel callback:

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

Si noti che nella funzione yearRangeChange, si sta cercando di chiamare aggiornamento sul grafico al di fuori della chiamata successo ajax. Non è necessario refresh quando si utilizza setDataSource, ma anche se è necessario farlo, dovrebbe essere nella richiamata. Altrimenti succede prima che la chiamata ajax sia completata.