Responsive Pie Chart Plugin with jQuery and Snap.SVG - Pizza

Pizza Pie Charts is a jQuery plugin that makes use of Adobe's Snap.SVG javascript library and HTML5 data-* attributes to create a responsive and animated pie & donut chart for any device. The pie chart will be steaming hot with SVG so that it looks good on retina devices and HiDPI devices.

See also:

• Creating A Flat Pie Chart with jQuery and CSS3 - piechart

Basic Usage:

1. Include the required jQuery Pizza Pie Charts Stylesheet in the page.

<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />

2. Using Html unordered list to represent each piece of the pie chart with a data-pie-id attribute pointing to the ID of your chart container.

<ul data-pie-id="svg">
<li data-value="116">jQuery Slider Plugins (116)</li>
<li data-value="119">jQuery Animation Plugins (119)</li>
<li data-value="62">jQuery Lightbox Plugins (62)</li>
<li data-value="25">jQuery Tooltip Plugins (25)</li>
<li data-value="18">jQuery Mobile Plugins (18)</li>
</ul>

3. Create a container for the pie chart.

<div id="svg"></div>

4. Include the jQuery library, Snap.SVG library, and pizza.js script in your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="javascripts/vendor/snap.svg.js"></script> 
<script src="javascripts/pizza.js"></script> 

5. Call the function and you're done.

<script>
$(window).load(function() {
Pizza.init();
})
</script>

6. Settings.

<script>
$(window).load(function() {
Pizza.init({
donut: false, // enable donut chart
donut_inner_ratio: 0.4,   // between 0 and 1
percent_offset: 35, // relative to radius
stroke_color: '#333',
stroke_width: 0,
show_percent: true, // show or hide the percentage on the chart.
animation_speed: 500,
animation_type: 'elastic' // options: backin, backout, bounce, easein, easeinout, easeout, linear
});
})
</script>

7. You can also pass the data options in the javascript instead of using Html unordered list.

<script>
$(window).load(function() {
Pizza.init('#myChart', {
data: [23, 44, 1, 29, 90]
});
})
</script>

Change log:

v0.2.1 (2014-02-28)

• update

---

This awesome jQuery plugin is developed by zurb. For more Advanced Usages, please check the demo page or visit the official website.