剣道UIグラフ - 返されたJSONフィールドの数を可視化します

Question

検索した特定のフィールドの数をパイ/ドーナツチャートに表示したいとします。 RESTでデータを取得していますが、結果はjson形式です。ソースは次の値を繰り返すリストです：

例：次のリストで、完成した応答の数（カウント）を取得したいと思います。おそらく第2のチャートでは、地域別に回答の内訳を示します。

var userResponse = [ 
     {  User: "Bob Smith", Status: "Completed", Location: "USA" }, 
     {  User: "Jim Smith", Status: "In-Progress", Location: "USA" }, 
    {  User: "Jane Smith", Status: "Completed", Location: "USA" }, 
    {  User: "Bill Smith", Status: "Completed", Location: "Japan" }, 
    {  User: "Kate Smith", Status: "In-Progress", Location: "Japan" }, 
    {  User: "Sam Smith", Status: "In-Progress", Location: "USA" }, 
] 

私の初期化は、現在、次のようになります。

$('#targetChart').kendoChart({ 

    dataSource: { 

     data: data.d.results, 

     group: { 

      field: "Location", 
     }, 

    }, 

    seriesDefaults: { 

     type: "donut", 

    }, 

    series: [{ 

     field: 'Id', 

     categoryField: 'Location', 
    }], 

}); 

Answer 1

あなたは簡単にデータを変換することができます。それをロケーション別にグルーピングし、完了したデータのみをフィルタリングするDataSourceオブジェクトに読み込みます。そして、データをフェッチし、それぞれの場所のためのカウントの配列を作成します。これは、その後パイ/ドーナツにバインドすることができ

[ 
    {Location: "Japan", Count: 1}, 
    {Location: "USA", Count: 2}, 
] 

：

var pieData = []; 

var respDS = new kendo.data.DataSource({ 
    data: userResponse, 
    group: { 
    field: "Location", 
    }, 
    filter: { 
    field: "Status", 
    operator: "eq", 
    value: "Completed" }, 
}); 

respDS.fetch(function(){ 
    var view = respDS.view(); 
    for (var i=0; i<view.length; i++){ 
    var item = {}; 
    item.Location = view[i].value; 
    item.Count = view[i].items.length; 
    pieData.push(item); 
    }  
}); 

あなたはで終わります。

DEMO