Puts the context Element in a 'blob' tooltip. Can also be used on sets.
Parameters
0
]
x
or
cx
]
x
or
cx
]
Returns:objectpath 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
2
]
Returns:objectElement
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
0
]
x
or
cx
]
x
or
cx
]
Returns:objectpath element of the drop
Puts the context Element in a 'flag' tooltip. Can also be used on sets.
Parameters
0
]
x
or
cx
]
x
or
cx
]
Returns:objectpath element of the flag
Puts the context Element in a 'label' tooltip. Can also be used on sets.
Returns:objectpath 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
2
]
Returns:objectElement
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
'down'
,
'left'
,
'up'
[default], or
'right'
.
5
]
x
or
cx
]
y
or
cy
]
Returns:objectpath 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:objectElement
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
0
]
5
]
x
or
cx
]
x
or
cx
]
Returns:objectpath element of the tag
Creates a horizontal bar chart
Parameters
Returns:objectpath 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
0
]
Returns:objectset containing the blob path and the text element
Usage
paper.blob(50, 50, "$9.99", 60);
Plots a dot chart
Parameters
Possible options
'circle'
[default]
'top right bottom left'
e.g.
'0 0 1 1'
.
't'
[default],
'|'
,
' '
,
'-'
,
'+'
't'
[default],
'|'
,
' '
,
'-'
,
'+'
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'})
Puts the given text into a 'drop' tooltip. The text is given a default style according to g.txtattr. See Element.drop
Parameters
0
]
Returns:objectset 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
0
]
Returns:objectset 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
Returns:objectset containing the label path and the text element
Usage
paper.label(50, 50, "$9.99");
Creates a line chart
Parameters
'circle'
and
''
(no symbol) are the only supported options.
'top right bottom left'
e.g.
'0 0 1 1'
.
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'});
Creates a pie chart
Parameters
1
]
100
]
"#FFF"
]
1
]
false
]
"#000"
]
"Others"
]
"circle"
]
"east"
]. Other options are
"north"
,
"south"
,
"west"
Returns:objectpath 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
'down'
,
'left'
,
'up'
[default], or
'right'
.
5
]
Returns:objectset 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
0
]
5
]
Returns:objectset containing the tag path and the text element
Usage
paper.tag(50, 50, "$9.99", 60);
Creates a vertical bar chart
Parameters
Returns:objectpath element of the popup
Usage
r.vbarchart(0, 0, 620, 260, [76, 70, 67, 71, 69], {})
Set containing Elements of the chart axis. Only exists if
'axis'
definition string was passed to Paper.dotchart
Parameters
Conveniece method to set up click event handler
Returns:objectdotchart object
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.
Parameters
Conveniece method iterating on every symbol in the chart
Returns:objectdotchart object
Parameters
Conveniece method to set up hover-in and hover-out event handlers
Returns:objectdotchart object
Parameters
{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
Set of Elements containing the actual data-representing symbols.
An array of color values that charts will iterate through when drawing chart data values.
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 }
An attribute object that charts and tooltips will set on any generated text
Default value
{ font: '12px Arial, sans-serif', fill: '#fff' }
Set containing Elements of the chart axis. The set is populated if
'axis'
definition string was passed to Paper.linechart
Parameters
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
Parameters
Conveniece method to set up click event handler on the antire area of the chart. The handler is passed a event object containing
Returns:objectlinechart object
Parameters
Iterates over each unique data point plotted on every line on the chart.
Returns:objectlinechart object
Parameters
Iterates over each column area (area plotted above the chart).
Returns:objectlinechart object
Parameters
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
Parameters
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
Returns:objectlinechart object
Parameters
Creates click-throughs on the whole area of the chart corresponding to x values
Returns:objectlinechart object
Set containing Elements corresponding to lines plotted in the chart.
Set containing Elements corresponding to shades plotted in the chart (if
opts.shade
was
true
).
Set containing Elements corresponding to symbols plotted in the chart.