Two-ring donut with remote data

6 posts, 0 answers
  1. Jaesoon
    Jaesoon avatar
    51 posts
    Member since:
    Oct 2012

    Posted 16 May Link to this post

    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

  2. Jaesoon
    Jaesoon avatar
    51 posts
    Member since:
    Oct 2012

    Posted 16 May Link to this post

    Do I need to specify two series when initializing the kendoChart? I'm just not sure how to configure them.
  3. Kendo UI is VS 2017 Ready
  4. Jaesoon
    Jaesoon avatar
    51 posts
    Member since:
    Oct 2012

    Posted 16 May Link to this post

    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

  5. Jaesoon
    Jaesoon avatar
    51 posts
    Member since:
    Oct 2012

    Posted 16 May Link to this post

    A new problem: how can I style the labels for each series when there is only one defined in the initialization?
  6. Jaesoon
    Jaesoon avatar
    51 posts
    Member since:
    Oct 2012

    Posted 17 May in reply to Jaesoon Link to this post

    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.

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 18 May Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready