gauge.js

(function() {
  function object_merge(obj1, obj2){
    var obj3 = {};

    for (var attrname in obj1)
      obj3[attrname] = obj1[attrname];

    for (var attrname in obj2)
      obj3[attrname] = obj2[attrname];

    return obj3;
  }

  function gauge(el, options) {
    if (typeof options == 'undefined')
      options = {};

    var can = document.getElementById(el),
      ctx = can.getContext('2d');

    can.width = 160;
    can.height = 100;

    var W = can.width;
    var H = can.height;

    var default_options = {
      // gauge
      gaugeThickness:  34,
      gaugeColorEmpty: 'rgb(0, 194, 168)',
      gaugeColorFull:  'rgb(120, 220, 60)',

      // pointeur
      ptrThickness: 2,
      ptrColor:     'rgb(0, 0, 0)',
      ptrLenght:    60,
      ptrAngle:     0,

      // base du pointeur
      ptThickness: 4,
      ptColor:     null
    };

    options = object_merge(default_options, options);

    if (!options.ptColor)
      options.ptColor = options.ptrColor;

    // Gauge - partie vide
    ctx.beginPath();
    ctx.strokeStyle = options.gaugeColorEmpty;
    ctx.lineWidth = options.gaugeThickness;
    ctx.arc(W / 2, H * 0.9, 60, -(180 - options.ptrAngle) * Math.PI / 180, 0 * Math.PI / 180, false);
    ctx.stroke();

    // Gauge - partie pleine
    ctx.beginPath();
    ctx.strokeStyle = options.gaugeColorFull;
    ctx.lineWidth = options.gaugeThickness;
    ctx.arc(W / 2, H * 0.9, 60, -180 * Math.PI / 180, -(180 - options.ptrAngle) * Math.PI / 180, false);
    ctx.stroke();

    // Point
    ctx.beginPath();
    ctx.fillStyle = options.ptColor;
    ctx.arc(W / 2, H * 0.9, options.ptThickness, 0, 2 * Math.PI, false); 
    ctx.fill();

    // Pointeur
    ctx.lineWidth = options.ptrThickness;
    ctx.strokeStyle = options.ptrColor;

    ctx.beginPath();
    ctx.moveTo(W / 2, H * 0.9);
    ctx.translate(W / 2, H * 0.9);
    ctx.rotate((-90 + options.ptrAngle + 0.5) * Math.PI / 180);
    ctx.lineTo(0, -options.ptrLenght);
    ctx.stroke();
  }

  window.gauge = gauge;
})();