Cre8 - Pie chart SVG test

by PhilQ

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<div id="content">
    
    <svg id="circle01" width="200" height="200" viewbox="-100 -100 200 200">
        <circle class="chart-pie" cx="0" cy="0" r="99" />
        
    </svg>
    
</div>

CSS

@font-face{font-family:'Glyphicons Regular';src:url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.eot');src:url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.woff') format('woff'),url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.ttf') format('truetype'),url('http://glyphicons.com/wp-content/themes/glyphicons/sk/public/fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');font-weight:normal;font-style:normal}

.glyphicons{display:inline-block;position:relative;padding-left:48px;color:#1d1d1b;text-decoration:none;*display:inline;*zoom:1;vertical-align:middle}
.glyphicons:before{position:absolute;left:0;top:0;display:inline-block;margin:0 5px 0 0;font:24px/1em 'Glyphicons Regular';font-style:normal;font-weight:normal;color:#1d1d1b;*display:inline;*zoom:1;vertical-align:middle;text-transform:none;-webkit-font-smoothing:antialiased}

body {
    margin: 0px;
    padding: 10px;
    height: 100%;
    font-family: sans-serif;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAB3RJTUUH3gIRFwIhEbNzTAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAARnQU1BAACxjwv8YQUAAABhSURBVHja7ZMhDsAgEAQpQbSif+NjfBF5H6hoZUGD3UMwk5y5ExMS5silhhWkNmY2Hq7zfr9Ht49LnosYsZKeU/vx05t038XSXukY8T5iOnYDMWIZdOwGYsQy6NgNxIhl/FV2Tq8bOeUCAAAAAElFTkSuQmCC);

}
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
}

#content {
    width: 100%;
    z-index: 1;
}

#topbar {
    text-shadow: 0 1px 0 rgba(0,0,0, 0.8);
    
    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;

    background-origin:...

JavaScript

// Converts from degrees to radians.
Math.radians = function(degrees) {
	return degrees * Math.PI / 180;
};
// Converts from radians to degrees.
Math.degrees = function(radians) {
	return radians * 180 / Math.PI;
};

function makeSVG(tag, attrs) {
    var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var k in attrs) {
        el.setAttribute(k, attrs[k]);
    }
    el.setAttribute('onclick', 'alert(\'x:\'+this.offsetLeft);');
    return el;
}


var chartPie = {
    id: 'circle01',
    class: 'chart-pie-part',
    mX: 0,
    mY: 0,
    r: 75,
    startGrad: 0,
    direction: 1,
    parts: [225, 135],
    fromCenter: 1
};

var drawChartPie = function(s) {
    var lastAngle = parseFloat(s.startGrad);
    partsLength = s.parts.length;
    if(partsLength>0) {
        for(var i=0; i<partsLength; i++) {
            var partAngle = parseFloat(s.parts[i]);
            var fCX = (Math.cos(Math.radians(lastAngle+(partAngle/2))) * s.fromCenter);
            var fCY = (Math.sin(Math.radians(lastAngle+(partAngle/2))) * s.fromCenter);
            var mX = (Math.round((s.mX+fCX)*100)/100);
            var mY = (Math.round((s.mY+fCY)*100)/100);
            var lX = (Math.round((mX+ (Math.cos(Math.radians(lastAngle)) * s.r))*100)/100);
            var lY = (Math.round((mY+ (Math.sin(Math.radians(lastAngle)) * s.r))*100)/100);
            var d1 = (partAngle>=180)? 1: 0;
            var d2 = s.direction;
            var zX = (Math.round((mX+ (Math.cos(Math.radians(lastAngle+partAngle)) * s.r))*100)/100);
            var zY = (Math.round((mY+ (Math.sin(Math.radians(lastAngle+partAngle)) * s.r))*100)/100);
            var circle = makeSVG('path', {
                class: s.class,
                d: 'M'+mX+','+mY+' L'+lX+','+lY+' A'+s.r+','+s.r+' 0 '+d1+','+d2+' '+zX+','+zY+' Z'
            });

            var distToMP = ((4*s.r*(Math.sin(partAngle/2)*Math.sin(partAngle/2)*Math.sin(partAngle/2)))/(3*(partAngle-Math.sin(partAngle))));
            var mpX =...