flot side by side stack bar

Question

Is it possible to have a side by side bar chart mixed with a stacked bar using Flot?

Similar to the jqplot question here: jqplot Side by Side Stacked Bar Chart

Tried using both but only one the side by side runs and if I disable side by side, the stacked bar works perfectly.

Image will be similar to : http://peltiertech.com/Utility/pix/clusterstackchart.png

Sample code I wrote is: http://jsfiddle.net/WAGbt/ (Comment out the order: X property and you'll see them switch)

$(document).ready(function ()
{
    DrawChart();
});

function GenerateSeries(added)
{
    var data = [];
    var start = 100 + added;
    var end = 500 + added;

    for (i = 1; i <= 20; i++)
    {
        var d = Math.floor(Math.random() * (end - start + 1) + start);
        data.push([i, d]);
        start++;
        end++;
    }

    return data;
}

function DrawChart()
{
    var dataa = GenerateSeries(100);
    var datab = GenerateSeries(100);
    var datac = GenerateSeries(100);

    var ds = new Array();

    var data =
    [
        {
            label: "data1",
            data: dataa,
            bars:
            {
                show: true,
                barWidth: 0.2,
                order: 1,
                lineWidth: 2
            }
        },
        {
            label: "data2",
            data: datab,
            bars:
            {
                show: true,
                barWidth: 0.2,
                order: 2,
                lineWidth: 2
            }
        },
        {
            label: "data3",
            data: datac,
            bars:
            {
                show: true,
                barWidth: 0.2,
                order: 3,
                lineWidth: 2
            }
        }
    ];

    var options = {
        series: {
            stack: true
        },
        xaxis: {
        },
        grid: {
            backgroundColor: { colors: ["#FFF", "#FFF"] }
        }
    };

    var plot = $.plot($("#placeholder"), data, options);
}

Answer 1

Add bars to the options...

var options = {
    series: {
        stack: true
    },
    xaxis: {
    },
    grid: {
        backgroundColor: { colors: ["#FFF", "#FFF"] }
    },
    bars:{ // show the bars with a width of .4
        show: true,
        barWidth: .4
    }

};

And massage the data into this format...

var data = [ // all series

    [ // first series (Q1)
        [0,100], // pens Q1 N America
        [0.4,120], // pencils Q1 N America
        [1,130], // pens Q1 Europe
        [1.4,140], // pencils Q1 Europe
        [2,150], // pens Q1 Asia
        [2.4,200], // pencils Q1 Asia
    ],

    [ // second series (Q2)
        [0,100],
        [0.4,200],
        [1,200],
        [1.4,200],
        [2,200],
        [2.4,200],
    ],

    [ // third series (Q3)
        [0,100],
        [0.4,200],
        [1,200],
        [1.4,200],
        [2,200],
        [2.4,200],
    ],

    [ // fourth series (Q4)
        [0,100],
        [0.4,200],
        [1,200],
        [1.4,200],
        [2,200],
        [2.4,200],
    ]

]

And it works like this: http://jsfiddle.net/WAGbt/2/

I made another update with labels for the series, and on the axes: http://jsfiddle.net/WAGbt/3/