g.Raphaël Reference

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: object path element of the blob

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: object Element

Usage

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

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: object path element of the drop

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: object path element of the flag

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

Returns: object path element of the label.

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: object Element

Usage

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

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: object path element of the popup

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

Returns: object Element

Usage

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

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: object path element of the tag

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: object path element of the popup

Usage

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

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: object set containing the blob path and the text element

Usage

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

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: object dotchart 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'})

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: object set containing the drop path and the text element

Usage

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

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: object set containing the flag path and the text element

Usage

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

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: object set containing the label path and the text element

Usage

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

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: object path 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'});

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: object path element of the popup

Usage

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

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: object set containing the popup path and the text element

Usage

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

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: object set containing the tag path and the text element

Usage

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

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: object path element of the popup

Usage

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

Parameters

click handler

function

handler for the event

Conveniece method to set up click event handler

Returns: object dotchart object

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: object dotchart object

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: object dotchart object

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: object dotchart object

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

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

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: object linechart object

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: object linechart object

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: object linechart object

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: object linechart object

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: object linechart object

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: object linechart object

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: object linechart object