voery / pielicious

SVG 3D & 2D pie & donut charting library, based on Raphaël JS by Dmitry Baranovskiy (http://raphaeljs.com)

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

Screenshots

Pie 3D Pie Donut

Gradient Growing Scale

Shift Outline Outline

Roadmap

• Export functionality

Compatibility

Raphaël v2.1.2

Dependencies

Raphaël JS ONLY. There is no need for g.Raphaël JS library

Changelog

v2.1

• Renamed to 'pielicious'

v2.0

• Added 3D support
• Minor cosmetic changes, overall code cleanup

v1.0

• Initial version