This is a migrated thread and some comments may be shown as answers.

Donut in donut charts

2 Answers 53 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Egor
Top achievements
Rank 1
Egor asked on 10 Aug 2017, 11:32 AM

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?

2 Answers, 1 is accepted

Sort by
0
EZ
Top achievements
Rank 2
answered on 11 Aug 2017, 07:45 PM

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

0
Georgi
Telerik team
answered on 14 Aug 2017, 08:52 AM
Hi Egor,

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



Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Charts
Asked by
Egor
Top achievements
Rank 1
Answers by
EZ
Top achievements
Rank 2
Georgi
Telerik team
Share this question
or