How can I graph side-by-side (multiple series) bar graphs within a category using flot's categories plugin?

Question

I am using flot.js and flot's categories plugin to create bar charts that use categories instead of a numeric value for x-axis ticks.

It works splendidly when I use only one series: http://jsfiddle.net/tFy46/1/.

However, when I use more than one series, the results are stacked on top of each other rather than side-by-side.

My code:

var graphCanvas = $('#graph-canvas'),
    graphData = [
        {
            "color": "#f00",
            "data": [
                ["1st Nov to 3rd Nov", 5.304752, 4.04044192]
            ]
        },
        {
            "color": "#0f0",
            "data": [
                ["1st Nov to 3rd Nov", 8.80990656, 3.86548928],
                ["11th Nov to 15th Nov", 37.89327872, -2.1734158399999997]
            ]
        }
    ],
    graphOptions = {
        legend: {
            show: false
        },
        series: {
            bars: {
                align: 'center',
                fill: 0.7,
                show: true
            }
        },
        xaxis: {
            mode: 'categories'
        }
    };
$.plot(graphCanvas, graphData, graphOptions);

http://jsfiddle.net/tFy46/

(This has been asked before at how to draw multiple bar charts grouped by category with flot js, but the accepted answer of "use the flot 'categories' plugin" is not a helpful answer.)

Answer 1

Is don't "use the flot 'categories' plugin" a helpful answer? :)

I'd drop it and just label the data myself (this is all the plugin does under the hood anyway):

graphData = [
    {
        "color": "#f00",
        "data": [
            [0, 5.304752, 4.04044192]
        ]
    },
    {
        "color": "#0f0",
        "data": [
            [0.5, 8.80990656, 3.86548928],
            [1.5, 37.89327872, -2.1734158399999997]
        ]
    }
],
graphOptions = {
    legend: {
        show: false
    },
    series: {
        bars: {
            align: 'center',
            fill: 0.7,
            show: true,
            barWidth: 0.45
        }
    },
    xaxis: {
        ticks: [[0.25,"1st Nov to 3rd Nov"],[1.5,"11th Nov to 15th Nov"]]
    }
};

Updated fiddle.