var pk = pk || {};

(function(pk) {
    pk.chart = function(opt) {
        var tpl="<div class='pk-chart'></div>",
			el=pk.replaceEl(opt.element, tpl),
			l=pk.layout(el),
			svgEl=pk.createEl("<svg />"),
			data=opt.data || [],
			series=opt.series,
			seriesMeta={},
			axis=opt.axis,
			stroke=50;			
		if(data.length===0){return;}
		
		var d = l.height > l.width ? l.width : l.height;
		
		pk.attribute(svgEl, {height:d, width:d});



		for(var s in series){		
			seriesMeta[series[s]]={}
			seriesMeta[series[s]].data=[];		
			seriesMeta[series[s]].sum=0;
			// loop through dataset
			for(var i=0;i<data.length;i++){
				seriesMeta[series[s]].data.push(data[i][series[s]]);
				seriesMeta[series[s]].sum+=Math.abs(parseInt(data[i][series[s]],0));
			}			
			seriesMeta[series[s]].min=Math.min.apply(Math, seriesMeta[series[s]].data);
			seriesMeta[series[s]].max=Math.max.apply(Math, seriesMeta[series[s]].data);
			seriesMeta[series[s]].range=Math.abs(seriesMeta[series[s]].max-seriesMeta[series[s]].min);
		}
		
		for(s in seriesMeta){
		 
			console.log(document.createElementNS ("http://www.w3.org/2000/svg","line"));
			 
			var ttlArc=0;
			for(var i=0;i<seriesMeta[s].data.length;i++){			
				var pathEl=pk.createEl("<path x='"+d/2+"' y='"+d/2+"' fill='none' stroke='blue' d='' stroke-width='"+(stroke/series.length)+"'/>");
				svgEl.appendChild(pathEl);
				var arc = Math.round((Math.abs(seriesMeta[s].data[i])/seriesMeta[s].sum)*360);
				// pk.attribute(pathEl, 'd', pk.svg.arcPath(d/2, d/2, d/2, ttlArc, ttlArc+arc)); 
				pk.attribute(pathEl, 'd', pk.svg.arcPath(d/2, d/2, (d/2)-stroke, ttlArc, ttlArc+arc));  
				ttlArc+=arc;				
			}			
		}		
		
		el.appendChild(svgEl);
		// (val - min) * 100 / range +


		
    };
    return pk;
})(pk);

@@ -284,23 +284,148 @@
 xis,
-%0A%09%09%09stroke=50;%09
+ %0A%09%09%09d = l.height %3E l.width ? l.width : l.height,%0A%09%09%09stroke= opt.center ? (d/2)-(d*((opt.center/2) /100)) : d/2,%0A%09%09%09colors=opt.colors %7C%7C %7B%7D;
 %09%09%0A%09
@@ -457,63 +457,11 @@
 rn;%7D
-%0A
 %09%09%0A
-%09%09var d = l.height %3E l.width ? l.width : l.height;%0A
 %09%09%0A%09
@@ -504,18 +504,16 @@
 h:d%7D);%0A%0A
-%0A%0A
 %09%09for(va
@@ -629,35 +629,9 @@
 m=0;
-%0A%09%09%09// loop through dataset
+ 
 %0A%09%09%09
@@ -792,16 +792,122 @@
 %5D%5D,0));%0A
+%09%09%09%09if(!colors%5Bdata%5Bi%5D%5Baxis.x%5D%5D)%7B%0A%09%09%09%09%09colors%5Bdata%5Bi%5D%5Baxis.x%5D%5D=pk.color.percentage(i/data.length); %0A%09%09%09%09%7D%0A
 %09%09%09%7D%09%09%09%0A
@@ -1164,16 +1164,29 @@
 ;%0A%09%09%7D%0A%09%09
+var sIndex=0;
 %0A%09%09for(s
@@ -1208,94 +1208,35 @@
 %7B%0A%09%09
- %0A%09%09%09console.log(document.createElementNS (%22http://www.w3.org/2000/svg%22,%22line%22));%0A%09%09%09 
+%09seriesMeta%5Bs%5D.data.sort();
 %0A%09%09%09
@@ -1383,12 +1383,35 @@
 ke='
-blue
+%22+colors%5Bdata%5Bi%5D%5Baxis.x%5D%5D+%22
 ' d=
@@ -1578,19 +1578,93 @@
 0);%0A%09%09%09%09
-// 
+var r=((d-stroke/2)/2) - (stroke/2*sIndex);%0A%09%09%09%09r = sIndex %3E 0 ? r+2: r;%0A%09%09%09%09
 pk.attri
@@ -1706,19 +1706,18 @@
 2, d/2, 
-d/2
+ r
 , ttlArc
@@ -1736,127 +1736,202 @@
 )); 
+ 
 %0A%09%09%09%09
-pk.attribute(pathEl, 'd', pk.svg.arcPath(d/2, d/2, (d/2)-stroke, ttlArc, ttlArc+arc));  %0A%09%09%09%09ttlArc+=arc;
+ttlArc+=arc;%0A%09%09%09%09if(pk.tooltip)%7B%0A%09%09%09%09%09pk.tooltip(%7Belement:pathEl, content:data%5Bi%5D%5Baxis.x%5D+%22: %22+data%5Bi%5D%5Bs%5D + %22 (%22+Math.round(arc*100/360)+%22%25)%22, position:'bottom'%7D);%0A%09%09%09%09%7D%0A
 %09%09%09
+%7D
 %09%0A%09%09%09
-%7D
+sIndex++;
 %09%09%09%0A

Update chart.js