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

How I want it to look

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.

One option might be to take that bar-stacking plugin and modify it for your needs. I don't believe there are any plugins for flot that do this directly. — Ryley
Yeah I've had a look through it but got pretty confused. I couldn't see how it was actually moving the bars. It suggests that it simply adding an offset but I couldn't see where it was. It also would be alright for moving the bars across but I'm not sure how I'd go about moving them up — PaReeOhNos

Jeff B Jeff B · Accepted Answer · 2013-02-12T21:49:23

You could use a couple of divs 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/

flot comparison bar chart

1 Answers