Peity • progressive pie charts with jQuery

Peity • progressive pie charts.


Minified 2.3Kb (+gzipped 1.4Kb)

Pie Charts

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



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



Line Charts

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



<span class="line">5,3,9,6,5,9,7,3,5,2</span>



Bar Charts

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



<span class="bar">5,3,9,6,5,9,7,3,5,2</span>



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) { ... } )


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.

Chart updated: 1/5


<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)


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.


<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 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, width: 32 } $ = { colour: "#4d89f9", delimeter: ",", height: 16, max: null, width: 32 }
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s