Pie Charts with Multiple Series

2 posts, 0 answers
  1. Joe Sugden
    Joe Sugden avatar
    53 posts
    Member since:
    Feb 2010

    Posted 11 Dec 2012 Link to this post

    Hi,

    I am trying to generate a Pie Chart with Multiple Series, a side by side comparison to be exact, but I am having issues.  When having two series on the Pie Chart it puts one pie on top of the other.  It is retrieving the data properly, it just isn't that helpful one on top of the other :)

    Below is my JavaScript that generates my report.

    Note: This will not work independently because kendoDataSource and  chartChangesTitle are defined elsewhere, but hopefully this is enough information to help.

    Thanks!
    $("#chartDetails").kendoChart({
                chartArea: {
                    margin: 0,
                    height: 550
                },
                theme: $(document).data("kendoSkin") || "BlueOpal",
                dataSource: kendoDataSource,
                title: {
                    text: chartChangesTitle
                },
                legend: {
                    visible: false,
                    position: "bottom"
                },
                seriesDefaults: {
                    labels: {
                        template: "#= kendo.format('{0} - {1:P}', category, percentage)#",
                        visible: true
                    },
                    stacked: false
                },
                series:[
                    {
                        type: "pie",
                        field: "InitialVolume",
                        categoryField: "AttributeValue",
                        name: "Initial"
                    },
                    {
                        type: "pie",
                        field: "ProposedVolume",
                        categoryField: "AttributeValue",
                        name: "Proposed"
                    }
                ],
     
                categoryAxis: {
                    field: "AttributeValue"
                },
                tooltip: {
                    visible: true,
                    template: "#= kendo.format('{0} - {1:P}', category, percentage)#"
                }
            });
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 11 Dec 2012 Link to this post

    Hi Joe,

    The pie chart does't support multiple series and we don't want to add extra logic to remove the other series. If you need to compare 2 pie series you need to add 2 pie charts side by side or if you want you can use donut chart(donut chart support multiple series).

    If you have more questions please don't hesitate to ask.

    Kind regards,
    Hristo Germanov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top