Material Admin Extended Dark

## 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.

Official website and detailed documentation at: https://rendro.github.io/easy-pie-chart/

Live preview: `/other-charts.html`

In order to use this component, make sure to include it's javascript asset file.

    <script src="vendors/bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>

#### Basic example

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 2 data attribute values:

1. `data-percent`: Percent number the pie chart should have
2. `data-pie-size`: Size of the pie chart

    <div class="chart-pie" data-percent="82" data-pie-size="70">
        <span class="chart-pie__value">82</span>
    </div>

    <div class="chart-pie" data-percent="60" data-pie-size="80">
        <span class="chart-pie__value">60</span>
    </div>

    <div class="chart-pie" data-percent="32" data-pie-size="90">
        <span class="chart-pie__value">32</span>
    </div>

    <div class="chart-pie" data-percent="55" data-pie-size="100">
        <span class="chart-pie__value">55</span>
    </div>

    <div class="chart-pie" data-percent="99" data-pie-size="110">
        <span class="chart-pie__value">10</span>
    </div>

    <div class="chart-pie" data-percent="74" data-pie-size="120">
        <span class="chart-pie__value">74</span>
    </div>

    <div class="chart-pie" data-percent="33" data-pie-size="130">
        <span class="chart-pie__value">33</span>
    </div>

    $('.chart-pie').each(function () {
        var value = $(this).data('pie-value');
        var size = $(this).data('pie-size');

        $(this).find('.chart-pie__value').css({
            lineHeight: (size-2)+'px',
            fontSize: (size/4)+'px'
        });

        $(this).easyPieChart ({
            easing: 'easeOutBounce',
            barColor: 'rgba(255,255,255,0.6)',
            trackColor: '#22313a',
            scaleColor: 'rgba(0,0,0,0)',
            lineCap: 'round',
            lineWidth: 2,
            size: size,
            animate: 3000,
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
            }
        })
    });

Source files:

- Plugin
  - CSS: `none`
  - JS: `/vendors/bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js`
- LESS: `/less/inc/chart.less`
- HTML: `/other-charts.html`
- JS(demo): `/demo/js/easy-pie-charts.js`