Flot Graphs: Dual axis line chart, stacking ONE axis

Question

I am hoping someone out there can tell me if what I am trying to do is even possible with the FLOT Javascript library. I am trying to show a chart (below) with dual axis and three data sets. One data set is on the left axis and two data sets on the right axis. What I really want to be able to do is stack the two data sets on the right axis since they should show cumulatively. Thus far I have been unable to get this chart to respond to the stack: true setting at all.

If anyone could help me out with it I would GREATLY appreciate it. My code and a snapshot of the chart currently. I am trying to stack the blue and green areas which correspond to the right axis (y2).

$(function () {
var previousPoint;

var completes = [[1346954400000, 5], [1346997600000, 5], [1347040800000, 7], [1347084000000, 9], [1347127200000, 12], [1347170400000, 15], [1347213600000, 16], [1347256800000, 20], [1347300000000, 20], [1347343200000, 20], [1347386400000, 25]];
var holds = [[1346954400000, 2], [1346997600000, 2], [1347040800000, 6], [1347084000000, 12], [1347127200000, 12], [1347170400000, 15], [1347213600000, 24], [1347256800000, 24], [1347300000000, 24], [1347343200000, 24], [1347386400000, 25]];
var screeners = [[1346954400000, 10298], [1346997600000, 7624], [1347040800000, 5499], [1347084000000, 2100], [1347127200000, 8075], [1347170400000, 4298], [1347213600000, 1134], [1347256800000, 507], [1347300000000, 0], [1347343200000, 800], [1347386400000, 120]];




var ds = new Array();

ds.push({
    data:completes,
    label: "Complete",
    yaxis: 2,
    lines: {
        show: true, 
        fill: true, 
        order: 2,
    }
});
ds.push({
    data:screeners,
    label: "Pre-Screened",
    yaxis: 1,
    lines: {
        show: true, 
        fill: true, 
        order: 1,
    }
});
ds.push({
    data:holds,
    label: "Holds",
    yaxis: 2,
    lines: {
        show: true, 
        fill: true, 
        order: 3,
    }
});

//tooltip function
function showTooltip(x, y, contents, areAbsoluteXY) {
    var rootElt = 'body';

    $('<div id="tooltip2" class="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y - 35,
        left: x - 5,
        border: '1px solid #000',
        padding: '1px 5px',
        'z-index': '9999',
        'background-color': '#202020',
        'color': '#fff',
        'font-size': '11px',
        opacity: 0.8
    }).prependTo(rootElt).show();
}

//Display graph
$.plot($("#placeholder1"), ds, {
    grid:{
        hoverable:true
    },
    xaxes: [ { mode: 'time', twelveHourClock: true, timeformat: "%m/%d %H:%M" } ],
    yaxes: [ {  min: 0,
                tickFormatter: function numberWithCommas(x) 
                {
                    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
                },
             } 
            ],
    y2axis: [ ],
    legend: { show: true }
});  

});

Answer 1

This is very straightforward. The stacking plugin isn't well documented, but in the source code, you can see there are two ways to specify that you want stacking turned on.

Two or more series are stacked when their "stack" attribute is set to the same key (which can be any number or string or just "true"). To specify the default stack, you can set

series: { stack: null or true or key (number/string) }

or specify it for a specific series

$.plot($("#placeholder"), [{ data: [ ... ], stack: true }])

In this case, we want to specify it within the two series objects that we want stacked, which would look like this:

ds.push({
    data:completes,
    label: "Complete",
    yaxis: 2,
    stack: true,  //added
    lines: {
        show: true, 
        fill: true, 
        order: 2,
    }
});
ds.push({
    data:screeners,
    label: "Pre-Screened",
    yaxis: 1,
    lines: {
        show: true, 
        fill: true, 
        order: 1,
    }
});
ds.push({
    data:holds,
    label: "Holds",
    yaxis: 2,
    stack: true,  //added
    lines: {
        show: true, 
        fill: true, 
        order: 3,
    }
});

Add those two stack:true bits and include the stack plugin into your javascript sources and that will do it. See it in action here: http://jsfiddle.net/ryleyb/zNXBd/