CODEWITHSUNDEEP
javascriptjqueryflotpie-chart
Mudit
Mudit

Reputation: 21

Pie charts in Flot library - How to order Legend in Descending order?

I have been using Flot js library to create Pie charts. But i am not able to figure out how to arrange legends in flot charts in descending order according to a variable percentage that i am calculating. This is my code.

legend: {
     show: true,
     noColumns: 1,
     labelFormatter: function(label, series) {
          var percent = Math.round(series.percent);
          var number= series.data[0][1]; 
          return("<div class=servicePieLabel val="+percent+"><span class=labelTitle>"+label+"</span><span class=labelPercent>"+ percent + '%</span></div>');
     }
 },

Upvotes: 1

Views: 1156

Answers (1)

Mark
Mark

Reputation: 108512

flot does provide a sorted property for the legend. You can set it to a custom function for sorting but flot only passes the item's label and color to it (not the data), so it ends up not very useful for what you need.

Without that function specified, flot will plot in series item order. My recomendation for you would be to simply presort your data into the proper order.

Given data like:

var d_pie = [
    { label: "Series1",  data: 10},
    { label: "Series2",  data: 30},
    { label: "Series3",  data: 110},
    { label: "Series4",  data: 70},
    { label: "Series5",  data: 80},
    { label: "Series6",  data: 20}
];

Sort descending by data value:

 d_pie.sort(function(a, b){
    return a.data < b.data ? 1 : -1;
 });

Here's an example fiddle.

Upvotes: 2

Related Questions