How can I display a jqplot stacked bar graph when xaxis is text?

Question

I can't seem to get my jqplot bar graph to stack. I have the following code:

// Pass/Fail rates per request
$.jqplot('passFailPerRequestStats', [passRate, failRate], {
    title: 'Automation Pass Count Per Test Plan',
    //stackSeries: true,
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        renderOptions: { barMargin: 25 },
        pointLabels: { show: true, stackedValue: true }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: -30,
            fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer
        }
    }
});

This is successfully displaying a side by side bar graph for both series. However, when I try to stack them by uncommenting out the stackSeries: true, all bar graphs are taken off the graph (and all point labels are displayed on the Y axis labels).

What am I doing wrong?

score 8 · Accepted Answer · answered Oct 25 '11 at 14:56

You need to include barDirection in your rendererOptions object.

 rendererOptions: {
                barDirection: 'vertical',
                highlightMouseDown: true    
            }

Be sure to include the comma after the last bracket, if more options follow this. The stack requires the xaxis to be specified also.

Your data structure should look like this. with the leading number in each item indicating the X axis.

var s1 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]];
    var s2 = [[1,12],[2,11],[3,10],[4,9],[5,8],[6,7],[7,6],[8,5],[9,4],[10,3],[11,2],[12,1]];
    var s3 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]];
    var months = ['Jan', 'Feb', 'Mar', 'Apr',"May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    plot4 = $.jqplot('chartdiv', [
    s1,
    s2,
    s3
    ],

Use the months (or whatever text you want) in the ticks: option like so.

xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: months
            }

Both the bar direction and reformatting the values by using a numeric value for the x-axis (with a special tick value) fixed it! Thanks a lot! — KallDrexx, Oct 25 '11 at 19:23
Can you specify what special tick you have used because i am facing same problem and specifying Bar direction is not helping... — Usman Masood, Dec 05 '11 at 17:48

score 1 · Answer 2 · answered Jul 18 '13 at 14:07

I am adding this solution as I found the previously posted one to not work in my environment (although it did put me on the right track, so thanks @Jack) - The following worked for me on an ASP.NET MVC3 site running jqPlot 1.0.8r1250 with JQuery 1.9.1 and JQuery UI 1.1O.3:

For me adding render rendererOptions{...} turned out to be unnecessary.

I also found that stackedValue: true under the seriesDefaults > pointLabels node had no effect, instead I had to uncomment stackSeries: true under the root node.

My final code:

var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]];
var s2 = [[1, 12], [2, 11], [3, 10], [4, 9], [5, 8], [6, 7], [7, 6], [8, 5], [9, 4], [10, 3], [11, 2], [12, 1]];
var s3 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]];

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

$.jqplot('chartdiv', [s1, s2, s3], {
    title: 'Automation Pass Count Per Test Plan',
    stackSeries: true,
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        renderOptions: { barMargin: 25 }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: -30,
            fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: months
        }
    }
});

Also make sure you include the following links:

<script src="/.../jquery.jqplot.min.js" type="text/javascript"></script>
<script src="/.../jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="/.../jqplot.canvasTextRenderer.min.js" type="text/javascript"></script>
<script src="/.../jqplot.dateAxisRenderer.min.js" type="text/javascript"></script>
<script src="/.../jqplot.canvasAxisTickRenderer.min.js" type="text/javascript"></script>
<script src="/.../jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="/.../jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script>

Hope this of help to someone in the future

How can I display a jqplot stacked bar graph when xaxis is text?

2 Answers2