Legend order for pie chart

[Frank]

I have a couple of pie charts on a screen. I have some angular code that populates them.

$scope.SetPieChart = function (data, container) {
        var dataSource = new kendo.data.DataSource({
            data: data,
            //create group and aggregates
            group: {
                field: "type",
                aggregates: [
                    { field: "size", aggregate: "sum" }
                ]
            }
        });
        //read dataSourcePeers to load the data
        dataSource.read();

        var series = [],
            items = dataSource.view(),
            length = items.length,
            item;
        //create the chart series
        for (var i = 0; i < length; i++) {
            item = items[i];
            series.push({ category: item.value, value: item.aggregates.size.sum })
        }

        container.kendoChart({
            theme: "metro",
            legend: {
                position: "custom",
                offsetX: 10,
                offsetY: 260
            },
            chartArea: { background: "transparent" },
            title: { text: " ", margin: { bottom: -240 } },
            dataSource: dataSource,
            seriesDefaults: {
                labels: {
                    visible: false,
                    background: "transparent",
                    template: "#= category #: \n #= value#%"
                },
                type: "pie"
            },
            chartArea: {
                margin: 1,
                height: 450 /* add this option */
            },
            series: [{ data: series }],
            tooltip: {
                visible: true, format: "{0:N1}%"
            }
        });

    }

 

 The post event that gets the data returns the data in the order I want to display in the chart but for some reason when it gets displayed on the screen it is alpha order.  Is there something that is forcing the alpha sort? Is there a way to keep the order which is in the returned json

 

[Iliana Dyankova]

Hi Frank,

I replied to the same questions in your other thread, however I am pasting my answer here, too, so the other users who are following this thread could read it:

By design, the grouping operation works by sorting the data. In order to achieve the expected result I would suggest the following approach:
- Add an additional field which keeps the sort order and group the dataSource by it;
- Use legend.labels.template to display different text.
For your convenience I prepared a dojo which demonstrates a possible implementation - please check it and let me know if this fits the current requirements or I can assist you further. I wish you a great day!

Regards,
Iliana Nikolova
Telerik