A simple pie chart builder based on EaselJS
Tested compatible with jQuery 1.9.1 and 2.0.3, and EaselJS 0.6.1
Tested compatible with Mac/Chrome 29 and Mac/Firefox 23.
###HTML
<canvas id="myCanvas" width="350" height="350"></canvas>
Note that you may pass in config parameters through the <canvas>'s data attributes:
<canvas id="myCanvas" width="350" height="350" data-hoverpie-config-label-radius-factor=0.8>
See below for more information about config options.
###javascript
var data = [
{
percentage : 0.2,
fillColor : "#c05555",
labelText : "red"
},
...
];
HoverPie.make($('#myCanvas'), data, {});
You can also make a group of pies at once using the same data and config!
HoverPie.makeAll($('canvas'), data, config);
Each data point you pass in may contain any of the following options:
| option name | type | description |
|---|---|---|
| percentage | [0,1] | How large a slice of the pie this point represents. This is **not** validated. |
| fillColor | CSS color | Overrides the sectorFillColor config option. |
| labelText | string | The text to appear in the title label (both hover and unhover). |
| descriptionText | string | The text to appear in the description label (only visible on hover) |
| labelOffset | {x : (float), y : (float) } |
Offsets the title label (unhover only) |
| labelHoverOffset | {x : (float), y : (float) } |
Offsets the title label (hover only) and description label |
| config | Object, see below | Enables each particular data point to customize things like font family, text options, etc |
The third argument in HoverPie.make(...) refers to a config parameter. Acceptable config options:
| option name | type | default | description |
|---|---|---|---|
canvasPadding |
integer | 25 | pixels between unhovered pie and canvas edge |
hoverEnabled |
boolean | true | |
hoverScale |
float | 1.1 | scale for the hovered pie sector |
labelRadiusFactor |
float | 0.66 | This factor is multiplied with the pie's radius to determine where the unhovered title label is positioned. |
labelHoverRadiusFactor |
float | false | This factor is multiplied with the pie's radius to determine where the hover title and description labels are positioned. If false, falls back to labelRadiusFactor |
labelFontColor |
CSS color | rgba(255,255,255,0.5) | Affects unhovered title label. |
labelFontFamily |
CSS font family | Arial | Affects unhovered and hovered title labels. |
labelFontWeight |
CSS font weight | normal | Affects unhovered and hovered title labels. |
labelFontSize |
pixel number | 16 | Affects unhovered and hovered title labels. |
labelHoverColor |
CSS color | rgba(255,255,255,1) | Affects hovered title label. If false, falls back to labelFontColor. |
descriptionFontColor |
CSS color | false | Affects description label. If false, falls back to labelHoverColor. |
descriptionFontFamily |
CSS font family | false | Affects description label. If false, falls back to labelFontFamily. |
descriptionFontWeight |
CSS font weight | false | Affects description label. If false, falls back to labelFontWeight. |
descriptionFontSize |
px | false | Affects description label. If false, falls back to labelFontSize. |
descriptionOffsetX |
px | 0 | Positions the description label with relation to the hover title label. |
descriptionOffsetY |
px | 0 | Positions the description label with relation to the hover title label. |
descriptionAlignment |
center, left or right | center | Description label will align with the left, center or right of the hover label. |
descriptionLineWidth |
px | false | Sets the description label's line width. If false, description label will not wrap. |
descriptionLineHeight |
px | false | Sets the description label's line height. If false, defaults to 1.2 times the width of an 'm'. |
sectorFillColor |
CSS color | #666 | |
sectorStrokeColor |
CSS color | #fff | |
sectorStrokeWidth |
float | 2 |
This library is available under the MIT License. See LICENSE for more information.