1. Element
  2. Element.blob()
  3. Element.darker()
  4. Element.drop()
  5. Element.flag()
  6. Element.label()
  7. Element.lighter()
  8. Element.popup()
  9. Element.resetBrightness()
  10. Element.tag()
  11. Paper
  12. Paper.barchart()
  13. Paper.blob()
  14. Paper.dotchart()
  15. Paper.drop()
  16. Paper.flag()
  17. Paper.label()
  18. Paper.linechart()
  19. Paper.piechart()
  20. Paper.popup()
  21. Paper.tag()
  22. Paper.vbarchart()
  23. dotchart
  24. dotchart.axis
  25. dotchart.click()
  26. dotchart.covers
  27. dotchart.each()
  28. dotchart.hover()
  29. dotchart.href()
  30. dotchart.series
  31. g
  32. g.colors
  33. g.shim
  34. g.txtattr
  35. linechart
  36. linechart.axis
  37. linechart.click()
  38. linechart.clickColumn()
  39. linechart.each()
  40. linechart.eachColumn()
  41. linechart.hover()
  42. linechart.hoverColumn()
  43. linechart.hrefColumn()
  44. linechart.lines
  45. linechart.shades
  46. linechart.symbols

g.Raphaël Reference

 Element⚓

 Element.blob(angle, x, y)⚓➭

Puts the context Element in a 'blob' tooltip. Can also be used on sets.

Parameters

angle
number
angle of orientation in degrees [default: 0 ]
x
number
x coordinate of the blob's tail [default: Element's x or cx ]
y
number
y coordinate of the blob's tail [default: Element's x or cx ]

Returns:objectpath element of the blob

 Element.darker(times)⚓➭

Makes the context element darker by decreasing the brightness and increasing the saturation by a given factor. Can be called on Sets.

Parameters

times
number
adjustment factor [default: 2 ]

Returns:objectElement

Usage 

paper.circle(50, 50, 20).attr({
    fill: "#ff0000",
    stroke: "#fff",
    "stroke-width": 2
}).darker(6);

 Element.drop(angle, x, y)⚓➭

Puts the context Element in a 'drop' tooltip. Can also be used on sets.

Parameters

angle
number
angle of orientation in degrees [default: 0 ]
x
number
x coordinate of the drop's point [default: Element's x or cx ]
y
number
y coordinate of the drop's point [default: Element's x or cx ]

Returns:objectpath element of the drop

 Element.flag(angle, x, y)⚓➭

Puts the context Element in a 'flag' tooltip. Can also be used on sets.

Parameters

angle
number
angle of orientation in degrees [default: 0 ]
x
number
x coordinate of the flag's point [default: Element's x or cx ]
y
number
y coordinate of the flag's point [default: Element's x or cx ]

Returns:objectpath element of the flag

 Element.label()⚓➭

Puts the context Element in a 'label' tooltip. Can also be used on sets.

Returns:objectpath element of the label.

 Element.lighter(times)⚓➭

Makes the context element lighter by increasing the brightness and reducing the saturation by a given factor. Can be called on Sets.

Parameters

times
number
adjustment factor [default: 2 ]

Returns:objectElement

Usage 

paper.circle(50, 50, 20).attr({
    fill: "#ff0000",
    stroke: "#fff",
    "stroke-width": 2
}).lighter(6);

 Element.popup(dir, size, x, y)⚓➭

Puts the context Element in a 'popup' tooltip. Can also be used on sets.

Parameters

dir
string
location of Element relative to the tail: 'down' , 'left' , 'up' [default], or 'right' .
size
number
amount of bevel/padding around the Element, as well as half the width and height of the tail [default: 5 ]
x
number
x coordinate of the popup's tail [default: Element's x or cx ]
y
number
y coordinate of the popup's tail [default: Element's y or cy ]

Returns:objectpath element of the popup

 Element.resetBrightness()⚓➭

Resets brightness and saturation levels to their original values. See Element.lighter and Element.darker. Can be called on Sets.

Returns:objectElement

Usage 

paper.circle(50, 50, 20).attr({
    fill: "#ff0000",
    stroke: "#fff",
    "stroke-width": 2
}).lighter(6).resetBrightness();

 Element.tag(angle, r, x, y)⚓➭

Puts the context Element in a 'tag' tooltip. Can also be used on sets.

Parameters

angle
number
angle of orientation in degrees [default: 0 ]
r
number
radius of the loop [default: 5 ]
x
number
x coordinate of the center of the tag loop [default: Element's x or cx ]
y
number
y coordinate of the center of the tag loop [default: Element's x or cx ]

Returns:objectpath element of the tag

 Paper⚓

 Paper.barchart(x, y, width, height, values, opts)⚓➭

Creates a horizontal bar chart

Parameters

x
number
x coordinate of the chart
y
number
y coordinate of the chart
width
number
width of the chart (respected by all elements in the set)
height
number
height of the chart (respected by all elements in the set)
values
array
values
opts
object
options for the chart
  1. {
    1. typestringtype of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
    2. gutternumber(string) default '20%' (WHAT DOES IT DO?)
    3. vgutternumber 
    4. colorsarraycolors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color.
    5. stackedbooleanwhether or not to tread values as in a stacked bar chart
    6. to
    7. stretchboolean 
  2. }

Returns:objectpath element of the popup

Usage 

r.barchart(0, 0, 620, 260, [76, 70, 67, 71, 69], {})

 Paper.blob(x, y, text, angle)⚓➭

Puts the given text into a 'blob' tooltip. The text is given a default style according to g.txtattr. See Element.blob

Parameters

x
number
x coordinate of the blob's tail
y
number
y coordinate of the blob's tail
text
string
text to place inside the blob
angle
number
angle of orientation in degrees [default: 0 ]

Returns:objectset containing the blob path and the text element

Usage 

paper.blob(50, 50, "$9.99", 60);

 Paper.dotchart(x, y, width, height, valuesx, valuesy, size, opts)⚓➭

Plots a dot chart

Parameters

x
number
x coordinate of the chart
y
number
y coordinate of the chart
width
number
width of the chart (respected by all elements in the set)
height
number
height of the chart (respected by all elements in the set)
valuesx
array
values used to plot x asis
valuesy
array
values used to plot y asis
size
array
values used as data
opts
object
options for the chart

Possible options

  1. {
    1. maxnumbermaximum diameter of a dot [default: 100]
    2. symbolstringsymbol used for rendering on the chart. The only possible option is 'circle' [default]
    3. gutternumberdistance between symbols on the chart [default: 10]
    4. heatbooleanwhether or not to enable coloring higher value symbols with warmer hue [default: false]
    5. opacitynumberopacity of the symbols [default: 1]
    6. hrefarrayarray of URLs to set up click-throughs on the symbols
    7. axisstringWhich axes should be renedered. String of four values evaluated in order 'top right bottom left' e.g. '0 0 1 1'.
    8. axisxstepnumberthe number of steps to plot on the axis X
    9. axisystepnumberthe number of steps to plot on the axis Y
    10. axisxlabelsarraylabels to be rendered instead of numeric values on axis X
    11. axisylabelsarraylabels to be rendered instead of numeric values on axis Y
    12. axisxtypestringPossible values: 't' [default], '|', ' ', '-', '+'
    13. axisytypestringPossible values: 't' [default], '|', ' ', '-', '+'
  2. }

Returns:objectdotchart object

Usage 

//life, expectancy, country and spending per capita (fictional data)
r.dotchart(0, 0, 620, 260, [76, 70, 67, 71, 69], [0, 1, 2, 3, 4], [100, 120, 140, 160, 500], {max: 10, axisylabels: ['Mexico', 'Argentina', 'Cuba', 'Canada', 'United States of America'], heat: true, axis: '0 0 1 1'})

 Paper.drop(x, y, text, angle)⚓➭

Puts the given text into a 'drop' tooltip. The text is given a default style according to g.txtattr. See Element.drop

Parameters

x
number
x coordinate of the drop's point
y
number
y coordinate of the drop's point
text
string
text to place inside the drop
angle
number
angle of orientation in degrees [default: 0 ]

Returns:objectset containing the drop path and the text element

Usage 

paper.drop(50, 50, "$9.99", 60);

 Paper.flag(x, y, text, angle)⚓➭

Puts the given text into a 'flag' tooltip. The text is given a default style according to g.txtattr. See Element.flag

Parameters

x
number
x coordinate of the flag's point
y
number
y coordinate of the flag's point
text
string
text to place inside the flag
angle
number
angle of orientation in degrees [default: 0 ]

Returns:objectset containing the flag path and the text element

Usage 

paper.flag(50, 50, "$9.99", 60);

 Paper.label(x, y, text)⚓➭

Puts the given text into a 'label' tooltip. The text is given a default style according to g.txtattr. See Element.label

Parameters

x
number
x coordinate of the center of the label
y
number
y coordinate of the center of the label
text
string
text to place inside the label

Returns:objectset containing the label path and the text element

Usage 

paper.label(50, 50, "$9.99");

 Paper.linechart(x, y, width, height, valuesx, valuesy, opts)⚓➭

Creates a line chart

Parameters

x
number
x coordinate of the chart
y
number
y coordinate of the chart
width
number
width of the chart (including the axis)
height
number
height of the chart (including the axis)
valuesx
array
values to plot on axis x
valuesy
array
values to plot on axis y
opts
object
options for the chart
  1. {
    1. gutternumberdistance between symbols on the chart
    2. symbolstring(array) symbol to be plotted as nodes of the chart, if array are passed symbols are printed iteratively. Currently 'circle' and '' (no symbol) are the only supported options.
    3. widthnumbercontrols the size of the plotted symbol. Also controls the thickness of the line using a formula stroke-width=width/2. This option is likely to change in the future versions of g.raphael.
    4. colorsarraycolors to plot data series. Raphael default colors are used if not passed
    5. shadebooleanwhether or not to plot a shade of the chart [default: false]. Currently only a shade between the line and x axis is supported.
    6. nostrokebooleanwhether or not to plot lines [default: false]. Only practical when shade is enabled.
    7. dashstringchanges display of the line from continues to dashed or dotted (Possible values are the same as stroke-dasharray attribute, see Element.attr).
    8. smoothbooleanchanges display of the line from point-to-point straight lines to curves (type C, see Paper.path).
    9. axisstringWhich axes should be renedered. String of four values evaluated in order 'top right bottom left' e.g. '0 0 1 1'.
    10. axisxstepnumberdistance between values on axis X
    11. axisystepnumberdistance between values on axis Y
  2. }

Returns:objectpath element of the popup

Usage 

r.linechart(0, 0, 99, 99, [1,2,3,4,5], [[1,2,3,4,5], [1,3,9,16,25], [100,50,25,12,6]], {smooth: true, colors: ['#F00', '#0F0', '#FF0'], symbol: 'circle'});

 Paper.piechart(cx, cy, r, values, opts)⚓➭

Creates a pie chart

Parameters

cx
number
x coordinate of the chart
cy
number
y coordinate of the chart
r
integer
radius of the chart
values
array
values used to plot
opts
object
options for the chart
  1. {
    1. minPercentnumberminimal percent threshold which will have a slice rendered. Sliced corresponding to data points below this threshold will be collapsed into 1 additional slice. [default 1]
    2. maxSlicesnumbera threshold for how many slices should be rendered before collapsing all remaining slices into 1 additional slice (to focus on most important data points). [default 100]
    3. strokestringcolor of the circle stroke in HTML color format [default "#FFF"]
    4. strokewidthintegerwidth of the chart stroke [default 1]
    5. initbooleanwhether or not to show animation when the chart is ready [default false]
    6. colorsarraycolors be used to plot the chart
    7. hrefarrayurls to to set up clicks on chart slices
    8. legendarrayarray containing strings that will be used in a legend. Other label options work if legend is defined.
    9. legendcolorstringcolor of text in legend [default "#000"]
    10. legendothersstringtext that will be used in legend to describe options that are collapsed into 1 slice, because they are too small to render [default "Others"]
    11. legendmarkstringsymbol used as a bullet point in legend that has the same colour as the chart slice [default "circle"]
    12. legendposstringposition of the legend on the chart [default "east"]. Other options are "north", "south", "west"
  2. }

Returns:objectpath element of the popup

Usage 

r.piechart(cx, cy, r, values, opts)

 Paper.popup(x, y, text, dir, size)⚓➭

Puts the given text into a 'popup' tooltip. The text is given a default style according to g.txtattr. See Element.popup

Note: The dir parameter has changed from g.Raphael 0.4.1 to 0.5. The options 0 , 1 , 2 , and 3 has been changed to 'down' , 'left' , 'up' , and 'right' respectively.

Parameters

x
number
x coordinate of the popup's tail
y
number
y coordinate of the popup's tail
text
string
text to place inside the popup
dir
string
location of the text relative to the tail: 'down' , 'left' , 'up' [default], or 'right' .
size
number
amount of padding around the Element [default: 5 ]

Returns:objectset containing the popup path and the text element

Usage 

paper.popup(50, 50, "$9.99", 'down');

 Paper.tag(x, y, text, angle, r)⚓➭

Puts the given text into a 'tag' tooltip. The text is given a default style according to g.txtattr. See Element.tag

Parameters

x
number
x coordinate of the center of the tag loop
y
number
y coordinate of the center of the tag loop
text
string
text to place inside the tag
angle
number
angle of orientation in degrees [default: 0 ]
r
number
radius of the loop [default: 5 ]

Returns:objectset containing the tag path and the text element

Usage 

paper.tag(50, 50, "$9.99", 60);

 Paper.vbarchart(x, y, width, height, values, opts)⚓➭

Creates a vertical bar chart

Parameters

x
number
x coordinate of the chart
y
number
y coordinate of the chart
width
number
width of the chart (respected by all elements in the set)
height
number
height of the chart (respected by all elements in the set)
values
array
values
opts
object
options for the chart
  1. {
    1. typestringtype of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
    2. gutternumber(string) default '20%' (WHAT DOES IT DO?)
    3. vgutternumber 
    4. colorsarraycolors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color.
    5. stackedbooleanwhether or not to tread values as in a stacked bar chart
    6. to
    7. stretchboolean 
  2. }

Returns:objectpath element of the popup

Usage 

r.vbarchart(0, 0, 620, 260, [76, 70, 67, 71, 69], {})

 dotchart⚓

 dotchart.axis⚓➭

Set containing Elements of the chart axis. Only exists if 'axis' definition string was passed to Paper.dotchart

 dotchart.click(click handler)⚓➭

Parameters

click handler
function
handler for the event

Conveniece method to set up click event handler

Returns:objectdotchart object

 dotchart.covers⚓➭

Set of Elements positioned above the symbols and mirroring them in size and shape. Covers are used as a surface for events capturing. Each cover has a property 'dot' being a reference to the actual data-representing symbol.

 dotchart.each(callback, this)⚓➭

Parameters

callback
function
called for every item in dotchart.covers.
this
object
callback is executed in a context of a cover element object

Conveniece method iterating on every symbol in the chart

Returns:objectdotchart object

 dotchart.hover(mouseover handler, mouseout handler)⚓➭

Parameters

mouseover handler
function
handler for the event
mouseout handler
function
handler for the event

Conveniece method to set up hover-in and hover-out event handlers

Returns:objectdotchart object

 dotchart.href(map)⚓➭

Parameters

map
array
Array of objects {x: 1, y: 20, value: 15, href: "http://www.raphaeljs.com"}

Iterates on all dotchart.covers elements. If x, y and value on the object are the same as on the cover it sets up a link on a symbol using the passef href .

Returns:objectdotchart object

 dotchart.series⚓➭

Set of Elements containing the actual data-representing symbols.

 g⚓

 g.colors⚓➭

An array of color values that charts will iterate through when drawing chart data values.

 g.shim⚓➭

An attribute object that charts will set on all generated shims (shims being the invisible objects that mouse events are bound to)

Default value 

{ stroke: 'none', fill: '#000', 'fill-opacity': 0 }

 g.txtattr⚓➭

An attribute object that charts and tooltips will set on any generated text

Default value 

{ font: '12px Arial, sans-serif', fill: '#fff' }

 linechart⚓

 linechart.axis⚓➭

Set containing Elements of the chart axis. The set is populated if 'axis' definition string was passed to Paper.linechart

 linechart.click(click handler, this)⚓➭

Parameters

click handler
function
handler for the event
this
object
callback is executed in a context of a cover element

Conveniece method to set up click event handler on the lines of the chart Use linechart.clickColumn to work with the entire chart area.

Returns:objectlinechart object

 linechart.clickColumn(click handler, this)⚓➭

Parameters

click handler
function
handler for the event
this
object
callback is executed in a context of a cover element

Conveniece method to set up click event handler on the antire area of the chart. The handler is passed a event object containing

  1. {
    1. xnumberx coordinate on all lines in the chart
    2. yarrayy coordinates of all lines corresponding to the x
  2. }

Returns:objectlinechart object

 linechart.each(callback, this)⚓➭

Parameters

callback
function
function executed for every data point
this
object
context of the callback function.
  1. {
    1. xnumberx coordinate of the data point
    2. ynumbery coordinate of the data point
    3. valuenumbervalue represented by the data point
  2. }

Iterates over each unique data point plotted on every line on the chart.

Returns:objectlinechart object

 linechart.eachColumn(callback, this)⚓➭

Parameters

callback
function
function executed for every column
this
object
context of the callback function.
  1. {
    1. xnumberx coordinate of the data point
    2. yarrayy coordinates of data points existing for the given x
    3. valuesarrayvalues represented by the data points existing for the given x
  2. }

Iterates over each column area (area plotted above the chart).

Returns:objectlinechart object

 linechart.hover(mouseover handler, mouseout handler)⚓➭

Parameters

mouseover handler
function
handler for the event
mouseout handler
function
handler for the event

Conveniece method to set up hover-in and hover-out event handlers working on the lines of the chart. Use linechart.hoverColumn to work with the entire chart area.

Returns:objectlinechart object

 linechart.hoverColumn(mouseover handler, mouseout handler, this)⚓➭

Parameters

mouseover handler
function
handler for the event
mouseout handler
function
handler for the event
this
object
callback is executed in a context of a cover element

Conveniece method to set up hover-in and hover-out event handlers on the entire area of the chart. The handlers are passed a event object containing

  1. {
    1. xnumberx coordinate on all lines in the chart
    2. yarrayy coordinates of all lines corresponding to the x
  2. }

Returns:objectlinechart object

 linechart.hrefColumn(cols)⚓➭

Parameters

cols
object
object containing values as keys and URLs as values, e.g. {1: 'http://www.raphaeljs.com', 2: 'http://g.raphaeljs.com'}

Creates click-throughs on the whole area of the chart corresponding to x values

Returns:objectlinechart object

 linechart.lines⚓➭

Set containing Elements corresponding to lines plotted in the chart.

 linechart.shades⚓➭

Set containing Elements corresponding to shades plotted in the chart (if opts.shade was true ).

 linechart.symbols⚓➭

Set containing Elements corresponding to symbols plotted in the chart.