Responsive charts jQuery plugin – Pizza JS
|Responsive charts jQuery plugin – Pizza – uses Adobe’s Snap.SVG JavaScript library and HTML5 data-* attributes to create animated and responsive charts on any device.
Responsive charts jQuery plugin – better pie, donut, line, and bar graphs
Pizza is a responsive charting library (pie, donut, bar, line graph) based on the Snap.SVG framework from Adobe.
The solution focuses on easy integration via HTML markup and CSS instead of JavaScript objects. However we can pass JavaScript objects to Pizza as well.

Usage and implementation
The first step is creating a key with a UL and list elements, to represent each piece of the pie with a data-pie-id attribute pointing to the ID of the chart container.
Example:
<ul data-pie-id="svg"> <li data-value="50">Water (50)</li> <li data-value="30">Beer (30)</li> <li data-value="12">Cola (12)</li> <li data-value="32">Vodka (32)</li> <li data-value="50">Moonshine (50)</li> </ul>
After creating the “legend”, we can include chart container somewhere on the page:
<div id="svg"></div>
The charts can be styled with CSS or SCSS.
To initialize charts, simple call
Pizza.init();
at the end of the page.
Data Options
We can pass options to the chart by using the data-options attribute:
<ul data-pie-id="svg" data-options='{"donut":"true"}'>
or in JS when initializing:
Pizza.init('#myChart', { data: [23, 44, 1, 29, 90] });
Demo and docs at project homepage:
http://zurb.com/playground/pizza-amore-charts-and-graphs
Get Responsive charts jQuery plugin from GitHub:
Available @CDN:
https://cdnjs.com/libraries/pizza
See also:
A responsive jQuery Scatter plot plugin – Scatterplot.js
Animated charts in jQuery – Flot Animator
Chart.js – open source HTML5 Charts
Highcharts: Interactive JavaScript charts for your website
Enjoy!