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:

https://github.com/zurb/pizza

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!