flot comparison bar chart

Question

I'm trying to produce a chart in Flot that has multiple stacked bars next to each other for one data set, and a second set of stacked bars as a second data set shown underneath the main chart but off at an angle. The picture below shows what I'm after

Is there any way of doing this easily? I know there is a plugin that lets me put the bars next to each other but that's not really what I'm after.

I've already got it rendering one data set how I want but I don't know how to go about doing the second data set.

Answer 1

You could use a couple of div s and some css to do the stacking. Just put one graph in each div and then absolutely position them within a wrapper div:

<div id="graph_wrap">
    Comparison Chart
    <div id="graph1"></div>
    <div id="graph2"></div>
</div>

CSS:

#graph_wrap {
    width: 700px;
    height: 400px;
}

#graph1, #graph2 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 600px;
    height: 300px;
    margin: 50px;
    z-index: 2;
}

#graph2 {
    top: -15px;
    left: 15px;
    z-index: 1;
}

Example: http://jsfiddle.net/jtbowden/q4N4M/