Events documentation
Summary: A summary of the different event documentation pages and links to descriptions of them.
RGraph has a various different ways of adding events and interactivity to your charts. As such this is a summary of the different documentation pages that are available:
- RGraph custom events
- The
on()function - Pseudo-standard events
- Pseudo-standard events dollar syntax
- RGraph DOM1-style events
- Available RGraph DOM2-style events
RGraph custom events
RGraph specific custom events can be used when certain things happen in
when drawing an RGraph chart or something happens, for example there's are
beforedraw, draw and tooltip events.
new RGraph.Bar({
id: 'cvs',
data: [4,8,6,4,3,5,4],
options: {
marginLeft: 35,
marginBottom: 55,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
}
}).on('draw', function (obj)
{
alert('The chart has been drawn!');
}).on('tooltip', function (obj)
{
var tooltip = RGraph.Registry.get('tooltip');
// alert() the tooltip object (it's a DIV tag)
alert(tooltip);
}.draw();
Go to the custom events page »
The on() function
The on() function can be used to add events to your charts whilst making chaining calls easier (ie without
breaking the chain).
bar = new RGraph.Bar({
id: 'cvs',
data: [4,8,6,4,3,5,4],
options: {
marginLeft: 35,
marginBottom: 55,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
}
}).on('draw', function (obj)
{
alert('Chart has been drawn!');
}).draw()
Pseudo-standard events
These are similar to the above and set in the same way - using the on() function:
new RGraph.Bar({
id: 'cvs',
data: [4,8,6,4,3,5,4],
options: {
marginLeft: 35,
marginBottom: 55,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
}
}).on('click', function (e, shape)
{
alert('A bar has been clicked!');
}).on('mousemove', function (e, shape)
{
// Returning true will make the mouse pointer change to a hand
return true;
}.draw();
Go to the Pseudo-standard events docs page » Go to the events HOWTO »
Pseudo-standard dollar events
The new syntax for adding pseudo-standard events
allows you to add events to specific elements on your
chart - bars/points/segments etc. The Pie chart here shows how you can
easily add click, mousemove, mouseover and
mouseoutevent listeners to your charts
to trigger custom actions (eg alerts, redirections, popups, ModalDialogs
etc). The sample code below shows how simple the code for this chart is.
true, 1, [], {}, function () {} etc) then the
mouse cursor shape is changed to pointer. If not then it
remains at default.
<script>
// Create the Pie chart
pie = new RGraph.Pie({
id: 'cvs',
data: [4,6,3,5,2,5,8],
options: {
labels: ['Monday', 'Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
exploded: []
textSize: 14
}
}).draw();
// Add the click listener
pie.$1.onclick = function (e, shape)
{
if (!pie.get('exploded') || !pie.get('exploded')[1]) {
pie.set('exploded', [,25]);
RGraph.redraw();
}
// Stops the window.onclick event from firing
e.stopPropagation();
}
// Add the mousemove listener
pie.$1.onmousemove = function (e, shape)
{
// If the mousemove event handler returns true then the mouse
// cursor is changed to a pointer shape.
return true;
}
// Add the window click listener that resets the Pie chart
window.addEventListener('click', function (e)
{
pie.set('exploded', []);
RGraph.redraw();
}, false);
</script>
RGraph DOM1-style events
Adding your event listener functions using the DOM1 style is much easier than the DOM2 style. This page details how you can do this:
myBar.ondraw = function (obj)
{
}
Available RGraph DOM2-style events
The documentation page detailing all of the DOM2 style custom RGraph events. These events can also be used in a DOM1 style - for example:
myObj.ondraw = function (obj)
{
}
OR
myFunc = function (obj)
{
}
RGraph.addCustomEventListener(myObj, 'ondraw', myFunc);