Kendo UI BarChart Data Grouping

Question

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 fiddle 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.

In this example without the grouping it shows multiple columns for FamilyA. Can this be grouped into ONE column and the values aggregated regardless of the amount of data?

So the result will show one column for FamilyA of Value 4850 + 4860 = 9710 etc.?

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?

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}"
        }
      });​

Answer 1

The Kendo UI Chart does not support binding to group aggregates. At least not yet.

My suggestion is to:

1. Move the aggregate definition, so it's calculated per group:

   group: {
       field: "ProductFamily",
       aggregates: [ {
           field: "Value",
           aggregate: "sum"
        }]
    }
   

2. Extract the aggregated values in the change handler:

   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. Bind the groups and categories manually:

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

Working demo can be found here: http://jsbin.com/ofuduy/5/edit

I hope this helps.