Easy pie chart - Render and animate nice 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.

Browser support

This plugin supports all major browsers that support the canvas element. With excanvas you can even render the charts on IE 7+8.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: rendro.github.io

1. INCLUDE JS AND CSS FILES

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

2. HTML

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>

3. JAVASCRIPT

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

4. OPTIONS

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

5. API

If you want to update the current percentage of the a pie chart, you can call theupdate 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>