flot order bars with custom x labels

multiple legends not working

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.errorbars.js"></script>
<div class="container-fluid" id="main_content">

  <div class="row">
    <div id="success-graph" class=""></div>
  </div>
  <div class="row">
    <div id="mi-graph" class=""></div>
  </div>

</div>
<!-- #main_content -->

CSS

#success-graph,
#mi-graph {
  height: 500px;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}

JavaScript

/*
 * Flot plugin to order bars side by side.
 *
 * Released under the MIT license by Benjamin BUFFET, 20-Sep-2010.
 * Modifications made by Steven Hall <github.com/emmerich>, 01-May-2013.
 *
 * This plugin is an alpha version.
 *
 * To activate the plugin you must specify the parameter "order" for the specific serie :
 *
 *  $.plot($("#placeholder"), [{ data: [ ... ], bars :{ order = null or integer }])
 *
 * If 2 series have the same order param, they are ordered by the position in the array;
 *
 * The plugin adjust the point by adding a value depanding of the barwidth
 * Exemple for 3 series (barwidth : 0.1) :
 *
 *          first bar décalage : -0.15
 *          second bar décalage : -0.05
 *          third bar décalage : 0.05
 *
 */

// INFO: decalage/decallage is French for gap. It's used to denote the spacing applied to each
// bar.
(function($) {
  function init(plot) {
    var orderedBarSeries;
    var nbOfBarsToOrder;
    var borderWidth;
    var borderWidthInXabsWidth;
    var pixelInXWidthEquivalent = 1;
    var isHorizontal = false;

    // A mapping of order integers to decallage.
    var decallageByOrder = {};

    /*
     * This method add shift to x values
     */
    function reOrderBars(plot, serie, datapoints) {
      var shiftedPoints = null;

      if (serieNeedToBeReordered(serie)) {
        checkIfGraphIsHorizontal(serie);
        calculPixel2XWidthConvert(plot);
        retrieveBarSeries(plot);
        calculBorderAndBarWidth(serie);

        if (nbOfBarsToOrder >= 2) {
          var position = findPosition(serie);
          var decallage = 0;

          var centerBarShift = calculCenterBarShift();

          // If we haven't already calculated the decallage for this order value, do it.
          if (typeof decallageByOrder[serie.bars.order] === 'undefined') {
            if (isBarAtLeftOfCenter(position)) {
              decallageByOrder[serie.bars.order] = -1 * (sumWidth(orderedBarSeries, position - 1, Math.floor(nbOfBarsToOrder / 2) -...