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.
Pie Charts
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.
Examples
| 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 |
Donut Charts
Donut charts are the same as pie charts and take the same options with an added innerRadius option which defaults to half the radius..
Examples
| 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
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.
Examples
| 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
Bar charts work in the same way as line charts and take the following options: delimiter, fill, height, max, min, padding and width
Examples
| Color | Layout |
|---|---|
| Primary | |
| Info | |
| Success | |
| Warning | |
| Danger |
data-* attributes
Data attributes can be used to pass custom settings per-chart - options explicitly passed to the peity() function take precedence over data-* attributes.
Examples
1/7 2/7 3/7 4/7 5/7 6/7 7/7
