easy pie chart

easy pie chart is a leightweight plugin to draw simple, animated pie charts for single values.

It shipps in three different versions:

• Vanilla JS (no dependencies) (~840 bytes)
• jQuery plugin (~890 bytes)
• Angular Module (~970 bytes)

The plugin is:

• highly customizable,
• very easy to implement,
• resolution independent (retina optimized),
• uses requestAnimationFrame for smooth animations on modern devices and
• works in all modern browsers and even in IE7+ with excanvas.

Get started

jQuery

To use the easy pie chart plugin you need to load the current version of jQuery (tested with 1.6.4) and the source of the plugin.

You can also use bower to install the component:

$ bower install jquery.easy-pie-chart

How to use the plugin:

<div class="chart" data-percent="73" data-scale-color="#ffb400">73%</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/path/to/jquery.easy-pie-chart.js"></script>

Finally you have to initialize the plugin with your desired options:

$(function() {
    $('.chart').easyPieChart({
        //your options goes here
    });
});

Vanilla JS

If you don't want to use jQuery, implement the vanilla JS version without any dependencies:

<div class="chart" data-percent="73">73%</div>

<script src="/path/to/easy-pie-chart.js"></script>
<script>
var element = document.querySelector('.chart');
new EasyPieChart(element, {
    // your options goes here
});
</script>

Angular Module

Angular module for the easy pie chart plugin

<div ng-controller="chartCtrl">
    <div easypiechart options="options" percent="percent"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="../dist/angular.easypiechart.min.js"></script>
<script>
    var app = angular.module('app', ['easypiechart']);
    app.controller('chartCtrl', ['$scope', function ($scope) {
        $scope.percent = 65;
        $scope.options = {
            animate:false,
            barColor:'#2C3E50',
            scaleColor:false,
            lineWidth:20,
            lineCap:'circle'
        };
    }]);
</script>

Options parameter

You can pass these options to the initialize function to set a custom look and feel for the plugin.

Property (Type)	Default	Description
barColor	#ef1e25	The color of the curcular bar. You can either pass a valid css color string, or a function that takes the current percentage as a value and returns a valid css color string.
trackColor	#f2f2f2	The color of the track, or false to disable rendering.
scaleColor	#dfe0e0	The color of the scale lines, false to disable rendering.
scaleLength	5	Length of the scale lines (reduces the radius of the chart).
lineCap	round	Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
lineWidth	3	Width of the chart line in px.
size	110	Size of the pie chart in px. It will always be a square.
rotate	0	Rotation of the complete chart in degrees.
animate	false	Time in milliseconds for an animation of the bar growing, or false to deactivate animations.
easing	defaultEasing	Easing function or string with the name of a jQuery easing function

Callbacks

All callbacks will only be called if animate is not false.

Callback(parameter, ...)	Description
onStart(from, to)	Is called at the start of any animation.
onStep(from, to, currentValue)	Is called during animations providing the current value (the method is scoped to the context of th eplugin, so you can access the DOM element via this.el).
onStop(from, to)	Is called at the end of any animation.

Plugin API

If you want to update the current percentage of the a pie chart, you can call the update method.

jQuery implementation

$(function() {
    // instantiate the plugin
    ...
    // update
    $('.chart').data('easyPieChart').update(40);
});

vanilla JS

// instantiate the plugin
var chart = new EasyPieChart(element, options);
// update
chart.update(40);

Angular

For a value binding in angular you need to add the percent attribute and bind it to your angular controller as shown above.

Browser support

Native support:

• Chrome
• Safari
• FireFox
• Opera
• Internet Explorer 9+

With excanvas polyfill:

• Internet Explorer 7, 8

Test

To run the test just use the karma adapter of grunt: grunt karma:unit

Credits

Thanks to Rafal Bromirski for designing this dribble shot which inspired me building this plugin.