Donut in donut charts

[Egor]

Hi everyone! Mission is to make donut in donut using local data. I can make one donut by using local, for example:

var data = [{
                "category": "2000",
                "value": 100
            }, {
                "category": "2001",
                "value": 250
            }];

 

dataSource: {
                    data: data
                },
                series: [{
                    type: "donut",
                    field: "value",
                    categoryField: "category"
                }],

how i can insert another donut?

[EZ]

You can use grouping in the dataSource.  Given data like this:

var data =   [{
  "series": "product 1",
  "category": "2000",
  "visibleInLegend": true,
  "value": 100,
},{
  "series": "product 1",
  "category": "2001",
  "visibleInLegend": true,
  "value": 250,
},{
  "series": "product 2",
  "category": "2000",
  "visibleInLegend": false,
  "value": 120,
},{
  "series": "product 2",
  "category": "2001",
  "visibleInLegend": false,
  "value": 230,
}];

 

Then create the chart:

 

$("#chart").kendoChart({
    theme: "Fiori",
    dataSource: {
        data: data,
        sort: {
            field: "category",
            dir: "asc"
        },
        group: {
            field: "series"
        }
    },
    seriesDefaults: {
        type: "donut",
        startAngle: 150
    },
    series: [{
        field: "value",
        categoryField: "category",
        visibleInLegendField: "visibleInLegend",
        padding: 10
    }],
    tooltip: {
        visible: true,
        template: "#= dataItem.category #: #= value #% (#= dataItem.series #)"
    }
});

 

DEMO

[Georgi]

Hi Egor,

Possible solution is to use series in order to nest donut charts:

• http://dojo.telerik.com/OguVOH

Regards,
Georgi
Progress Telerik