[FIXED] How to sort order highchart pie jasperstudio by slice value min to max

Issue

I am working on jasper but i don't want to sort the data in the query as many other element of the report using the same query.

So i would like to sort it on the pie chart itself as example on this fiddle http://jsfiddle.net/highcharts/3bDMe/1/. How can it be done without button click? I meant as the chart load it automatically sort by slice value ascending.

$(function () {
$(document).ready(function () {

    // Build the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       6.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    88.5],
                ['Opera',     26.2],
                ['Others',   30.7]
            ]
        }]
    });

    $('#sort').click(function() {
        chart.series[0].data.sort(function(a, b) {
            return b.y - a.y;
        });

        var newData = {};

        for (var i = 0; i < chart.series[0].data.length; i++) {
            newData.x = i;
            newData.y = chart.series[0].data[i].y;
            newData.color = Highcharts.getOptions().colors[i];

            chart.series[0].data[i].update(newData, false);

            // Workaround:
            chart.legend.colorizeItem(chart.series[0].data[i], chart.series[0].data[i].visible);
        }

        chart.redraw({ duration: 2000 });
    });
});

});

Solution

In the load event you can create a new data array with sorted values and use setData method to apply changes:

chart: {
    ...,
    events: {
        load: function() {
            var data = this.series[0].data,
                newData = [];

            data.forEach(function(point) {
                newData.push({
                    y: point.y,
                    name: point.name
                })
            });

            newData.sort(function(a, b) {
                return a.y - b.y;
            });

            this.series[0].setData(newData);
        }
    }
}

---

Live demo: http://jsfiddle.net/BlackLabel/6vzd8ak7/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData

Answered By - ppotaczek

Answer Checked By - Gilberto Lyons (PHPFixing Admin)