6

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

enter image description here

Faiz
  • 5,331
  • 10
  • 45
  • 57

2 Answers2

6

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/

Ryley
  • 21,046
  • 2
  • 67
  • 81
  • Thanks... I have some other issues now though this OrderBars seems to fix some.. :) – Faiz Dec 04 '13 at 07:44
  • It may be a good idea to implement a plugin that does not change the x values of bars... – Faiz Dec 05 '13 at 10:52
0

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.

user3547059
  • 3
  • 1