Generates a pie/donut chart widget using HTML5 <canvas>
element.
See https://github.com/ozzyogkush/jquery.donutchart.
- Firefox 2+
- Google Chrome 4.0+
- Safari 3.10+
- Opera 9.0+
- Internet Explorer 9+
- jQuery 1.7.0+
Dynamically generates a circular chart, with a 'donut hole' in the middle, that fills in the foreground to the percentage specified by the 'data-percent' data value stored on the element on which this is being run.
By default, animates the percentage from 0 to the value specified.
Create a <div>
element. On page DOM load/ready, call the donutchart() with or
without any overridden options.
If you need to re-animate the chart or update to a new percentage, you can pass a method name and optionally a start value, and it will re-animate to the same 'data-percent'. ####Exposed methods:
- animate(start_value)
@changelog 0.2 - fixed a small bug related to percentage values being parsed as strings; now stores newly created DOM elements as data on the original element
<button id="re_animate_btn">Re-animate</button><br /><br />
<div id="donutchart1" data-percent="50"></div>
<div id="donutchart2" data-percent="65"></div>
<div id="donutchart3" data-percent="85"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#donutchart1").donutchart({});
$("#donutchart2").donutchart({size:200,
color:'blue',
animate:false});
$("#donutchart3").donutchart({size:300,
color:'green',
donut_width:90,
background_color:"#888"});
if ($.ui !== undefined) {
$('#re_animate_btn').button();
}
$('#re_animate_btn').on('click', function() {
$("#donutchart1").donutchart('animate');
$("#donutchart2").donutchart('animate', 30);
$("#donutchart3").donutchart('animate', 10);
});
});
</script>