Need for help in jQuery.Flot legend formatting

Question

By default flot was generated legend block (table) like this ([#] - color box):

_________________
|_[#]_|_label_1_|
|_[#]_|_label_2_|
|_..._|_......._|

I wanna have horizontal legend like this:

______________________________.______________________________
|_[#]_|_My_long_label_1_______|_[#]_|_My_another_label_2____|
|_[#]_|_Trololo_label_here____|_[#]_|_hell,_yeah!___________|
.............................................................

I've been tried use labelFormatter() but have failed =(

I was added order number to each series element and can use it in labelFormatter() (like ...if(series.num % 2 == 0) { ...next row... }

Answer 1

Unfortunately, it doesn't work that way...

Flot only lets you manage how the labels look, not the structure of the whole legend itself. See the source for how it builds the table.

In there you'll notice that it just builds an html table and includes your labels in the appropriate cell.

Your best bet, given that information is to just make your own by hand, and suppress the generation of the default legend entirely (show:false). You could pretty easily take the insertLegend function from the flot source and make your own version of it that stacks them horizontally.

Answer 2

Try Following,

    legend: {
        show: true,
        noColumns:2,
        container:$("#graph_legend")

    }