hoverpie

A simple pie chart builder based on EaselJS

Dependencies

• jQuery
• EaselJS

Compatibility

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.

Usage

###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

License

This library is available under the MIT License. See LICENSE for more information.