4

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?

Meike
  • 85
  • 5

1 Answers1

5

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!

Brendan Moore
  • 1,131
  • 7
  • 13
  • You were exactly right! That'll teach me to read documentation locally instead of on github :-/ Thank you also for the `hiddenOrder` hint. Works like a charm! – Meike Oct 04 '12 at 07:56
  • I had a minor issue with the `hiddenOrder` technique, with the numbers appearing in the tooltips I added on hover over the plot. This is because the tooltip `div` is absolutely positioned within the `body` tag, and is not a descendant of the flot `#placeholder`. Solution was just to make sure you also apply the style within the tooltip div, too: `#placeholder a.hiddenOrder, #tooltip a.hiddenOrder {display:none;}` – Brendan Moore Oct 04 '12 at 18:52
  • Thanks for this answer, although I ended up manually merging just the "insertLegend" function from jquery.flot.js. Updating the whole file caused some alignment and presentation problems for me. – Ed Norris Oct 12 '12 at 18:22