JQuery flot multi bar chart side by side

Question

I am using jQuery chart with category plugins to create diagrams. I want to build two bars side by side for each month using this code:

$.plot(".chart", [ { label: "Neue Mitglieder", data: data, order: 1 }, { label: "Fällige Kündigungen", data: data2, order: 2 } ], { series: { bars: { show: true, barWidth: 0.5, align: "center", } }, xaxis: { mode: "categories", ticks: [[0,"Jan"], [1,"Feb"], [2,"Mär"], [3,"Apr"], [4,"Mai"], [5,"Jun"], [6,"Jul"], [7,"Aug"], [8,"Sep"], [9,"Okt"], [10,"Nov"], [11,"Dez"]], tickLength: 1, }, grid: { hoverable: true, }, yAxis: { allowDecimals:false, } }); 

And what is my result:

Fonts still overlap, but I want my result to look like

Does anyone know what happened to my code? I thought the order option would fix this problem, but it didn’t change anything.

Here's jsfiddle: http://jsfiddle.net/buk8mhy8/

Answer 1

Found 2 errors in fiddle

• Link
• jquery.flot.orderBars.js is invalid.
• Remote order: 1 and 2 of serial data

• updated your default default object with this

   series: { bars: { show: true, barWidth: 0.15, order: 1 } } 

  Check updated script

Hope this helps.

Answer 2

I tried using the orderBars plugin, but the result was not what I expected. So what I did:

• Use category plugin
• Define left and right alignment

obs: it only works with two stripes side by side.

The code:

 var data1 = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ]; var data2 = [ ["January", 1], ["February", 5], ["March", 6], ["April", 3], ["May", 37], ["June", 39] ]; $.plot($("#placeholder"), [{ data: data1, bars: { show: true, barWidth: 0.2, align: "left", } }, { data: data2, bars: { show: true, barWidth: 0.2, align: "right", } } ], { xaxis: { mode: "categories", tickLength: 0 } } ); 

Result: