Raphael Circle Gauge

A cicular 0 to 100% gauge with color feedback. Based on example code from here: http://stackoverflow.com/questions/5061318/drawing-centered-arcs-in-raphael-js

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<button>+</button>
<button>-</button>

<div id="graph"></div>

JavaScript

function createArc(paper, radians){
	paper.customAttributes.arc = function (centerX, centerY, startAngle, endAngle, innerR, outerR) {
		var radians = Math.PI / 180,
		largeArc = + ( endAngle - startAngle > 180);
		outerX1 = centerX + outerR * Math.cos((startAngle-90) * radians),
        outerY1 = centerY + outerR * Math.sin((startAngle-90) * radians),
        outerX2 = centerX + outerR * Math.cos((endAngle-90) * radians),
        outerY2 = centerY + outerR * Math.sin((endAngle-90) * radians),
        centerX1 = centerX + (innerR + ((outerR - innerR)/2)) * Math.cos((endAngle-90 + 2) * radians),
        centerY1 = centerY + (innerR + ((outerR - innerR)/2)) * Math.sin((endAngle-90 + 2) * radians),
        innerX1 = centerX + innerR * Math.cos((endAngle-90) * radians),
        innerY1 = centerY + innerR * Math.sin((endAngle-90) * radians),
        innerX2 = centerX + innerR * Math.cos((startAngle-90) * radians),
        innerY2 = centerY + innerR * Math.sin((startAngle-90) * radians);
    	var path = [
		               ["M", outerX1, outerY1],                    
		               ["A", outerR, outerR, 0, largeArc, 1, outerX2, outerY2],                    
		               ["L", innerX1, innerY1], 
		               ["A", innerR, innerR, 0, largeArc, 0, innerX2, innerY2],
		               ["z"]
	               ];                 
    	return { path : path };
	};
	
};

// Custom Arc Attribute, position x&y, value portion of total, total value, Radius
var archtype = Raphael('graph', 100, 100);

createArc(archtype, 100);


//make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
var my_arc = archtype.path().attr({
    "stroke": "#00f",
    "stroke-width": 10,
    arc: [50, 50, -135, 135, 30, 35]
});

var my_arc_e = archtype.path().attr({
    "stroke": "#500",
    "stroke-width": 10,
    arc: [50, 50, -135, -70, 40, 41]
});

var my_arc_w = archtype.path().attr({
    "stroke": "#f00",
    "stroke-width": 10,
    arc: [50, 50, -70, -10, 40,...