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 Website

In 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:

  1. data-percent: Percent number the pie chart should have
  2. data-size: Size of the pie chart
  3. data-track-color: Color of the track
  4. data-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