Pizza Amore!

Deliver up pie charts, bar charts and line graphs for your responsive site.

Download
Pizza amore

Create charts and line graphs for any device with Pizza Amore. Our menu now includes bar charts and line graphs. Not to worry, you can still have a piece of pie ... charts that is. Your Amore will be steaming hot with SVG so it'll look good on retina devices and HiDPI devices.

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

  • Pepperoni
  • Sausage
  • Cheese
  • Mushroom
  • Pepperoni
  • Sausage
  • Cheese
  • Mushroom
  • Chicken
  • Other

Bar Charts

  • Pepperoni
  • Sausage
  • Cheese
  • Mushroom
  • Chicken
  • Other

Line Graphs

Cheese Popularity

  • 2001
  • 2002
  • 2003
  • 2004
  • 2005
  • 2006

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

Score an awesome product engineering or design job

via Job Board from ZURB

Get Your Pizza On!

Grab your box of Pizza Pie Charts by downloading them from Github.

Download
Startup playground

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×