[Solved] Two-ring donut with remote data

[Jaesoon]

Hi,

I'm having some trouble getting the donut chart to work with multiple series when binding from remote data. Here's my code:

$("#projectTimeBreakdownDonutChart").kendoChart({
   title: {
       text: "Time by Team",
        position: "bottom"
    },
    legend: {
        visible: false
    },
    seriesDefaults: {
        type: "donut",
        overlay: {
            gradient: "none"
        },
        labels: {
            visible: false
        }
    },
    series: [{
        field: "data",
        categoryField: "name"
    }]
});

And here's the json I'm getting back from my controller

[{
    "name":"Duration",
    "data":[{
        "category":"Team 1",
        "value":5000
    },{
        "category":"Team 2",
        "value":130
    },{
        "category":"Team 3",
        "value":3
    },{
        "category":"Team 4",
        "value":8
    }]
}, {
    "name":"Amount",
    "data":[{
        "category":"Team 1",
        "value":72000
    },{
        "category":"Team 2",
        "value":18000
    },{
        "category":"Team 3",
        "value":300
    },{
        "category":"Team 4",
        "value":670
    }]
}]

Thanks

[Jaesoon]

Do I need to specify two series when initializing the kendoChart? I'm just not sure how to configure them.

[Jaesoon]

To answer my own question, I joined the data together into one array and added a type field to each element. I then grouped the datasource by that type field:

Code:

function createDonut() {
    $("#donutChart").kendoChart({
        title: {
            text: "My donuts",
            position: "bottom"
        },
        legend: {
            visible: false
        },
        seriesDefaults: {
            type: "donut",
            overlay: {
                gradient: "none"
            },
            labels: {
                visible: false
            }
        },
        series: [{
            field: "value",
            categoryField: "category"
        }],
        tooltip: {
            visible:true
        }
    });
}

Json:

[{
    "type":"Duration",
    "category":"Team 1",
    "value":5000
},{
    "type":"Duration",
    "category":"Team 2",
    "value":130
},{
    "type":"Duration",
    "category":"Team 3",
    "value":3
},{
    "type":"Duration",
    "category":"Team 4",
    "value":8
},{
    "type":"Amount",
    "category":"Team 1",
    "value":72000
},{
    "type":"Amount",
    "category":"Team 2",
    "value":18000
},{
    "type":"Amount",
    "category":"Team 3",
    "value":300
},{
    "type":"Amount",
    "category":"Team 4",
    "value":670
}]

Datasource:

function getDonutDataSource() {
    return new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Home/GetDonutData?id=" + getId(),
                dataType: "json",
                cache: false
            }
        },
        group: {
            field: "type"
        }
    });
}

 

Working well now

[Jaesoon]

A new problem: how can I style the labels for each series when there is only one defined in the initialization?

[Jaesoon]

I read that when binding from a DataSource, only one series can be accepted. So instead I created an updateDonut() function and perform a post to get the series data and then use setOptions() to assign the series. I have changed the returning JSON back to how it was in my first post. Here is the updated code:

function updateDonut() {
    $.post("/Home/GetDonutData?id=" + getId(), function (result) {
        var donutChart = $("#donutChart").data("kendoChart");
        var series1 = result[0];
        var series2 = result[1];

        donutChart.setOptions({
            series: [{
                name: series1.name,
                data: series1.data,
                labels: {
                    visible: false
                }
            },{
                name: series2.name,
                data: series2.data,
                labels: {
                    visible: true,
                    position: "outsideEnd",
                    template: "#=category#",
                    align: "column"
                }
            }]
        });
    });
}

It's now working exactly as I want it to.

[Iliana Dyankova]

Hi Jaesoon,

You could define multiple series when initializing the chart too (documentation link). Take a look at this dojo which demonstrates a possible implementation.

Regards,
Iliana Nikolova
Telerik