Flot bar chart: bars overlapping on time axis issue

Question

I am trying to plot expense data against time axis, and I see the data bars are overlapping if they are showing data for the same date. I was expecting the graph to show the bars asjascent to each other but that is not the case. See a sample of code at this link...

$.plot($("#placeholder"), newJson, 
{
    bars: {
        show: 1,
        barWidth: 24 * 60 * 60 * 1000 * 10
    },
    xaxis: { mode:"time" }
});

Answer 1

Unfortunately, that isn't possible in flot without using some sort of plugin. I suggest you either use the stacking plugin to get a vertical stack, or an external plugin like orderBars.

In each of them, you add an option to each series specifying that it should be stacked/ordered. Or to the overall series options for bars if you want it to apply for everything.

$.plot($("#placeholder"), newJson, 
    {bars: { order:1, show: 1, barWidth: 24 * 60 * 60 * 1000 * 10 },
     xaxis: { mode:"time" }
});

Here's a working example: http://jsfiddle.net/ryleyb/A8yNV/7/