Pizza Pie Charts

Example

Pizza is an easy to use plugin. It's built with our responsive framework Foundation so you can quickly install it into your current Foundation project.

The Setup

You’ve got to include our JS plugin in the footer of the page and our CSS in the head.

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

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

The HTML

The main goal of Pizza was to be super simple, so the HTML is no more than a couple of Lists and some data-attributes. Lets start building one:

<ul data-pie-id="my-cool-chart">
</ul>

We're using a ul for the charts, where all our values will live. Giving it a “data-pie-id” tells our Javascript file that we’re creating a new piechart and the “my-cool-chart” tells it the name of the id we’re assigning that chart.

<ul data-pie-id="my-cool-chart">
  <li data-value="36">Pepperoni</li>
  <li data-value="14">Sausage</li>
  <li data-value="8">Cheese</li>
  <li data-value="11">Mushrooms</li>
  <li data-value="7">Chicken</li>
  <li data-value="24">Other</li>
</ul>

We add list items that will be used for each slice of the pie. They each have a data-value associated with them, which will be used to calculate a percentage for the pie charts.

<ul data-pie-id="my-cool-chart">
  <li data-value="36">Pepperoni</li>
  <li data-value="14">Sausage</li>
  <li data-value="8">Cheese</li>
  <li data-value="11">Mushrooms</li>
  <li data-value="7">Chicken</li>
  <li data-value="24">Other</li>
</ul>
<div id="my-cool-chart"></div>

Finally, we add a div with the ID that matches our data-pie-id. This will be where the actual pie chart lives. Note that you can place these elements in any grid system or divs you’d like.

SASS

So you have a chart, and now it’s time to style it. We’ve used the power of SASS to make it as easy as possible to automate the majority of this process. If you don’t use SASS, you have other options as well.

First lets take a look at the variables we’ve supplied:

//Base color for the charts
$pie-color: $primary-color;

// Max number of items in your list
$items-in-list: 6;

$pie-color will set the base color for your charts and, in this case, we have it set to the $primary-color that we use for Foundation, but it could easily be any Hexadecimal color. $items-in-list lets us know the maximum items you think you’ll use for lists. This helps us create even scaling with our dynamic color selections.

We have two Sass functions here that will give you two easy results. Just comment one of them and uncomment another.

//Adjusts the Hue
@function -modify-color($color, $counter, $depth: $items-in-list) {
  @return adjust_hue($pie-color, $i * ($items-in-list * 3));
}

This option will adjust the hue of each segment giving you a multi-colored pie chart starting with your base color.

//Adjusts the Saturation.
@function -modify-color($color, $counter, $depth: ($items-in-list + 1)) {
  @return lighten($pie-color, $i * ($items-in-list + 1));
}

This option adjusts the the saturation of the base color in an increment matching the number of of segments you specified above.

CSS

If you don’t want to use SASS or need more specific color options, you can use CSS to assign colors to each li.

ul[data-graph] li:nth-child(1) {
  color: red;
}

ul[data-graph] li:nth-child(2) {
  color: red;
}

ul[data-graph] li:nth-child(3) {
  color: yellow;
}

JavaScript

Once you’ve included your markup and your styles, you can initialize your pie charts by calling:

Pizza.init();

The chart will automatically update on resize. If you change the values specified for the chart, or add new charts to the page, you can run the initialization again to reload the chart.

You can change the data by either updating the DOM and running the initialization script again, or by running intialization again and passing the data as an array in the options object:

Pizza.init('#example1', {
  data: [23, 43, 17, 7, 11]
});

Settings can be configured by passing a second parameter to the initialization:

Pizza.init(document.body, {border-size: 0});

Or by setting them on the element directly. For instance to change the pie graph to a donut you can do the following:

<ul data-pie-id="my-cool-chart" data-options='{"donut": "true"}'>
  <li data-value="36">Pepperoni</li>
  <li data-value="14">Sausage</li>
  <li data-value="8">Cheese</li>
  <li data-value="11">Mushrooms</li>
  <li data-value="7">Chicken</li>
  <li data-value="24">Other</li>
</ul>
<div id="my-cool-chart"></div>

Here are all the options that you can configure:

{
  donut: false,
  donut_inner_ratio: 0.4,   // between 0 and 1
  percent_offset: 30,       // 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