dash - graph fiddle

by Johan Vandeplas

HTML

<canvas id="myCanvas" width="300" height="335" style="border:1px solid #c3c3c3; background: #96bf48">
  Your browser does not support the canvas element.
</canvas>

JavaScript

var colors = {
    'OPEN': '#58803f',
    'IN PROGRESS': '#799965',
    'WAITING FOR APPROVAL': '#7cc9ed',
    'APPROVED': '#0000ff',
    'WAITING FOR FEEDBACK': '#ffd351',
    'ON HOLD': '#735C2C',
    'TO CORRECT': '#ff0000',
    'TESTED': '#00c800'
}

//#735C2C

var data = {
  F: {
    'OPEN': 24,
    'IN PROGRESS': 4,
    
  },
  B: {
    'OPEN': 26,
    'IN PROGRESS': 8,
  },
  CONFIG: {
    'OPEN': 8,
    'IN PROGRESS':2,
  }
};
var numberOfLabels = 0;



var maxTotal = (function(data) {
  var maxTotal = 0,
    total;
  numberOfLabels = 0;
  for (var label in data) {
    if (data.hasOwnProperty(label)) {
      total = 0;
      numberOfLabels++;
      for (var status in data[label]) {
        if (data[label].hasOwnProperty(status)) {
          total += data[label][status];
        }
      }
      maxTotal = maxTotal < total ? total : maxTotal;
    }
  }
  return maxTotal;
}(data));
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"),
  fm = 10,
  totalWidth = 300,
  totalHeight = 335,
  bm = 2,

  maxX = totalWidth - (3 * fm),
  maxY = totalHeight - (3 * fm),
  bw = Math.round((maxX / numberOfLabels) - (numberOfLabels * bm)),
  stepUnit,
  drawAxis = function() {
    ctx.moveTo(fm, fm);
    ctx.lineTo(fm, totalHeight - fm);
    ctx.lineTo(totalWidth - fm, totalHeight - fm);

    ctx.lineTo(totalWidth - fm - 10, totalHeight - fm + 4);
    ctx.moveTo(totalWidth - fm, totalHeight - fm);
    ctx.lineTo(totalWidth - fm - 10, totalHeight - fm - 4);

    ctx.moveTo(fm, fm);
    ctx.lineTo(14, 20);
    ctx.moveTo(fm, fm);
    ctx.lineTo(6, 20);

    ctx.strokeStyle = "#404040";
    ctx.stroke();
  };
var defaultColor = '#BF9A49';
drawForLabel = function(labelText, labelData, n) {
  var prevHeight = 0;
  ctx.font = '20px Calibri';
  ctx.textAlign="center"; 
  ctx.textBaseline="middle";
  ctx.fillStyle = "#FFFFFF";
  
  for (var status in labelData) {
    if (labelData.hasOwnProperty(status) && labelData[status] > 0) {
      var h =...