Peity

Peity (sounds like deity) is a simple jQuery plugin that converts an element's content into a simple <canvas> mini pie 2/5 line 5,3,9,6,5,9,7,3,5,2 or bar chart 5,3,9,6,5,9,7,3,5,2 and is compatible with any browser that supports <canvas>: Chrome, Firefox, IE9+, Opera, Safari.

Download version 0.6.0

Uncompressed 5.0Kb

jquery.peity.js

Minified 2.4Kb (+gzipped 1.1Kb)

jquery.peity.min.js

Source

github.com/benpickles/peity

Pie Charts

Simply call peity("pie") on a jQuery selection. You can also pass colours, diameter and delimeter options.

1/5 226/360 0.52/1.561

<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>

$("span.pie").peity("pie")

Line Charts

Line charts work on a comma-separated list of digits. Line charts can take the following options: colour, strokeColour, strokeWidth, delimeter, max, min, width and height.

5,3,9,6,5,9,7,3,5,2 5,3,2,-1,-3,-2,2,3,5,2 0,-3,-6,-4,-5,-4,-7,-3,-5,-2

<span class="line">5,3,9,6,5,9,7,3,5,2</span>
<span class="line">5,3,2,-1,-3,-2,2,3,5,2</span>
<span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>

$(".line").peity("line")

Bar Charts

Bar charts work in the same way as line charts and take the following options: colour, delimeter, max, min, width and height.

5,3,9,6,5,9,7,3,5,2 5,3,2,-1,-3,-2,2,3,5,2 0,-3,-6,-4,-5,-4,-7,-3,-5,-2

<span class="bar">5,3,9,6,5,9,7,3,5,2</span>
<span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span>
<span class="bar">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>

$(".bar").peity("bar")

Custom Charts

You can easily add your own custom chart by registering it with Peity with name, defaults and the draw function which receives an options object.

$.fn.peity.add("custom", {
    colour: "#FFCC00"
  }, function(opts) {
    ...
  }
)

Events

Peity adds a "change" event trigger to your graph elements, so if you update their data your can regenerate one or more charts by triggering change() on them.

• 0 1 2 3 4 5
• 0 1 2 3 4 5
• 0 1 2 3 4 5

Nothing's happened yet.

<ul>
  <li>
    <span class="graph"></span>
    <select>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4" selected>4</option>
      <option value="5">5</option>
    </select>
  </li>
  <li>
    <span class="graph"></span>
    <select>
      <option value="0">0</option>
      <option value="1" selected>1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </li>
  <li>
    <span class="graph"></span>
    <select>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3" selected>3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </li>
</ul>

<p id="notice">Nothing's happened yet.</p>

$("select").change(function() {
  $(this)
    .siblings("span.graph")
    .text($(this).val() + "/" + 5).change()
}).change()

var chartUpdate = function(event, value, max) {
  $("#notice").text(
    "Chart updated: " + value + "/" + max
  )
}

$("span.graph")
  .peity("pie")
  .bind("chart:changed", chartUpdate)

Tips

Per-element Colour and Diameter

Options can be passed a function that returns the actual value allowing you to do something like this where colours and diameter are derived from the element that Peity is working on.

1/7 2/7 3/7 4/7 5/7 6/7 7/7

<span data-colour="red"    data-diameter="40">1/7</span>
<span data-colour="orange" data-diameter="36">2/7</span>
<span data-colour="yellow" data-diameter="32">3/7</span>
<span data-colour="green"  data-diameter="28">4/7</span>
<span data-colour="blue"   data-diameter="24">5/7</span>
<span data-colour="indigo" data-diameter="20">6/7</span>
<span data-colour="violet" data-diameter="16">7/7</span>

$(".diameter span").peity("pie", {
  colours: function() {
    return ["#dddddd", this.getAttribute("data-colour")]
  },
  diameter: function() {
    return this.getAttribute("data-diameter")
  }
})

Defaults

Defaults can be overridden globally like so:

$.fn.peity.defaults.pie = {
  colours: ["#fff4dd", "#ff9900"],
  delimeter: "/",
  diameter: 16
}

$.fn.peity.defaults.line = {
  colour: : "#c6d9fd",
  strokeColour: "#4d89f9",
  strokeWidth: 1,
  delimeter: ",",
  height: 16,
  max: null,
  min: 0,
  width: 32
}

$.fn.peity.defaults.bar = {
  colour: "#4d89f9",
  delimeter: ",",
  height: 16,
  max: null,
  min: 0,
  width: 32
}