Summary of events documentation
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('chart.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).
var 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 but are set in the same way as other RGraph properties.
obj.set({
eventsClick: function (e, shape) {},
eventsMousemove: function (e, shape) {}
});
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 and mouseover event 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>
window.onload = function ()
{
// Create the Pie chart
var 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);