Florian Sauerwein Florian Sauerwein - 5 months ago 72
Javascript Question

jQuery flot multi bar chart side by side

I'm using jQuery plot with the categories plugin to create charts.
I want to plot two bars side by side for each month with 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 that's my result:

plotting a chart

The bars are still overlapping but I want my result to look like

Correct chart

Does anyone know what's wrong with my code? I thought the "order" option will fix that problem, but it didn't change anything.

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

Answer

Found 2 mistakes in your fiddle

  1. jquery.flot.orderBars.js link is wrong.
  2. Removed order:1 and 2 from series data
  3. updated your series default object with this

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

    Check the updated fiddle

Hope this helps.

Comments