KendoUI grafiğini javascript JSON ile nasıl güncellerim?

Question

Yani MVC tarzı yapılandırmayı kullanarak yapılandırılmış bir grafiği ...

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

)

Ben de sayfasındaki bir kaydırıcı var var. Kaydırıcı değeri değiştirildiğinde, bu olayı ele alırım.

@(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 yöntem grafik ızgara güncelleme sadece boş olan hemen

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

.

Json isteği başarıyla çağrıldı ve veriler alındı. ancak grafik doldurulduktan sonra grafik boş.

Herhangi bir öneride bulunuldu mu? JSON bir örnek ekleyerek

* DÜZENLEME *

Ben de işaret etmek istiyorum

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

döndüğünü ben bu

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

eklerseniz benim Grafik yapılandırması, bu sayfa Model kullanmadan, grafik güzelce dolduracaktır. Örnek olarak, veriler grafik için doğrudur.

Answer 1

veri kaynağı onun data değeri olarak bir dizi beklediğini ancak bu söz eklenen dize sen gördüklerinizin en azından eğer (bir JSON dizesi içerir atıyorsanız json değişken benziyor istemcide json var). jQuery normalde sizin için veri tipini "json" olarak ayarlarsanız (bu sizin için neden olmadığından emin değilsiniz - dataType parametresinin doğru şekilde ayarlandığını iki kez kontrol etmelisiniz) sizin için ayrıştırmalıdır.

Kendiniz ayrıştırmayı deneyebilirsiniz; Bunun dışında, yeni bir grafik oluşturmak yerine chart.setDataSource()'u da kullanmalısınız. Şu an yaptığınız gibi, orijinal grafiğinizi, yapılandırması olmayan bir grafikle yapılandırmasıyla değiştiriyorsunuz. geri arama böyle bir şey deneyin: yearRangeChange işlevinde, kendi ajax başarı aramanın dışında grafik üzerinde yenileme aramaya çalıştığınızı

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

Not. setDataSource'u kullanırken refresh'a ihtiyacınız yoktur, ancak bunu yapmanız gerekse bile geri aramada olması gerekir. Aksi takdirde ajax çağrısı tamamlanmadan önce olur.