Q:

Fill outer-circle with Raphael JS

I’m trying to fill the border of a circle, depending on a variable, like so:
 
I found this example but it’s not what I want. I want the outer border to fill from bottom-up, on both sides of circle.
Here’s the code that I have:
var completion = '5%';

drawcircle("js-raphael-completion", completion);

function drawcircle(div, rate) {
  var archtype = Raphael(document.getElementsByClassName(div)[0], "90%", "90%");
  archtype.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 - 0.01, yloc - R]
      ];
    } else {
      path = [
          ["M", xloc, yloc - R],
          ["A", R, R, 0, +(alpha > 180), 1, x, y]
      ];
    }
    return {
       path: path
    };
  };

  // inner ring
  var circle = archtype.circle("50%", "50%", "40%").attr({
      "stroke": "#2787d3",
      "stroke-width": 1
  });

  // text
  var text = archtype.text("95%", "50%", rate).attr({
      'font-size': 14, 'font-family': 'Avenir',
      "fill": "#2787d3"
  });

  // outer ring (filling)
  var my_arc = archtype.path().attr({
      "stroke": "#2787d3",
      "stroke-width": 10,
      arc: [100, 100, 0, 100, 50]
  });

  // animation of outer ring
  my_arc.animate({
     arc: [100, 100, 100, 100, 50]
  }, 1000);
}

See the demo: http://jsfiddle.net/SUBn6/
Currently, because I’m not using percentages for the outer ring (filling), it’s not centred with the border circle (inner).
Another issue I have is with the number “5%”. It needs to follow the outer ring (filling) as it fills up from bottom to top…
Any ideas? Thanks.

A:

It looks like Raphael doesn't have such a settings for stroke ending. So another approach to this would be to have two arcs and fill the space between them to simulate the stroke. 
That involves a little more geometry :) but this should work:
var completion = '5%';

drawcircle("js-raphael-completion", completion);

// JSFiddle needs not onload
// window.onload = function () {
//  drawcircle("js-raphael-completion", completion);
// };

function drawcircle(div, rate) {
    var archtype = Raphael(document.getElementsByClassName(div)[0], "90%", "90%");
    archtype.customAttributes.arc = function (xloc, yloc, value, total, R,lineWidth) {
        var alpha = 360 / total * value,
            a = value / total * Math.PI,
            w = R * Math.sin(a),
            h = R * Math.cos(a),
            gamma = Math.asin(R / (R + lineWidth) * Math.sin(Math.PI / 2 + a)),
            beta = Math.PI/2 - a - gamma,

            xOffset = (R + lineWidth) * Math.sin(beta) / Math.sin(Math.PI / 2 + a),
            x = xloc - R * Math.sin(a),
            y = yloc + R * Math.cos(a),
            path;

        if (Math.abs(a - Math.PI/2) < 0.0001) {
            xOffset = lineWidth;
        }

        if (total == value) {
            path = [
                ["M", x, y],
                ["A", R , R , 1, 1, 1, x - 0.01, y],
                ["L", x - 0.01,y-lineWidth],
                ["A", R + lineWidth, R + lineWidth, 1, 1, 0, x, y - lineWidth],
                ["Z"]

                /*
                ["M", xloc, yloc - R],
                ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
                */
            ];
        } else {
            path = [
                ["M", x, y],
                ["A", R , R , 0, +(alpha > 180), 0, x + 2 * w, y],
                ["L", x+ 2 * w + xOffset,y],
                ["A", R + lineWidth, R + lineWidth, 0 , +(alpha > 180) , 1, x - xOffset, y],
                ["Z"]
            ];
        }
        return {
            path: path
        };
    };

    // inner ring
    var circle = archtype.circle(100, 100, 50).attr({
        "stroke": "#2787d3",
            "stroke-width": 3
    });

    // text
    var text = archtype.text("95%", "50%", rate).attr({
        'font-size': 14,
        'font-family': 'Avenir',
            "fill": "#2787d3"
    });

    // outer ring (filling)
    var my_arc = archtype.path().attr({
        "stroke": "#FF0000",
        "fill":  "#2787d3",
        "stroke-width" : 0,
        arc: [100, 100, 0, 100, 51,10]
    });

    // animation of outer ring
    my_arc.animate({
        arc: [100, 100, 100, 100, 51,10]
    }, 1000);

}

See http://jsfiddle.net/Xp77x/2/

