Easy Pie Charts
Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices.
Page Demo Plugin WebsiteIn Material Admin, Easy Pie charts are further customized to render in multiple sizes and to have custom values using data attributes. In order to use this chart in Material Admin way, you'll have to pass 4 data attribute values:
data-percent
: Percent number the pie chart should havedata-size
: Size of the pie chartdata-track-color
: Color of the trackdata-bar-color
: Color of the bar
<div class="easy-pie-chart" data-percent="74" data-size="140" data-track-color="rgba(0,0,0,0.5)" data-bar-color="#fff">
<span class="easy-pie-chart__value">74</span>
</div>
<div class="easy-pie-chart" data-percent="85" data-size="120" data-track-color="rgba(0,0,0,0.5)" data-bar-color="#fff">
<span class="easy-pie-chart__value">85</span>
</div>
<div class="easy-pie-chart" data-percent="50" data-size="100" data-track-color="rgba(0,0,0,0.5)" data-bar-color="#fff">
<span class="easy-pie-chart__value">50</span>
</div>
<div class="easy-pie-chart" data-percent="22" data-size="80" data-track-color="rgba(0,0,0,0.5)" data-bar-color="#fff">
<span class="easy-pie-chart__value">22</span>
</div>
<div class="easy-pie-chart" data-percent="64" data-size="60" data-track-color="rgba(0,0,0,0.5)" data-bar-color="#fff">
<span class="easy-pie-chart__value">64</span>
</div>
if($('.easy-pie-chart')[0]) {
$('.easy-pie-chart').each(function () {
var value = $(this).data('value');
var size = $(this).data('size');
var trackColor = $(this).data('track-color');
var barColor = $(this).data('bar-color');
$(this).find('.easy-pie-chart__value').css({
lineHeight: (size - 2)+'px',
fontSize: (size/5)+'px',
color: barColor
});
$(this).easyPieChart ({
easing: 'easeOutBounce',
barColor: barColor,
trackColor: trackColor,
scaleColor: 'rgba(0,0,0,0)',
lineCap: 'round',
lineWidth: 1,
size: size,
animate: 3000,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
})
});
}
Requirements:
/vendors/easy-pie-chart/jquery.easypiechart.min.js