Pielicious

Based on Raphaël JS (cross-browser JavaScript library that draws scalable vector graphics) by Dmitry Baranovskiy (https://dmitrybaranovskiy.github.io/raphael/). The library can generate 2D & 3D pure SVG pie & donut charts. Chart legend also generated using SVG, without any HTML. Comprehensive configuration options available for a better user experience.

How to Use

Method

Paper.pielicious(cx, cy, r, opts)

Method Parameters

cx (integer) x coordinate of the pie
cy (integer) y coordinate of the pie
r (integer) radius of the pie
opts (object) pie options

Method Return Value

Object of Raphaël elements: {slices: [array], markers: [array], descriptions: [array]}

slices: array of Paper.path representing pie slice
markers: array of Paper.path representing pie legend marker
descriptions: array of Paper.text representing pie legend item

Usage Example

var paper = new Raphael("canvas", 500, 500);
var pie = paper.pielicious(150, 150, 100, {
    data: [23, 56, 78],
    colors: ['red', '#edf234', 'rgb(233, 145, 68)'],
    titles: ['apples', 'oranges', 'pear'],
    handles: ['apple_slice', 'orange_slice', 'pear_slice'],
    hrefs: ['http://google.com', 'http://apple.com', 'http://yahoo.com'],
    gradient: {darkness: 12, lightness: 9, degrees: 180},
    cursor: "pointer",
    marker: "rect",
    threeD: {height: 10, tilt: 0.8},
    donut: {diameter: 0.4, tilt: 0.6},
    legend: {labels: labels, x: 290, y: 90, fontSize: 14, fontFamily: "Verdana", events: true},
    evolution: true,
    orientation: 130,
    animation: "elastic"
});

Pie Options

data (array): values used to plot
colors (array): array of string colors used to fill each pie/donut slice
- If not provided or empty, random colors will be generated for each slice
titles (array): array of tooltips for each slice when mouse hovers [default: []]
handles (array): array of strings assigned to Raphaël elements of the chart [default: []]
hrefs (array): string urls to set up clicks on pie slices [default: []]
cursor (string): cursor type displayed when mouse hovers the slice [default: normal]
marker (string): legend marker symbol. Options: rect, circle & ellipse [default: circle]
evolution (boolean): whether or not to animate rendering slice by slice [default: false]
orientation (integer): between 1 - 360. Pie slices render starting from this angle [default: 0]
gradient (object literal): use color gradient to fill each slice [default: none]
- gradient.darkness (integer): color darkness level between (incl.) 0-100 [default: 0]
- gradient.lightness (integer): color lightness level between (incl.) 0-100 [default: 0]
- gradient.degrees (integer): gradient direction angle [default: 180]
threeD (object literal): generate 3D pie chart. Not available for donut [default: 2D chart]
- threeD.height (integer): between 1 - 100. The height of 3D pie (Z dimension) [default: 25]
- threeD.tilt (float): between 0.1 - 0.9. Determines the 3D pie tilt angle [default: 0.5]
legend (object literal): generate chart legend [default: none]
- legend.labels (array): array of strings that will be used in a pie legend
- legend.x (integer): x origin coordinate of the legend [default: chart X + radius + 30]
- legend.y (integer): y origin coordinate of the legend [default: chart Y - radius]
- legend.fontFamily (string): legend font type [default: Arial]
- legend.fontSize (string): legend font size [default: 14]
- legend.events (boolean): marker or text hover triggers slice hover effect [default: false]
  - animation must be set if legend.events is set to true
donut (object literal): turn pie into donut chart. Not available in 3D [default: pie chart]
- donut.diameter (float): between 0.1 - 0.9. Determines the donut thickness [default: 0.5]
- donut.tilt (float): between 0.1 - 0.9. Determines the donut tilt angle [default: no tilt]
animation (string): slice hover effect. Disabled in whole, no-slice pie/donut [default: none]
- shift-fast: pie slice shifts away from the pie center see Screenshots
- shift-slow: same as shift-fast, but slower
- shift-bounce: same as shift-fast. When mouse exits, the slice bounces back
- scale: pie slice scales up see Screenshots
- scale-bounce: same as above. When mouse exits, it bounces back to original size
- elastic: pie slice shifts in & out in elastic fashion
- outline: 2D outline appears near the outer slice edge see Screenshots