flot - legend entries and stacked bars have reverse order

Question

I ran across another small stacked bars issue: When filling the plot, flot adds the legend entries top-down and stacks the bars bottom-up. This way the legend is ordered exactly reverse from the bars.

The flot API allows for sorting the labels in the order they were added, alphabetically, or by providing a custom sorting function. I've tried providing a sorting function that always returns -1, so that the original sorting would be reversed but for some reason the sorted option seems not to be evaluated at all when using stacked bars. At least nothing I tried there (ascending, descending, false, function of my own) had any effect on the actual legend.

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

Edit: After some more testing ... could it be that legend-sorting is broken all together?

Answer 1

I coincidentally ran into the same issue as you within a couple of days. After a bit of hairpulling, I realized that the commit to handle legend sorting was quite recent (July 2012) and was not included in the version of jquery.flot.js that I was using.

From inspecting the flot resource on your Fiddle, it appears the same is true for you. If you update your flot js file to one that includes the sorting algorithm, your issue will likely be resolved, as mine was. (Well, I manually patched, since I had other experimental changes.)

I'm going to guess that you will next encounter the same roadblock as me, which was that the sorting code as it exists only sorts alphabetically, or with a comparitor that can only examine the label text and colour code. That was not good enough for me -- I wanted to assign an arbitrary sort order server side. In order to accomplish this, I added a hidden sort order string to my series labels:

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

And then style those a blocks in the Flot placeholder to hidden (edit: also need the style to apply to tooltips, which are not contained within the Flot placeholder).

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

I forked your fiddle and included my ordering technique so you could try it out, but unfortunately it looks like my resource links to GitHub aren't working within the fiddle. You should be able to get it rolling locally, though.

Good luck!