CODEWITHSUNDEEP
jqueryjqplot
The One and Only ChemistryBlob
The One and Only ChemistryBlob

Reputation: 7884

jqPlot Bar Graph is Not Centered (Too Far to Right)

I am new to jqPlot so please don't crush me for the simple question.

I followed the documentation for jqPlot to the point where I can generate and customize a simple 2-category bar graph (FYI - bars don't sum to 100% :) ). Here is the code for my javascript file which renders the graph (target div = GraphContainer):

$.jqplot('GraphContainer',  [[55, 18.6]], {
    title: 'Correct vs. Incorrect',
    axes:{
        xaxis:{tickOptions: {show: false}}
    },
    seriesColors:['#00FF00', '#FF0000'],
    series:[{renderer:$.jqplot.BarRenderer}],
    seriesDefaults: {rendererOptions: {barWidth: 50}}
});

and here is how it renders:

here

You may be able to see my small-but-significant issue right away. The bars are not centered; in my opinion they are too far to the right. I read through the options documentation found here: jqPlot options

I did not see anything in the documentation that describes a horizontal "translation" of the bars to the left. Interestingly, I tried to switch to barDirection: 'horizontal' under seriesDefaults and this led to essentially the same issue but in the vertical direction (bars too far up):

enter image description here

I tried to increase the width of my target div but this exacerbated the issue (looks even worse). I did come up with a hack solution though; I added a third bar of height = 0 and decreased the barWidth a tad, which pushed the bars to the left (relative to the first graph above) as shown in the following image (which is a step in the right direction; playing with the bar width and padding may allow me to tweak):

enter image description here

Does anyone know how to address this "centering" issue for bar graphs on jqPlot? I've seen a couple of other alignment posts on this site (e.g., this one) but so far nothing which has helped my specific situation.

Upvotes: 1

Views: 998

Answers (1)

Steve P
Steve P

Reputation: 19397

You are taking what is categorical/ordinal data and fitting it to a linear/numeric x axis (jqPlot gives you this unless you specify otherwise). jqPlot has some default padding logic for numeric axes, which I think is the source of the misalignment. On your horizontal bars screenshot you can see that it's taking your values as 1.0 and 2.0. I assume the default padding logic starts the axis at zero and adds 25% to last value.

Theoretically you could set min/max of the axis to avoid this. But I think a more straightforward solution is to use a category axis ($.jqplot.CategoryAxisRenderer) for x which simply places them in order and doesn't try to do any numeric calculation or padding of the x scale.

The code below is based on the Bar Colors Example from the jqPlot site and modified based on your example:

var graphData = [['Correct', 55],['Incorrect', 18.6]];

$('#GraphContainer').jqplot([graphData], {
    title: 'Correct vs. Incorrect',
    seriesColors:['#00FF00', '#FF0000'],
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {
            varyBarColor: true
        }
    },
    axes:{
        xaxis:{
            renderer: $.jqplot.CategoryAxisRenderer
        }
    }
});

See working JSFiddle example here:

http://jsfiddle.net/3y9ZU/3/

Upvotes: 1

Related Questions