JS core for SVG Donut 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 Donut(cx, cy, radius, data) {

	function arcradius(cx, cy, radius, degrees) {
		var radians = (degrees - 90) * Math.PI / 180.0;
		return { x: cx + (radius * Math.cos(radians)), y: cy + (radius * Math.sin(radians)) };
	}

	var decimals = 4;
	var total = 0;
	var arr = [];
	var beg = 0;
	var end = 0;
	var count = 0;

	var half = radius / 2;
	var midpoint = radius / 2.4;

	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 = {};

		var p = (((item.value + 1) / total) * 100).floor(2);

		count += p;

		if (i === length - 1 && count < 100)
			p = p + (100 - count);

		end = beg + ((360 / 100) * p);
		tmp.index = i;
		tmp.value = item.value;
		tmp.data = item;

		var b = arcradius(cx, cy, radius, end);
		var e = arcradius(cx, cy, radius, beg);
		var la = (end - beg) <= 180 ? 0 : 1;

		tmp.d = ['M', b.x.floor(decimals), b.y.floor(decimals), 'A', radius, radius, 0, la, 0, e.x.floor(decimals), e.y.floor(decimals)].join(' ');
		arr.push(tmp);
		beg = end;
	}

	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 = Donut(centerX, centerY, radius, data);
  for (var i = 0; i < arr.length; i++) {
    var item = arr[i];
    svg.asvg('<g><path d="{0}" stroke="{1}" fill="none" stroke-width="50" /></g>'.format(item.d, color[i]));
  }

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