gistfile1.js

/*
 drawDial(
  value:
  renderTo: 
)
*/
function drawDial(options) {

  var renderTo = options.renderTo,
  value = options.value,
  centerX = width/2,
  centerY = height - 10,
  min = 0,
  max = 100,
  minAngle = -Math.PI + degreesToRadians(30),
  maxAngle = -degreesToRadians(30),
  tickInterval = 25,
  ranges = [{
    from: 0,
    to: options.value,
    color: 'red'
    },
    {
    from: options.value,
    to: max,
    color: '#DDD'}
  ];

  var renderer = new Highcharts.Renderer(renderTo, width, height);

  // internals
  var angle, pivot, color_arc, background_arc;

  function degreesToRadians(degrees) {
    return degrees * (Math.PI/180);
  }

  function valueToAngle(value) {
    return (maxAngle - minAngle) / (max - min) * value + minAngle;
  }

  function colorForValue(value) {
    if (value < max/4) {
      return '#e76b25';
    } else if (value >= max/4 && value < 2*max/4) {
      return '#9eaa50';
    } else if (value >= 2*max/4 && value < 3*max/4) {
      return '#009da8';
    } else {
      return '#005283';
    }
  }

  function setValue(value) {
    // the pivot
    angle = valueToAngle(value);

    var needle_length = outerRadius + 5;

    var start_x = centerX + needle_length * Math.cos(angle),
        start_y = centerY + needle_length * Math.sin(angle),
        outer_radius = needle_length,
        inner_radius = 0,
        start_angle = Math.PI + angle - 0.063,
        end_angle = Math.PI + angle + 0.063,
        fill_color = 'black';
    // draw needle
    renderer.arc(start_x, start_y, outer_radius, inner_radius, start_angle, end_angle).attr({
      fill: fill_color
    }).add();
    // draw circle at needle base
    renderer.arc(centerX, centerY, 4, 0, 0, 2*Math.PI).attr({
      fill: fill_color
    }).add();

    color_arc.attr({
      fill: colorForValue(value),
      end: angle
    });
    background_arc.attr({
      start: angle
    });
  }

  // ranges
  $.each(ranges, function(i, rangesOptions) {
    an_arc = renderer.arc(
      centerX, centerY, outerRadius, innerRadius, valueToAngle(rangesOptions.from), valueToAngle(rangesOptions.to)).attr({
        fill: rangesOptions.color
    }).add();
    if(i === 0) {
      color_arc = an_arc;
    } else {
      background_arc = an_arc;
    }
  });

  // the initial value
  setValue(value);

  return {
    setValue: setValue
  };
}