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" }
});

Kibbutz

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/

Millian

Thanks... I have some other issues now though this OrderBars seems to fix some.. :) – Kibbutz

It may be a good idea to implement a plugin that does not change the x values of bars... – Kibbutz

Answer 2

I've just solved an issue with the ORDER property : it does not work if one of the serie has a NULL value. Indeed, I was using NULL value to avoid a get a tiny (0) line for the serie, but in this case the following order of the stacks are completely disturb. By setting a 0 (ZERO) instead of NULL : all is okay.

Note : the same problem with or without the "orderBars plugin".

Hope this will help.

Explain