Events documentation
RGraph has 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 when drawing an RGraph chart or when something happens, for example, there 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'],
events: {
draw: function (obj) {alert('The chart has been drawn!');},
tooltip: function (obj)
{
// Get the tooltip <div> from the RGraph registry
var tooltip = RGraph.Registry.get('tooltip');
// alert() the tooltip object (it's a div tag)
alert(tooltip);
}
}
}
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()
Go to the API documentation page »
Pseudo-standard events
These are similar to the above and set in the same way - either using the events property or using the on function. Here's an example of using events property:
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'],
events: {
click: function (e, shape) {alert('A bar has been clicked!');},
// Returning true will make the mouse pointer change to a hand
mousemove: function (e, shape) {return true;}
}
}
}).draw();
Go to the Pseudo-standard events docs page » Go to the events HOWTO »
Pseudo-standard events dollar syntax
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 mouseout 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.
<script>
// Create the Pie chart
pie = new RGraph.Pie({
id: 'cvs',
data: [4,6,3,5,2,5,8],
options: {
labels: ['Mon', 'Tue','Wed','Thu','Fri','Sat','Sun'],
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 that details 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
RGraph.addCustomEventListener(myObj, 'draw', function (obj)
{
});