पाई चार्ट बनाने के लिए डेटा स्रोत कैसे एकत्र करें?

Question

Kendo UI Complete for ASP.NET MVC का उपयोग करना, संस्करण: 2013.3 1119 (20 नवंबर, 2013) ...

अगर मैं कोड के इस बिट है:

:

$("#status-chart").kendoChart({ 
    dataSource: { 
     data: [ 
      {Status: 10}, 
      {Status: 20}, 
      {Status: 200}, 
      {Status: 200} 
     ] 
    },     
    series: [{ 
     field: 'Status', 
     categoryField: "Status", 
     aggregate: 'count' 
    }]    
}); 

मैं इस चार्ट मिल

जैसा कि आप देख सकते हैं - स्थिति 10 और 20 के पास 1 का मान और स्थिति 200 का मूल्य 2 है।

ग्रेट, लेकिन जो मैं वास्तव में चाहता हूं वह एक पाई चार्ट में बिल्कुल वही बात है (इसलिए, 3 पाई स्लाइस वाले चार्ट, जिनमें से 2 बिल्कुल वही आकार हैं और एक जो बाकी के रूप में 2 गुना बड़ा है)।

इसलिए मैं, अपने आप को करने के लिए सोचा सब मैं क्या करने की जरूरत है सिर्फ type: "pie" इसलिए की तरह सेट:

$("#status-chart").kendoChart({ 
    dataSource: { 
     data: [ 
      {Status: 10}, 
      {Status: 20}, 
      {Status: 200}, 
      {Status: 200} 
     ] 
    },     
    series: [{ 
     field: 'Status', 
     categoryField: "Status", 
     aggregate: 'count', 
     type: "pie" 
    }]    
}); 

लेकिन वह इस चार्ट का उत्पादन:

आपको लगता है कि स्थिति देख सकते हैं 200 दोहराया जाता है और मूल्य स्लाइस के आकार का निर्धारण कर रहा है।

मैं एक पाई चार्ट कि जो ऊपर पहले कोड स्निपेट में डेटा स्रोत के लिए बाध्य है नीचे लेकिन चित्र की तरह दिखता है कैसे बना सकते हैं:

तो, यहाँ मेरे सवाल है?

संयोग से, कारण मैं डेटा स्रोत बदलने के लिए नहीं करना चाहती है कि मैं एक ग्रिड के साथ साझा करना चाहते हैं।

Answer 1

आप यहां क्या करने का प्रयास कर रहे हैं एक साझा डेटा स्रोत को समूहित करना और इसे केवल एक विजेट को प्रभावित करना है। इसके अलावा, जब आप इसे समूह करते हैं तो केंडो यूआई समूहबद्ध ऑब्जेक्ट को वापस कर देगा। पाई चार्ट इन वस्तुओं में रुचि नहीं रखता है, बल्कि उन वस्तुओं की गिनती है जो इन समूह वस्तुओं में से प्रत्येक में शामिल हैं। हमें सिर्फ सही प्रारूप में डेटा प्राप्त करने की आवश्यकता है।

तो आपके पास अपना मूल डेटा स्रोत है (जिसे मैंने निकाला है क्योंकि यह किसी अन्य विजेट के साथ साझा किया गया है)। जब वह डेटासोर्स बदलता है, तो आप एक दूसरे को पॉप्युलेट करना चाहते हैं - एक जिसे आप ग्रिड को प्रभावित किए बिना समूह कर सकते हैं।

var ds = new kendo.data.DataSource({ 
    data: [ 
    {Status: 10}, 
    {Status: 20}, 
    {Status: 200}, 
    {Status: 200} 
    ], 
    change: function() { 
    chartData.data(this.data()); 
    } 
}); 

दूसरे डेटा स्रोत (chartData) समूहबद्ध की गई है, और जब यह बदल जाता है, यह एक सरणी भरता है, वस्तुओं कि पाइ चार्ट वास्तव में समझ सकते हैं का निर्माण।

var groupedData = []; 

// populate the grouped data array by grouping this datasource 
// and then populating an plain array 
var chartData = new kendo.data.DataSource({ 
    group: { field: 'Status' }, 
    change: function() { 
    groupedData = []; 
    $.each(this.view(), function() { 
     groupedData.push({ field: this.value, value: this.items.length }); 
    }); 
    } 
}); 

और फिर सिर्फ इतना है कि सरणी

$("#status-chart").kendoChart({ 
    dataSource: groupedData, 
    series: [{ 
    type: 'pie', 
    field: 'value', 
    categoryField: 'field' 
    }]    
}); 

करने के लिए अपने पाइ चार्ट बाँध उदाहरण कार्य करना: http://jsbin.com/EKuxORA/1/edit