Using Kendo UI Complete for ASP.NET MVC, version: 2013.3 1119 (Nov 20, 2013)...

If I have this bit of code:

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

I get this chart:

As you can see - Status 10 and 20 have got a value of 1 and Status 200 a value of 2.

Great, but what I actually want is exactly the same thing in a pie chart (so, a chart with 3 pie slices, 2 of which are exactly the same size and one that is 2 times as big as the rest).

I therefore thought to myself, all I need to do is just set type: "pie" like so:

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

But that produced this chart:

You can see that Status 200 is repeated and the value is determining the size of the slices.

So, here is my question:

How can I create a pie chart that looks like the picture below but which is bound to the data source in the first code snippet above?

Incidentally, the reason I do not want to change the data source is that I wish to share it with a grid.

Using Kendo UI Complete for ASP.NET MVC, version: 2013.3 1119 (Nov 20, 2013)...

If I have this bit of code:

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

I get this chart:

As you can see - Status 10 and 20 have got a value of 1 and Status 200 a value of 2.

Great, but what I actually want is exactly the same thing in a pie chart (so, a chart with 3 pie slices, 2 of which are exactly the same size and one that is 2 times as big as the rest).

I therefore thought to myself, all I need to do is just set type: "pie" like so:

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

But that produced this chart:

You can see that Status 200 is repeated and the value is determining the size of the slices.

So, here is my question:

How can I create a pie chart that looks like the picture below but which is bound to the data source in the first code snippet above?

Incidentally, the reason I do not want to change the data source is that I wish to share it with a grid.

• javascript
• charts
• kendo-ui
• kendo-dataviz

1 Answer 1

What you are trying to do here is to group a shared DataSource and have it only affect one widget. Furthermore, Kendo UI will return a grouped object when you group it. The Pie chart is not interested in these objects, but rather the count of the items that each of these group objects contains. We just need to get the data in the right format.

So you have your original DataSource (which I have extracted since it's shared with another widget). When that DataSource changes, you want to populate a second one - one that you can group without affecting the grid.

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

The second DataSource (chartData) is grouped, and when it changes, it populates an array, constructing objects that the pie chart can actually understand.

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

And then just bind your pie chart to that array

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

Working example: http://jsbin./EKuxORA/1/edit