Donut charts in SVG

by jpeter06

HTML

<div id="container">  
</div>

CSS

html, body{
font-family: arial;
}

JavaScript

function pieChart(p1, p2, p3,p4,size) {
    var total=p1+p2+p3+p4;
    var str=""+total;
    var arc1=p1*360/total;
    var arc2=p2*360/total;
    var arc3=p3*360/total;
    var arc4=p4*360/total;
    var size=size;
    
    var svgns = "http://www.w3.org/2000/svg";
    var chart = document.createElementNS(svgns, "svg:svg");
    chart.setAttribute("width", size);
    chart.setAttribute("height", size);
    chart.setAttribute("viewBox", "0 0 " + size + " " + size);
    
    // Background circle
    var back = document.createElementNS(svgns, "circle");
    back.setAttributeNS(null, "cx", size / 2);
    back.setAttributeNS(null, "cy", size / 2);
    back.setAttributeNS(null, "r",  size / 2);
    var color = "#d0d0d0";
    if (size > 50) { 
        color = "#ebebeb";
    }
    back.setAttributeNS(null, "fill", color);
    chart.appendChild(back);
    
    
	
    chart.appendChild(genArc(0,arc1,svgns,size,'red')); // Add wedge to chart
    chart.appendChild(genArc(arc1,arc2,svgns,size,'#666')); // Add wedge to chart
    chart.appendChild(genArc(arc1+arc2,arc3,svgns,size,'orange')); // Add wedge to chart
    chart.appendChild(genArc(arc1+arc2+arc3,arc4,svgns,size,'green')); // Add wedge to chart
    
    
    // foreground circle
    var front = document.createElementNS(svgns, "circle");
    front.setAttributeNS(null, "cx", (size / 2));
    front.setAttributeNS(null, "cy", (size / 2));
    front.setAttributeNS(null, "r",  (size * 0.37)); //about 34% 
    front.setAttributeNS(null, "fill", "#ddd");
    chart.appendChild(front);
    
    //TEXTO se tendria que adaptar.
    var text=document.createElementNS(svgns,"text");
    var numDig=str.length;
    text.setAttributeNS(null,"x",size/2 );//Tener en cuenta num digitos
    text.setAttributeNS(null,"y",size/1.5 );
    text.setAttributeNS(null,"fill","black");
    text.setAttributeNS(null,"font-size",size/2);
    text.setAttributeNS(null,"style","text-anchor: middle; alignment-baseline:baseline");
    var textNode =...