Unable to align bars using jQuery Flot orderBars with errorBars

Question

I'm trying to have a multiple series bar chart (using orderBars) where the middle series needs to show errorBars for variable sampling. I can't seem to be able to get the bars to align properly in the grid and I can't figure out how to make it work. Right now up to where I got it done, the left & right bars are aligned properly, but the middle bar jumps up and isn't properly aligned.

This is my current coding:

$(function() {
    var figure0 = [{
        label: "Cost 1", 
        data: [[1,5229.7], [2,4496.8], [3,4307.0], [4,4205.6], [5,3809.7]],
        bars: {
            order: 0
        }
    }, {
        label: "Cost 2", 
        data: [[1,4973.5,500], [2,3380.4,100], [3,3105.7,100], [4,3000.8,100], [5,2939.0,100]],
        points: {
            radius: 0,
            errorbars: "y", 
            yerr: {
                show: true,
                upperCap: "-",
                lowerCap: "-",
                radius: 5,
                color: "black"
            }
        },
        bars: {
            align: "center",
            order: 1
        }
    }, {
        label: "Cost 3", 
        data: [[1,1045.2], [2,881.8], [3,809.0], [4,850.8], [5,771.5]],
        bars: {
            order: 2
        }
    }];

    var formatFigure0 = {
        series: {
            stack: false,
            bars: {
                show: true,
                fill: true,
                barWidth: 0.2,
                lineWidth: 1,
                fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] }
            }
        },
        xaxis: {
            show: true,
            ticks: [1, 2, 3, 4, 5],
            tickDecimals: 0,
            tickSize: 1,
            axisLabel: "Quintiles"
        },
        yaxis: {
            show: true,
            tickDecimals: 0,
            tickSize: 1000,
            axisLabel: "Dollars (millions)"
        },
        legend: {
            show: true,
            position: "ne",
            margin: 10,
        },
        grid: {
            hoverable: false
        }
    };

    $.plot($("#figure0DIV"), figure0, formatFigure0);
});

Answer 1

The errorbars and orderBars plugins don't really work together. You can get them to work, but only easily when the errorbars are for the bars in the center:

To achieve this I had to make a few changes to your code (see this fiddle):

• Give all three bars the same alignment (when using orderBars you can get away with specifying no alignment at all)
• remove the third values from each datapoint in the second data series because this is interpreted as the offset (jump) for the bar (also remove the error bars here)
• add a new data data series for the errors (here you must have the three values per data point) with bars disabled (this "hack" is also used in the example on the Flot page)

Updated code (replacement for the original second data series):

}, {
  label: "Cost 2",
  data: [
    [1, 4973.5], [2, 3380.4], [3, 3105.7], [4, 3000.8], [5, 2939.0]
  ],
  bars: {
    order: 1
  }
}, {
  data: [
    [1, 4973.5, 500], [2, 3380.4, 100], [3, 3105.7, 100], [4, 3000.8, 100], [5, 2939.0, 100]
  ],
  points: {
    radius: 0,
    errorbars: "y",
    yerr: {
      show: true,
      upperCap: "-",
      lowerCap: "-",
      radius: 5,
      color: "black"
    }
  },
  bars: {
    show: false
  },
  lines: {
    show: false
  }
},

PS: If you want to get this to work with errorbars for all bars, then you have to calculate the x-offset for the bars yourself and change the x-values on the error data series accordingly.