title: Kendo UI BarChart Data Grouping
body: <p>Not sure if this is possible. In my example I am using json as the source but this could be any size. In my example on <a href="http://jsfiddle.net/jqIndy/ZPUr4/3/" rel="nofollow">fiddle</a> I would use this data in a shared fashion by only binding two columns ProductFamily (xAxis) and Value (yAxis) but I would like to be able to group the columns by using an aggregate.</p>
  
  <p>In this example without the grouping it shows multiple columns for FamilyA. <strong>Can this be grouped into ONE column and the values aggregated regardless of the amount of data?</strong></p>
  
  <p>So the result will show one column for FamilyA of Value 4850 + 4860 = 9710 etc.?</p>
  
  <p>A problem with all examples online is that there is always the correct amount of data for each category. Not sure if this makes sense?</p>
  
  <p><a href="http://jsfiddle.net/jqIndy/ZPUr4/3/" rel="nofollow">http://jsfiddle.net/jqIndy/ZPUr4/3/</a></p>
  
  <pre><code>//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}"
          }
        });​
  </code></pre>