JS core for SVG Pie chart

by Peter Širka

HTML

<script src="https://cdn.componentator.com/[email protected]"></script>
We use only one dependency jComponent for generating of SVG elements. But you don't need it:

<svg id="svg" width="600" height="600"></svg>

JavaScript

function Pie(cx, cy, radius, data) {

	var decimals = 4;
	var total = 0;
	var offset = 0;
	var offset2;
	var arr = [];
	var x;
	var y;
	var la;
	var radians;

	for (var i = 0; i < data.length; i++)
		total += data[i].value;

	for (var i = 0; i < data.length; i++) {

		var item = data[i];
		var tmp = {};

		tmp.index = i;
		tmp.value = item.value;
		radians = ((((item.value / total) * 360) * Math.PI) / 180).floor(decimals);
		offset2 = ((offset / total) * 360).floor(decimals);
		tmp.data = item;

		x = (cx + Math.sin(radians) * radius).floor(decimals);
		y = (cy - Math.cos(radians) * radius).floor(decimals);
		la = radians > Math.PI ? 1 : 0;

		// Arc
		tmp.d = 'M{0} {1},L{0} {2},A{3} {3},0 {4} 1,{5} {6}Z'.format(cx, cy, cy - radius, radius, la, x, y);
		tmp.transform = 'rotate({0}, {1}, {2})'.format(offset2, cx, cy);

		// Text
		x = (cx + Math.sin(radians / 2) * radius / 2).floor(decimals);
		y = (cy - Math.cos(radians / 2) * radius / 2).floor(decimals);
		tmp.text = 'x="{0}" y="{1}" transform="rotate({2},{0},{1})"'.format(x, y, -offset2);

		offset += item.value;
		arr.push(tmp);
	}

	return arr;
}


// USAGE
(function(svg) {

  var data = [{ value: 33 }, { value: 20 }, { value: 80 }, { value: 48 }];
  var centerX = 300;
  var centerY = 300;
  var radius = 250;
  var color = ['#F6BB42', '#8CC152', '#3BAFDA', '#967ADC', '#DA4453'];

  var arr = Pie(centerX, centerY, radius, data);
  for (var i = 0; i < arr.length; i++) {
    var item = arr[i];
    svg.asvg('<g transform="{0}"><path d="{1}" fill="{4}" /><text fill="white" font-size="25" {2}>{3}</text></g>'.format(item.transform, item.d, item.text, item.value, color[i]));
  }

})($('#svg'));