Javascript JSONを使用してKendoUIチャートを更新するにはどうすればよいですか？

Question

だから私は

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

... MVCスタイルの設定を使用して設定されたチャートを持っている）

私はまた、ページ上のスライダーを持っています。スライダーの値が変更されると、私はこのイベントを処理します。

@(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の方法

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要求が正常に呼び出され、データが取得されます。 ただし、グラフに値が入力されると、グラフは空白になります。

誰にでも何か提案がありますか？私は私にこの

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

を追加する場合

* EDIT *

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}]"

を返された私はまたことを指摘したいと思いますチャートの設定では、Modelページを使用せずにチャートを正常に取り込むことができます。 つまり、グラフのデータは正しいです。

Answer 1

データソースでは、配列がdataの値であると想定していますが、割り当てようとしている変数にはJSON文字列が含まれているようです（少なくとも質問に追加した文字列がクライアントはjson varにあります）。 dataTypeを "json"に設定した場合、jQueryは通常これを解析する必要があります（どうしてこのようなことが起こっているのかわかりません。つまり、dataTypeのパラメータが正しく設定されているかどうかを再度確認する必要があります）。

あなた自身で解析することができます。それ以外にも、新しいグラフを作成する代わりにchart.setDataSource()を使用する必要があります。彼らはあなたが今やっているやり方で、元のチャートを設定なしのチャートに置き換えるだけです。あなたのyearRangeChange機能で、あなたは、AJAXの成功コールの外チャートにリフレッシュを呼び出すしようとしていることを

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

注：あなたのコールバックでこのような何かを試してみてください。 setDataSourceを使用する場合、refreshは必要ありませんが、それを行う必要がある場合でも、コールバックに入る必要があります。それ以外の場合は、ajax呼び出しが完了する前に発生します。