Flot stacked bar chart not stacking

Question

I've created a Flot stacked bar chart but the blocks don't appear to be stacking - they all start at 0 (at the bottom of the chart).

The values of the 4 blocks are:

• Bright green - 1
• Purple - 28
• Red - 83
• Light green - 195

If it was stacked correctly it should be at a height of 307. Any thoughts on what's wrong?

   drawLineChart: function(el,data,ticks,labelstr) {
      var plot = $.plot(el, data, {
        series: {stack: true,
             lines: {show: false, steps: false},
             bars: {show: true, barWidth: 0.4, align: 'center'}
        },
        xaxis: {
            ticks: ticks
        },
        yaxis: {
            min: 0,
        },
        grid: {
            color: '#aaa',
            borderWidth:0,
            axisMargin:0,
            hoverable: true,
            autoHighlight: false
        },
        legend: {
            show: true,
            position: "ne",
            noColumns: 1
        }
      });
   }

Herculaneum

Answer 1

The most likely problem is that you haven't included the stack plugin after flot. In your head tag, you should have something like this:

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.stack.js"></script>

The key in this case being that last script tag.

Beyond that, I'm not sure what the problem would be - I ran your options and everything looked fine. See it in action here.

Thadeus

Definetely had the stack.js file included.. I checked that it was loading via Firebug and it reported HTTP 200. I've wasted hours on this.. might just switch to Google Charts instead! – Herculaneum

@Herculaneum - must be something else going on, because clearly your code works! I suppose the other possibility is that there's something weird in your data objects - maybe you can edit some example data objects into your question? – Thadeus

Answer 2

I ran into the same issue with Flot and trying to display stacked bar charts. I found that in my case it was caused by the series not being sorted by Date ascending.

After sorting by Date ascending the series started stacking properly.

I've also run into the same situation as you when there are negative values that need to be stacked. This is not supported by the native stack plugin. You can look here for an alternative plugin for stacking negative values in a bar chart

Dees

Nice plugin. Works well with other flot plugins too. – Legumin