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>

CoffeeScript

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
data = 
  F:
    'OPEN': 24
    'IN PROGRESS': 4
  B:
    'OPEN': 26
    'IN PROGRESS': 8
  CONFIG:
    'OPEN': 8
    'IN PROGRESS': 2 

data = {
	"B": {
		"Open": "25",
		"In Progress": "38"
	},
	"CONFIG": {
		"Open": "1",
		"In Progress": "1"
	},
	"DB": {
		"Open": "6",
		"In Progress": "12"
	},
	"ELABORATE": {
		"Open": "2",
		"In Progress": "3"
	},
	"F": {
		"Open": "24",
		"In Progress": "32"
	},
	"L!MS": {
		"Open": "1",
		"In Progress": "1"
	},
	"MIGRATION": {
		"Open": "2",
		"In Progress": "2"
	},
	"Performance": {
		"Open": "4",
		"In Progress": "4"
	},
	"RETEST": {
		"Open": "13",
		"In Progress": "28"
	}
}
numberOfLabels =0

maxTotal = do (data) ->
  mt = 0
  total = undefined
  numberOfLabels = 0
  for label of data
    if data.hasOwnProperty(label)
      total = 0
      numberOfLabels++
      for status of data[label]
        if data[label].hasOwnProperty(status)
          total += parseInt(data[label][status],10)
      mt = if mt < total then total else mt
  mt
canvas = document.getElementById('myCanvas')
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)
stepUnit = undefined

drawAxis = ->
  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()
  return

defaultColor = '#BF9A49'

drawForLabel = (labelText, labelData, n) ->
  prevHeight = 0
  ctx.font = '20px Calibri'
 ...