-
- Mailbox
- HotIndox
- Read Message
- Compose
- Template
News
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
Easy Pie Charts
Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element
Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices.
Rounded
Square
Thin
Thick
Large
Scale
Data Percent
Custom Data
Options
You can pass these options to the initialize function to set a custom look and feel for the plugin.
| Property (Type) | Default | Description |
|---|---|---|
| barColor | #ef1e25 | The color of the curcular bar. You can either pass a valid css color string, or a function that takes the current percentage as a value and returns a valid css color string. |
| trackColor | #f2f2f2 | The color of the track, or false to disable rendering. |
| scaleColor | #dfe0e0 | The color of the scale lines, false to disable rendering. |
| scaleLength | 5 | Length of the scale lines (reduces the radius of the chart). |
| lineCap | round | Defines how the ending of the bar line looks like. Possible values are: butt, round and square. |
| lineWidth | 3 | Width of the chart line in px. |
| size | 110 | Size of the pie chart in px. It will always be a square. |
| rotate | 0 | Rotation of the complete chart in degrees. |
| animate | object | Object with time in milliseconds and boolean for an animation of the bar growing ({ duration: 1000, enabled: true }), or false to deactivate animations. |
| easing | defaultEasing | Easing function or string with the name of a jQuery easing function |
Callbacks
All callbacks will only be called if animate is not false.
| Callback(params, ...) | Description |
|---|---|
| onStart(from, to) | Is called at the start of any animation. |
| onStep(from, to, currentValue) | Is called during animations providing the current value (the method is scoped to the context of th eplugin, so you can access the DOM element via this.el). |
| onStop(from, to) | Is called at the end of any animation. |