A Pen by Joey Clouvel.

Customisable-Animated-Donut-Chart.markdown

Customisable Animated Donut Chart

Few lines of code to create animated Donut charts. Their size and the thickness of their strokes can be easily edited via CSS. The javascript will do the rest!

A Pen by Joey Clouvel on CodePen.

License.

index.html

<h1>Customisable Animated Donut Chart</h1>

<div class="donut-chart" data-percent="80">
	<p>Text <span>subtext</span></p>
</div>

<div class="donut-chart red" data-percent="60">
	<p>Text <span>subtext</span></p>
</div>

<div class="donut-chart green" data-percent="22">
	<p>Text <span>subtext</span></p>
</div>

script.js

function Donut_chart(options) {
	
	this.settings = $.extend({
		element: options.element,
		percent: 100
	}, options);
	
	
	this.circle = this.settings.element.find('path');
	this.settings.stroke_width = parseInt(this.circle.css('stroke-width'));
	this.radius = (parseInt(this.settings.element.css('width'))-this.settings.stroke_width)/2;
	this.angle = -97.5; // Origin of the draw at the top of the circle
	this.i = Math.round(0.75*this.settings.percent);
	this.first = true;
	
	this.animate = function() {
		this.timer = setInterval(this.loop.bind(this), 10);
	};
	
	this.loop = function(data) {
		this.angle += 5;  
		this.angle %= 360;
		var radians = (this.angle/180) * Math.PI;
		var x = this.radius + this.settings.stroke_width/2 + Math.cos(radians) * this.radius;
		var y = this.radius + this.settings.stroke_width/2 + Math.sin(radians) * this.radius;
		if(this.first==true) {
			var d = this.circle.attr('d')+" M "+x+" "+y;
			this.first = false;
		}
		else {
			var d = this.circle.attr('d')+" L "+x+" "+y;
		}
		this.circle.attr('d', d);
		this.i--;
		
		if(this.i<=0) {
			clearInterval(this.timer);
		}
	}
};

$(function() {
	$('.donut-chart').each(function(index) {
		$(this).append('<svg preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink" id="donutChartSVG'+index+'"><path d="M100,100" /></svg>');
		var p = new Donut_chart({element: $('#donutChartSVG'+index), percent: $(this).attr('data-percent')});
		p.animate();
	});
});

style.css

.donut-chart svg {
	pointer-events: none;
}
.donut-chart svg path {
	fill: none;
	stroke-width: 35px;
	stroke: #19a8ff;
}
			
.donut-chart {
	width: 200px;
	height: 200px;
	position: relative;
	display: inline-block;
}
.donut-chart p {
	margin: 0;
	position: absolute;
	top: 35%;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 2em;
}
.donut-chart span {
	display: block;
	font-size: 0.5em;
}


/* Just for the purpose of this pen */
body {
	text-align: center;
}
.red svg path {
  stroke: #ff3333;
}
.green svg path {
  stroke: #6ad44d;
}