Flot Bar Graph Align Bars with X-Axis Labels

Question

Hello I am trying to plot a bar chart with 31 days data. However when I plot it, the label for each data is not directly in the center below its bar, when i set the bars to

align: "center"

, the first bar and last bar gets cut into half.

Here is the jsfiddle: http://jsfiddle.net/3T6qc/

How do I set it so that i see the full bars and have the labels directly below in the center? Take note that I am using flot as the plotting library.

Answer 1

Hey Here are some points to be noted about your fiddle.

1. You forgot to use axis label plugin in your example.Flot doesnt have inbuild support axis label.You need to use third party plugin for it. Refer Flot plugin for axis label

2. For issue about your bars getting cut at edges you can refer Bar chart with align center Following updated code worked for me

}

if (graphMode == "month") {
$( "#hSlider" ).slider( "option", "min", 1.75 ); //add 0.75 offset
$( "#hSlider" ).slider( "option", "max", 31.75 );
$( "#hSlider" ).slider( "option", "values", [ 1, 31 ] );
for (var i = 1; i <= 31; i++) {
    if (i < day)
    {
        d.push([ i, getRandomInt(1200, 1800) ]);
    }
    else
    {
        d.push([ i, 0]);
    }
}
}

So you need to update your code a little to add offset to your bar width.

Answer 2

This is a known issue; you'll need to work around it by adjusting the axis min and max. For example, if you have ticks at 0, 1, 2, you will want to set the min to -0.5 and the max to 2.5 to account for the bar width and centering. This should be easy given that you already have sliders to specify those values.