मैं जावास्क्रिप्ट JSON के माध्यम से एक केंडोयूआई चार्ट कैसे अपडेट करूं?

Question

तो मैं एक चार्ट जो 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") 
) 

)

मैं भी पृष्ठ पर एक स्लाइडर होता है। जब स्लाइडर मान बदल जाता है तो मैं इस घटना को संभालता हूं।

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

जावास्क्रिप्ट विधि

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 का एक नमूना जोड़ने लौटे

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

मैं यह भी कहना चाहते हैं कि अगर मैं करने के लिए इस

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

जोड़ने मेरी चार्ट कॉन्फ़िगरेशन, यह पृष्ठ Model पृष्ठ का उपयोग किए बिना चार्ट ठीक करेगा। यानी डेटा के लिए डेटा सही है।

Answer 1

डेटा स्रोत की data के लिए मूल्य के रूप में एक सरणी की उम्मीद है, लेकिन यह json चर आप बताए रहे JSON स्ट्रिंग (शामिल कम से कम अगर स्ट्रिंग आप सवाल को जोड़ा गया क्या आप पर क्या देख रहे है की तरह लग रहा json var में ग्राहक)। jQuery को आम तौर पर आपके लिए यह विश्लेषण करना चाहिए कि यदि आप डेटा को "जेसन" पर सेट करते हैं (सुनिश्चित नहीं है कि यह आपके लिए क्यों नहीं हो रहा है - आपको यह जांचना चाहिए कि dataType परम सही ढंग से सेट है)।

आप इसे स्वयं पार्स करने का प्रयास कर सकते हैं; इसके अलावा, आपको एक नया चार्ट बनाने के बजाय chart.setDataSource() का भी उपयोग करना चाहिए। वे जिस तरह से आप इसे कर रहे हैं, आप बस अपने मूल चार्ट को उस कॉन्फ़िगरेशन के साथ अपनी कॉन्फ़िगरेशन के साथ बदल रहे हैं जिसमें कोई कॉन्फ़िगरेशन नहीं है। अपने कॉलबैक में कुछ इस तरह का प्रयास करें:

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

ध्यान रखें कि आपके yearRangeChange समारोह में, आप अपने ajax सफलता कॉल के बाहर चार्ट पर ताज़ा कॉल करने के लिए कोशिश कर रहे हैं। setDataSource का उपयोग करते समय आपको refresh की आवश्यकता नहीं है, लेकिन अगर आपको ऐसा करने की आवश्यकता है, तो उसे कॉलबैक में होना होगा। अन्यथा यह AJAX कॉल पूर्ण होने से पहले होता है।