Jak zaktualizować wykres KendoUI za pomocą javascript JSON?

Question

Mam więc wykres, który jest skonfigurowany przy użyciu konfiguracji styl 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") 
) 

)

Mam też suwak na stronie. Po zmianie wartości suwaka obsługuję to zdarzenie.

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

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

teraz gdy wykres jest aktualizowany siatki jest po prostu puste.

Żądanie json zostanie pomyślnie wywołane, a dane zostaną pobrane. , ale po wypełnieniu wykresu wykres jest pusty.

Czy ktoś ma jakieś sugestie?

* EDIT *

dodając próbkę JSON zwrócony

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

Chciałbym również podkreślić, że jeśli dodać tę

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

do mojego konfiguracji wykresu, spowoduje to wypełnienie wykresu bez konieczności używania strony Model. tj. Dane są poprawne dla wykresu.

Answer 1

Źródłem danych oczekuje tablicę jako wartość dla swoich data, ale wygląda na to json zmiennej jesteś przypisywania zawiera ciąg JSON (przynajmniej jeśli ciąg dodano do tej kwestii jest to, co widać na klient w wersji json var). jQuery powinno normalnie parsować to dla ciebie, jeśli ustawisz dataType na "json" (nie wiesz, dlaczego tak się nie dzieje - powinieneś dokładnie sprawdzić, czy parametr dataType jest ustawiony poprawnie).

Możesz spróbować parsować samemu; oprócz tego powinieneś także użyć chart.setDataSource() zamiast tworzyć nowy wykres. Robią to teraz, po prostu zastępujesz oryginalny wykres swoją konfiguracją za pomocą wykresu, który nie ma konfiguracji. Spróbuj czegoś takiego w swoim zwrotnego:

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

zauważyć, że w swojej funkcji yearRangeChange, próbujesz zadzwonić odświeżanie na wykresie spoza ajax rozmowy sukcesem. Nie musisz refresh, gdy używasz setDataSource, ale nawet jeśli musiałbyś to zrobić, musiałby to być callback. W przeciwnym razie dzieje się przed zakończeniem wywołania ajax.