Flot Categories

by remingus

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.categories.min.js"></script>
<script src="http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js"></script>
<div id="content">
  <div class="demo-container">
    <div id="placeholder" class="demo-placeholder"></div>
  </div>

CSS

.demo-container {
  box-sizing: border-box;
  width: 850px;
  height: 450px;
  padding: 20px 15px 15px 15px;
  margin: 15px auto 30px auto;
  border: 1px solid #ddd;
  background: #fff;
}

.demo-placeholder {
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1.2em;
}

JavaScript

$(function() {



  var d1 = [
    ["Jun-16", 2860000],
    ["Jul-16", 2740000],
    ["Aug-16", 3180000],
    ["Sep-16", 2900000],
    ["Oct-16", 2930000],
    ["Nov-16", 2860000],
    ["Dec-16", 2790000],
    ["Jan-17", 2800000],
    ["Feb-17", 3370000],
    ["Mar-17", 2920000],
    ["Apr-17", 3450000],
    ["May-17", 2350000]
  ];

  var d2 = [
    ["Jun-16", 23800],
    ["Jul-16", 22300],
    ["Aug-16", 25000],
    ["Sep-16", 22700],
    ["Oct-16", 23500],
    ["Nov-16", 22800],
    ["Dec-16", 22700],
    ["Jan-17", 20200],
    ["Feb-17", 23100],
    ["Mar-17", 22500],
    ["Apr-17", 27600],
    ["May-17", 23600]
  ];


  var placeholder = $("#placeholder");




  $.plot("#placeholder", [{
    data: d1,
    label: "Merchant Vol"
  }, {
    data: d2,
    label: "Residual Pmt",
    yaxis: 2
  }], {
    xaxes: [{
      mode: "categories"
    }],
    yaxes: [{
      tickFormatter: dollarFormatter,
    },
    {
      tickFormatter: dollarFormatter,
      position: "right",
    }],
   
    legend: {
      show: false
    },
    
    series: {
      bars: {
        show: true,
        barWidth: 0.3,
      },
      shadowSize: 0,
    },


    colors: ["#e55869", "#259dab"],
    grid: {
      hoverable: true,
      color: "transparent",
      borderColor: "fff",
      borderWidth: 3,
      labelMargin: 15,
      axisMargin: 15
    }
  });

  function dollarFormatter(val, axis) { /*create unit change function*/
    return "$" + val.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
  }

});