Peity

Peity (sounds like deity) is a jQuery
plugin that converts an element's content into a <svg>
mini pie 2/5
donut 5,2,3
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 <svg>:
Chrome, Firefox, IE9+, Opera, Safari.

Download version 3.3.0

Pie Charts

Call peity("pie") on a jQuery selection. There are
two subtly different pie chart semantics, a "/" delimiter is assumed to
mean "three out of five" and only the first two values will be drawn,
otherwise all of the values are included in the chart and the total is the
sum of all values.

You can also pass delimiter, fill,
height, radius and width
options. Passing a radius will set the correct width and height, the pie
will always be a circle that fits the available space.

JavaScript

$(".data-attributes span").peity("donut")

Setting Colours Dynamically

Pie, donut and bar chart colours can be defined dynamically based on the
values of the chart. When passing an array its values are cycled, when
passing a function it is called once for each value allowing you to define
each bar or segment's colour. The callback is invoked with the value, its
index, and the full array of values - the same arguments as the callback for
Array#forEach.

Custom Charts

You can add a custom chart type by registering it with Peity with a name,
defaults object, and custom chart drawing function which is called with an
options object. See the existing charts for examples.