Untitled

<script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css" media="screen">
  body {
    background-color: black;
    color: white;
    font-family: helvetica;
  }

  #display {
    font-size:2em;
  }
</style>

<div id="display">Hover to see value</div>
<div id="graph"></div>

<script>
  var graph = Raphael("graph", 300, 300)

  graph.customAttributes.arc = function (xloc, yloc, value, total, R) {
    var alpha = 360 / total * value,
      a = (90 - alpha) * Math.PI / 180,
      x = xloc + R * Math.cos(a),
      y = yloc - R * Math.sin(a),
      path;
    if (total == value) {
      path = [["M", xloc, yloc - R], ["A", R, R, 0, 1, 1, xloc - .01, yloc - R]];
    } else {
      path = [["M", xloc, yloc - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
    }
    return {path: path};
  };

  var makeArc = (function () {
    var width = 10,
        count = 0,
        duration = 800,
        ease = ">",
        xpos = 100,
        ypos = 100,
        resetDisplay = function () {
          display.innerHTML = "Hover to see value"
        }

    return function (value, color, hoverCallback) {
      var radius = (++count * 9.5) + 20
      var arc = graph.path().attr({"stroke": color, "stroke-width": 10, arc: [xpos, ypos, 0, 100, radius]});

      arc.animate({arc: [xpos, ypos, value, 100, radius]}, duration, ease);
      arc.hover(function () {
        display.innerHTML = "current value = " + value
      }, resetDisplay)
    }
  })()

  var colors = ["#005CFF", "#004BCC", "#003DA6", "#002F7F", "#002159"]

  for (var i=0; i < 5; i++) {
    var val = Math.floor(Math.random() * 100)
    makeArc(val, colors[i])
  };
</script>