jQuery flot multi bar chart side by side

Question

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 1

Found 2 mistakes in your fiddle

jquery.flot.orderBars.js link is wrong.
Removed order:1 and 2 from series data

updated your series default object with this

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

Check the updated fiddle

Hope this helps.

jQuery flot multi bar chart side by side

Sign up