Simple canvas-based timeline to rappresent interval in day

Timeline.js

/*var _margin = 20;
var _marg_btw_quart;
var _height;
var _width;
var _cnvElementId;*/

function init() {
	//var t = new Timeline('myCanvas',document.getElementById('canvasContainer').clientHeight,document.getElementById('canvasContainer').clientWidth);
var t = new Timeline('myCanvas');
  t.drawCanvas();
  t.setData([{start:"12:30",end:"13:45"}]);
}

var Timeline = function (canvasElement,height,width) {
	this._margin = 20;
  this._height = height;
  this._width = width;
  this._cnvElementId = canvasElement;
  this._marg_btw_quart = (this._width-(this._margin*2))/96;
};

var Timeline = function (canvasElement) {
  var height = document.getElementById(canvasElement).clientHeight
var width = document.getElementById(canvasElement).clientWidth
  this._margin = 20;
  this._height = height;
  this._width = width;
  this._cnvElementId = canvasElement;
  this._marg_btw_quart = (this._width-(this._margin*2))/96;
};


Timeline.prototype.drawCanvas = function() {
  var c = document.getElementById(this._cnvElementId);
  c.width = this._width;
  c.height = this._height;
  var ctx = c.getContext("2d");
  ctx.moveTo(this._margin,this._height-this._margin);
  ctx.lineTo(this._width-(this._margin),this._height-this._margin);
  ctx.stroke();

  var i=0;
  for(i=0;i<97;i++) {
    if(i%4==0 || i==96) {
      ctx.moveTo((this._margin)+(i*this._marg_btw_quart),this._height-this._margin-10);
      ctx.lineTo((this._margin)+(i*this._marg_btw_quart),this._height-this._margin+10);
      ctx.stroke();
      ctx.fillStyle = "#000000";

      ctx.font = "10px Arial";
      ctx.fillText(i!=96?i/4:0,(this._margin)+(i*this._marg_btw_quart)-3,this._height-this._margin+20);
    } else {
      ctx.moveTo((this._margin)+(i*this._marg_btw_quart),this._height-this._margin-5);
      ctx.lineTo((this._margin)+(i*this._marg_btw_quart),this._height-this._margin+5);
      ctx.stroke();
    }
	}
};

Timeline.prototype.setData = function(times) {
		var c = document.getElementById(this._cnvElementId);
    var ctx = c.getContext("2d");
    if(times !== undefined && times != null) {
      for(var i=0;i<times.length;i++) {
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(this._margin+(this._getIByTyme(times[i].start)*this._marg_btw_quart),this._height-this._margin-4,this._getLenght(times[i].start,times[i].end)*this._marg_btw_quart,7);
      }
    }else
  		console.error('data undefined or null');
};

Timeline.prototype._getIByTyme = function(start) {
			var h = start.slice(0,2);
      var m = start.slice(3,5);

      m = m/15;
      h = h*4;

      return Math.floor(h+m);
};

Timeline.prototype._getLenght = function(start,end) {
			var iend = this._getIByTyme(end);
  		var istart = this._getIByTyme(start);
  
  		return Math.floor(iend-istart);
};

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}