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?

Answer 1

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
            }