2012-11-29 17 views
5

これが可能かどうかわかりません。私の例では、ソースとしてjsonを使用していますが、これはどんなサイズでもかまいません。 fiddleの私の例では、ProductFamily(xAxis)とValue(yAxis)の2つの列をバインドするだけで、このデータを共有する方法で使用しますが、集計を使用して列をグループ化できるようにしたいと考えています。剣道UI BarChartデータのグループ化

グループ化されていないこの例では、FamilyAの列が複数表示されています。 これを1列にグループ化し、データの量に関係なく値を集計できますか?

したがって、値4850 + 4860 = 9710のFamilyAの結果が1つの列に表示されますか?

オンラインのすべての例に関する問題は、各カテゴリに常に正しい量のデータがあることです。これが意味をなさないかどうかわからない?

http://jsfiddle.net/jqIndy/ZPUr4/3/

//Sample data (see fiddle for complete sample) 
[{ 
     "Client":"", 
     "Date":"2011-06-01", 
     "ProductNumber":"5K190", 
     "ProductName":"CABLE USB", 
     "ProductFamily":"FamilyC", 
     "Status":"OPEN", 
     "Units":5000, 
     "Value":5150.0, 
     "ShippedToDestination":"CHINA" 
}] 


var productDataSource = new kendo.data.DataSource({ 
    data: dr, 
    //group: { 
    // field: "ProductFamily", 
    //}, 
    sort: { 
    field: "ProductFamily", 
    dir: "asc" 
    }, 
    //aggregate: [ 
    //  { field: "Value", aggregate: "sum" } 
    //], 
    //schema: { 
    // model: { 
    // fields: { 
    //  ProductFamily: { type: "string" }, 
    //  Value: { type: "number" }, 
    // } 
    // } 
    //} 
      }) 

$("#product-family-chart").kendoChart({ 
     dataSource: productDataSource, 
     //autoBind: false, 
     title: { 
      text: "Product Family (past 12 months)" 
     }, 
     seriesDefaults: { 
      overlay: { 
      gradient: "none" 
      }, 
      markers: { 
      visible: false 
      }, 
      majorTickSize: 0, 
      opacity: .8 
     }, 
     series: [{ 
      type: "column", 
      field: "Value" 
     }], 
     valueAxis: { 
      line: { 
      visible: false 
      }, 
      labels: { 
      format: "${0}", 
      skip: 2, 
      step: 2, 
      color: "#727f8e" 
      } 
     }, 
     categoryAxis: { 
      field: "ProductFamily" 
     }, 
     legend: { 
      visible: false 
     }, 
     tooltip: { 
      visible: true, 
      format: "Value: ${0:N0}" 
     } 
     });​ 
+0

私はかなりのグラフを含むダッシュボードを作成しようとしています。この究極の応答性を与えるために、すべてのデータを含む1つの大きなjsonファイルを作成することをお勧めしますが、このアプローチは不可能です。このファイルはすべてのグラフ間で共有できますが、各グラフの構造が非常に異なるため、グラフごとに1つのjsonファイルを作成する必要があります。 – jqIndy

+0

これはあなたを助けるかもしれないhttp://jsfiddle.net/v8tsQ/42/ – SimonGates

+0

この1つの問題は、同じ四半期の同じ会社のjsonに別のアイテムがある場合、これはバーに追加の列として表示されますチャート。この合計を既存の2011Q2に追加するには、1 + 145 = 146の合計で1つの列しか表示されないようにするにはどうすればよいですか? { "たCompanyId":201、 "GROUPNAME": "コンステレーション"、 "セクション名": "CCLF"、 "FindingQuarter": "2011Q2"、 "定義するDataElement": "トータル"、 "DataValueは" : ""、 "合計":145 }、 – jqIndy

答えて

2

剣道UIチャートは、グループの集合体への結合をサポートしていません。少なくともまだ。それはグループごとに計算していますので、集計定義を移動し

  1. group: { 
        field: "ProductFamily", 
        aggregates: [ { 
         field: "Value", 
         aggregate: "sum" 
        }] 
    } 
    
  2. を変更ハンドラで集計値の抽出:

    var view = products.view(); 
    var families = $.map(view, function(v) { 
        return v.value; 
    }); 
    var values = $.map(view, function(v) { 
        return v.aggregates.Value.sum; 
    }); 
    
  3. 私の提案はにあります

  4. グループとカテゴリを手動でバインド:

    series: [ { 
        type: "column", 
        data: values 
    }], 
    categoryAxis: { 
        categories: families 
    } 
    

作業するデモは、ここで見つけることができます:http://jsbin.com/ofuduy/5/edit

私はこのことができます願っています。

+0

これは素晴らしい機能です。本当にありがとう! – jqIndy

関連する問題