Peity (sounds like deity) is a simple jQuery plugin that converts an element's content into a simple <svg>
mini pie donut line or bar chart and is compatible with any browser that supports <svg>
: Chrome, Firefox, IE9+, Opera, Safari.
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.
Color | Layout |
---|---|
Primary | 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041 |
Info | 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041 |
Success | 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041 |
Warning | 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041 |
Danger | 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041 |
Multiple Colors | 4,7,6,5 |
Donut charts are the same as pie charts and take the same options with an added innerRadius
option which defaults to half the radius..
Color | Layout |
---|---|
Primary | 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041 |
Info | 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041 |
Success | 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041 |
Warning | 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041 |
Danger | 1/5 226/360 0.52/1.561 1,4 226,134 0.52,1.041 |
Line charts work on a comma-separated list of digits. Line charts can take the following options: delimiter
, fill
, height
, max
, min
, stroke
, strokeWidth
and width
.
Color | Layout |
---|---|
Primary | 5,3,9,6,5,9,7,3,5,2 |
Info | 5,3,2,-1,-3,-2,2,3,5,2 |
Success | 0,-3,-6,-4,-5,-4,-7,-3,-5,-2 |
Warning | 5,3,9,6,5,9,7,3,5,2 |
Danger | 5,3,2,-1,-3,-2,2,3,5,2 |
Bar charts work in the same way as line charts and take the following options: delimiter
, fill
, height
, max
, min
, padding
and width
Color | Layout |
---|---|
Primary | |
Info | |
Success | |
Warning | |
Danger | |
Multiple Colors |