Easy Pie chart code

by Shankar

HTML

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>jQuery</title>
	<meta name="viewport" content="width=device-width"/>
	<link rel="stylesheet" href="style.css"/>
</head>
<body>

	<ul>
		<li><a href="index.html">Vanilla JS</a></li>
		<li><a href="jquery.html" class="active">jQuery plugin</a></li>
		<li><a href="angular.html">Angular module</a></li>
		<li><a href="requirejs.html">RequireJS module</a></li>
	</ul>

	<span class="chart" data-percent="86">
		<span class="percent"></span>
	</span>

	<span class="chart" data-percent="45">
		<span class="percent"></span>
	</span>

	<!-- <span class="btn js_update">Update chart</span> -->

	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
	<script src="../dist/jquery.easypiechart.min.js"></script>
	<script>
	$(function() {
		$('.chart').easyPieChart({
			easing: 'easeOutBounce',
			onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.round(percent));
			},
			size: 110,
			// animate: 2000,
			lineCap: 'butt',
			scaleColor: false,
			// barColor: '#222',
			lineWidth: 3
		});
		// var chart = window.chart = $('.chart').data('easyPieChart');
		// $('.js_update').on('click', function() {
		// 	chart.update(Math.random()*200-100);
		// });
	});
	</script>
</body>
</html>

CSS

/* 

Change the below CSS code for Align to percent and size of Circle

.chart {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  margin-top: 90px;
  margin-bottom: 90px;
  text-align: center;
}
.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}

*/

JavaScript

<!-- Refer Easy pie chart library github
https://github.com/rendro/easy-pie-chart
-->