Flot - legends and stacked stripes are reversed

Question

I ran into another problem with small stacks: when filling out the chart, the fleet adds legend records from top to bottom and stacks the columns from bottom to top. Thus, the legend is ordered exactly from the bars.

The fleet API allows you to sort labels in the order in which they were added, in alphabetical order, or by providing a custom sort function. I tried to provide a sort function that always returns -1, so the original sort will be canceled, but for some reason, the sorted parameter does not seem to be evaluated at all when using stack bars. At least I didn’t try anything there ( ascending , descending , false , my own function) influenced the actual legend.

I put together a test case at http://jsfiddle.net/YvGZu/1/ that illustrates the problem (s).

Edit: after a few more tests ... could it be that sorting the legends is broken all together?

Answer 1

I accidentally came across the same question as you for several days. After a short haircut, I realized that the commit to handle sorting legends was fairly recent (July 2012) and was not included in the version of jquery.flot.js that I used.

Checking the fleet resource on your Fiddle, it seems that this is true for you. If you upgrade your flot js file to one that includes a sorting algorithm , your problem will most likely be resolved, like mine. (Well, I manually fixed it, as I had other experimental changes.)

I am going to assume that you will encounter the same obstacle as mine, since the sort code, since it exists, is sorted only in alphabetical order or with a comparer that can only check the label text and color code. This was not enough for me - I wanted to assign a server of arbitrary sort order. To do this, I added a sort order line string for my serial labels:

 label: '<a class="hiddenOrder">2</a>foo' 

And then create those a blocks in the Flot placeholder to hide (edit: you also need a style to apply tooltips that are not contained in the Flot placeholder).

 #flotPlaceholder a.hiddenOrder, #flotTooltip a.hiddenOrder {display:none;} 

I forked your fiddle and included my ordering method so you can try, but unfortunately it looks like my links to GitHub resources aren’t working in fiddle. However, you must be able to ride it in place.

Good luck