Flot multiple stacked series in one chart

Question

Is it possible to have two separate data variables to be stacked separately on the same chart? So for example, my first data variable has 3 stacked series in it and my second data variable has 2 different stacked series in it. Can I have both of them in the same chart, but stacked independently?

Answer 1

Not sure I completely understand, but if you want two groups of stacks, just separate them out on the x-axis:

    var d1 = [];
    for (var i = 0; i <= 10; i += 1) {
        d1.push([i, parseInt(Math.random() * 30)]);
    }

    var d2 = [];
    for (i = 0; i <= 10; i += 1) {
        d2.push([i, parseInt(Math.random() * 30)]);
    }

    var d3 = [];
    for (i = 0; i <= 10; i += 1) {
        d3.push([i, parseInt(Math.random() * 30)]);
    }

    // d1, d2, d3 run 0 to 10
    // d4, d5, 12 to 20

    var d4 = [];
    for (i = 12; i <= 20; i += 1) {
        d4.push([i, parseInt(Math.random() * 30)]);
    }       

    var d5 = [];
    for (i = 12; i <= 20; i += 1) {
        d5.push([i, parseInt(Math.random() * 30)]);
    }

Produces (example here):

EDIT FOR COMMENTS

If you want to stack some series in the positive direction and others in the negative, provide a unique stack variable value for each stack group.

    var d1 = [];
    for (var i = 0; i <= 10; i += 1) {
        d1.push([i, parseInt(Math.random() * 30)]);
    }
    d1 = {data: d1, stack: 1}; // specifiy a unique stack for pos

    var d2 = [];
    for (i = 0; i <= 10; i += 1) {
        d2.push([i, parseInt(Math.random() * 30)]);
    }
    d2 = {data: d2, stack: 1}; // specifiy a unique stack for pos

    var d3 = [];
    for (i = 0; i <= 10; i += 1) {
        d3.push([i, parseInt(Math.random() * 30)]);
    }
    d3 = {data: d3, stack: 1}; // specifiy a unique stack for pos

    var d4 = [];
    for (i = 0; i <= 10; i += 1) {
        d4.push([i, parseInt(-Math.random() * 30)]);
    }
    d4 = {data: d4, stack: 2}; // specifiy a unique stack for neg


    var d5 = [];
    for (i = 0; i <= 10; i += 1) {
        d5.push([i, parseInt(-Math.random() * 30)]);
    }
    d5 = {data: d5, stack: 2}; // specifiy a unique stack for neg

Updated example.