Bar width problem in flot

Question

I have a chart, that displays bars which represent rainfall in 24h. Now the first problem I had, was the default 1px width for bars in flot, see this example:

I searched for a solution and found that specifing barwidth like this:

bars: { 
        show: true,
        barWidth : 60*60*1000 //1h
    }

solves the problem. Now that actually works, but with one bad result. On my example (chart that displays 24 rainfall discretly every one hour) now this happens:

As you can see from first example, where bars are 1px width, the time goes from 13:00 previous day to 13:00 next day. Now when bar width are fixed, the time goes from 13:00 to 14:00 for some reason. Now I have tried diffrent barWidth setting, for example 50*60*1000, but that does not scale right plus the margin starts to appear beetwen each bars.

Now I would like to know how to fix this issue, that the timeline would go as in first example and the bars would have 1 hour width?

Answer 1

The problem was in filling data with php to flot graphs. I overlooked the wrong suming of data and then had a condition, which added to php array the time. So at the end it added extra 1 hour. So the barWidth : 60*60*1000 in my case was the right thing to go.

Answer 2

Well, the chart x-axis is being drawn in such a way so that, if there were any bar to show at 13:00 (the maximum value), it would be able to show it. This isn't really a Flot thing, it's just a consequence of having wider bars. If you want it to actually not go that far, you could use the "min" and "max" options on the x-axis to set this. However, if you did that, and there was any data at the final 13:00 to show, it would not be able to show it (because with the wider bar there isn't enough room).