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.

To use the easy pie chart plugin you need to load the current version of jQuery (testet with 1.7.2) and the source (css+js) of the plugin. You can also use bower to install the component:

bower install jquery.easy-pie-chart

Then just add the following lines to the head of your website:

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

<link rel="stylesheet"type="text/css" href="/path/to/jquery.easy-pie-chart.css">

The second step is to add a element to your site to represent chart and add the data-percent attribute with the percent number the pie chart should have:

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

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

<script type="text/javascript">
$(function() {
    $('.chart').easyPieChart({
        //your configuration goes here
    });
});
</script>

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

If you want to update the current percentage of the a pie chart, you can call the update method. The instance of the plugin is saved in the jQuery-data.

<script type="text/javascript">
$(function() {
    //create instance
    $('.chart').easyPieChart({
        animate: 2000
    });
    //update instance after 5 sec
    setTimeout(function() {
        $('.chart').data('easyPieChart').update(40);
    }, 5000);
});
</script>

Thanks to Rafal Bromirski for making this dribble shot which inspired me and Philip Thrasher for his CoffeeScript jQuery boilerplate

• Added missing onStop method
• cast percent to float to avoid breaking chart if a string is passed to the update method

• Use requestAnimationFrame for smooth animations
• Added onStep option to get the current value during animations

• Added retina support

• Initial version