Pizza Amore!

Example

Pizza Amore 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.

Pie Charts

Bar Charts

Line Graphs

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:

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.

Pie Chart

<ul data-pie-id="my-cool-pie-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>

Bar Chart

<ul data-bar-id="my-cool-bar-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-bar-chart"></div>

Line Graph

<ul data-pie-id="my-cool-line-graph">
  <li data-x="36" data-y="1">Pepperoni</li>
  <li data-x="14" data-y="2">Sausage</li>
  <li data-x="8" data-y="3">Cheese</li>
  <li data-x="11" data-y="4">Mushrooms</li>
  <li data-x="7" data-y="5">Chicken</li>
  <li data-x="24" data-y="6">Other</li>
</ul>
<div id="my-cool-line-graph"></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;

$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.

We have two Sass mixins here that will give you two easy results. Just include one of them and you're all set.

@mixin darkened-children($num-children, $color) {
  @for $i from 1 through $num-children {
    $color: scale-color($color, $lightness: -10%);
    & > *:nth-child(#{$num-children}n+#{$i}) {
      color: $color;
    }
  }
}

This option will adjust the darkness of each segment if your base is a lighter color.

@mixin lightened-children($num-children, $color) {
  @for $i from 1 through $num-children {
    $color: scale-color($color, $lightness: 10%);
    & > *:nth-child(#{$num-children}n+#{$i}) {
      color: $color;
    }
  }
}

This option will adjust the lightness of each segment if your base is a lighter color.

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-pie-id] li:nth-child(1) {
  color: red;
}

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

ul[data-pie-id] 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,
  show_grid: true,
  bar_spacer: 100,
  bar_intervals: 6,
  animation_type: 'elastic' // options: backin, backout, bounce, easein, 
}                           //          easeinout, easeout, linear