function Graphic(width, height){
  this.width  = width;
  this.height = height;
  this.canvas = null;
}

Graphic.prototype.init = function(){
  this.canvas        = document.createElement("canvas");
  this.canvas.width  = this.width;
  this.canvas.height = this.height;

  document.body.appendChild(this.canvas);
  this.ctx = this.canvas.getContext("2d");
};

Graphic.prototype.stick = function(width, points, colors){

  if(points.length != colors.length) console.error("Les couleurs ne sont pas toute déclarer !")

  var nbrGap   = points.length + 1;
  var widthGap = (this.width - points.length * width) / nbrGap;
  var gap      = 0;

  if(widthGap < 0){
    console.error("Impossible d'affiche le graphique !");
    return false;
  }

  for(var i = 0; i < points.length; i++){
    gap += widthGap;

    this.ctx.fillStyle = colors[i];
    this.ctx.fillRect(gap, this.height - points[i], width, points[i]);

    gap += width;
  }
};

Graphic.prototype.hoverInfos = function(){
  this.canvas.addEventListener("mousemove", function(e){
    var x = e.clientX;
    var y = e.clientY;
    console.log("X : " + x +  " Y : " + y);
  });
};