<!DOCTYPE html>
<html>
<head>
<!--[if lte IE 8]><script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
  
  
  <script src="script.js"></script>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div 
       id="placeholder"
       style="width:400px;height:400px;"></div>
</body>
</html>
$(function () {
  console.clear();

  var source = [{
    value: 15,
    color: "green",
    label: "Item 0"
  }, {
    value: 5,
    color: "grey",
    label: "Item 1"
  }, {
    value: 7,
    label: "Item 2"
  }, {
    value: 1,
    label: "Item 3"
  }];
  
  
  var generatedLabels = [];

  var colorMap = {};
  var dataArray = [];
  var defaultColor = "lightblue";
  $.each(source, function(index, item) {
    generatedLabels.push(item.label);
    var color = item.color || defaultColor;
    var colorData = colorMap[color];
    if(!colorData) {
      colorData = {
        color: color,
        data: []
      }
      colorMap[color] = colorData;
      dataArray.push(colorData);
    }
    colorData.data.push( [index, item.value] );
  });
  

var data = dataArray;

var labels = generatedLabels;

var barWidth = 0.8;
var remainingBarSpace = 1 - barWidth;
var leftAlignmentDueToCenterLabels = barWidth / 2;

var options = {
    series: {
        bars: {
          show: true, 
          barWidth: barWidth,
          align:'center',
          lineWidth: 0
        }
    },
    yaxis: {
      min: 0,
      tickDecimals: 0,
      tickLength: 0,
      tickFormatter: function (val, axis) {
          return val + "% ";
      }
    },
    xaxis: {
      min: 0 - remainingBarSpace - leftAlignmentDueToCenterLabels,
      max: labels.length + remainingBarSpace - leftAlignmentDueToCenterLabels,
      tickLength: 0,
      show: true,
      tickSize: 1,
      tickFormatter: function (val, axis) {
          return labels[val] || "";
      }
      //ticks: [[1, "F1"], [2, "F2"], [3, "F3"], [4, "F4"] ]
    },
    grid: {
      show:true,
      borderWidth: {top: 0, right:0, left:2, bottom:2 }
    }
};

  var placeholder = $("#placeholder");

  var plot = $.plot(placeholder, data, options);
});
/* canvas {
  border: 1px solid green;
} */