Skip to content
Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element
Find file
Pull request Compare This branch is 161 commits behind rendro:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples
img
Makefile
Readme.md
jquery.easy-pie-chart.coffee
jquery.easy-pie-chart.css
jquery.easy-pie-chart.js

Readme.md

easy pie chart

Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These chars are highly customizable and very easy to implement.

Get started

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

Configuration parameter

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

Property (Type) Default Description
barColor #ef1e25 The color of the curcular bar. You can pass either a css valid color string like rgb, rgba hex or string colors. But you can also pass a function that accepts the current percentage as a value to return a dynamically generated color.
trackColor #f2f2f2 The color of the track for the bar, false to disable rendering.
scaleColor #dfe0e0 The color of the scale lines, false to disable rendering.
lineCap round Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
lineWidth 3 Width of the bar line in px.
size 110 Size of the pie chart in px. It will always be a square.
animate false Time in milliseconds for a eased animation of the bar growing, or false to deactivate.
onStart $.noop Callback function that is called at the start of any animation (only if animate is not false).
onStop $.noop Callback function that is called at the end of any animation (only if animate is not false).

Public plugin methods

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>

Credits

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

Something went wrong with that request. Please try again.