Hack to the jQuery Flot 'stack' plug-in, allowing the user to make bar graphs stack in the same order as the legend.

jquery.flot.stack.reversible.js

function stackData(plot, s, datapoints) {
  if (s.stack == null)
    return;
    
  /********************************************************************************************
  * series:{ reverseStack:true } causes the first series to be stacked at the top,
  * the last series at the bottom. (Vertical ordering matches the legend.)
  *
  * Does not properly support excluding specific series from stacking; it's all or none.
  *
  * Assumes (requires) that all series have exactly the same x values (including same number).
  ********************************************************************************************/
  if (s.reverseStack){
    var allSeries = plot.getData();
    var myIndex   = null;
    for (var i=allSeries.length-1;i>=0;--i){
      var series = allSeries[i];
      var nextun = allSeries[i+1];
      if (s == series) myIndex = i;
      if (!series.stackedPoints){
        var points = series.datapoints.points;
        var step   = series.datapoints.pointsize;
        series.stackedPoints = points.concat();
        for (var xi=0,len=points.length-1; xi<len; xi+=step ){
          var y = points[xi+1];
          var prevtop = nextun ? nextun.stackedPoints[xi+1] : 0;
          series.stackedPoints[xi+1] = y + prevtop;
          if (step>2) series.stackedPoints[xi+2] = prevtop;
        }
      }
    }
    datapoints.points = allSeries[myIndex].stackedPoints;
    return;
  }
  
  var other = findMatchingSeries(s, plot.getData());
  if (!other)
    return;

  var ps = datapoints.pointsize,
    points = datapoints.points,
    otherps = other.datapoints.pointsize,
    otherpoints = other.datapoints.points,
    newpoints = [],
    px, py, intery, qx, qy, bottom,
    withlines = s.lines.show, withbars = s.bars.show,
    withsteps = withlines && s.lines.steps,
    i = 0, j = 0, l;

  while (true) {
    if (i >= points.length)
      break;

    l = newpoints.length;

    if (j >= otherpoints.length
      || otherpoints[j] == null
      || points[i] == null) {
      // degenerate cases
      for (m = 0; m < ps; ++m)
        newpoints.push(points[i + m]);
      i += ps;
    }
    else {
      // cases where we actually got two points
      px = points[i];
      py = points[i + 1];
      qx = otherpoints[j];
      qy = otherpoints[j + 1];
      bottom = 0;

      if (px == qx) {
        for (m = 0; m < ps; ++m)
          newpoints.push(points[i + m]);

        newpoints[l + 1] += qy;
        bottom = qy;
      
        i += ps;
        j += otherps;
      }
      else if (px > qx) {
        // we got past point below, might need to
        // insert interpolated extra point
        if (withlines && i > 0 && points[i - ps] != null) {
          intery = py + (points[i - ps + 1] - py) * (qx - px) / (points[i - ps] - px);
          newpoints.push(qx);
          newpoints.push(intery + qy)
          for (m = 2; m < ps; ++m)
            newpoints.push(points[i + m]);
          bottom = qy; 
        }

        j += otherps;
      }
      else {
        for (m = 0; m < ps; ++m)
          newpoints.push(points[i + m]);
      
        // we might be able to interpolate a point below,
        // this can give us a better y
        if (withlines && j > 0 && otherpoints[j - ps] != null)
          bottom = qy + (otherpoints[j - ps + 1] - qy) * (px - qx) / (otherpoints[j - ps] - qx);

        newpoints[l + 1] += bottom;
      
        i += ps;
      }
    
      if (l != newpoints.length && withbars)
        newpoints[l + 2] += bottom;
    }

    // maintain the line steps invariant
    if (withsteps && l != newpoints.length && l > 0
      && newpoints[l] != null
      && newpoints[l] != newpoints[l - ps]
      && newpoints[l + 1] != newpoints[l - ps + 1]) {
      for (m = 0; m < ps; ++m)
        newpoints[l + ps + m] = newpoints[l + m];
      newpoints[l + 1] = newpoints[l - ps + 1];
    }
  }
  datapoints.points = newpoints;
}