Florian Sauerwein Florian Sauerwein - 2 years ago 297
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: {

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download