Custom events
- Introduction to Custom events
- Available events
- Adding DOM2 events
- Removing DOM2 events
- Adding events within the main configuration
Introduction to custom events
Custom events allow you to easily interact with and extend RGraph for your own purposes. The list of available events is below, as is an example of how to make use of them. Event handler functions (ie your functions) are passed a single parameter - the chart object. With this, you can get references to the canvas and context. There's an example of this below.
<script>
line = new RGraph.Line({
id: 'cvs',
data: [45,12,16,18,44,54,23,21,56],
options: {
xaxisLabels: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
tooltips: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
marginInner: 5,
tickmarksStyle: 'dot',
// As of version 6.22, the events property is now the prferred way to install events
// on your charts. Prior to this you would need to use the on() function or resort
// to DOM1 style events.
events: {
tooltip: function myFunc(obj)
{
var id = obj.id;
var canvas = obj.canvas;
var context = obj.context;
alert('This alert was triggered by the custom tooltip event');
}
}
}
}).draw();
</script>
Available events
ModalDialog.addCustomEventListener('modaldialog', function () {alert('Hello world!');});Adding DOM2 events
Instead of DOM1 events you may want to use the older DOM2 style method of adding event listeners. These can facilitate the addition of multiple event listeners compared to their DOM1 cousins. They are installed like this:
<script>
line = new RGraph.Line({
id: 'cvs',
data: [45,12,16,18,44,54,23,21,56],
options: {
xaxisLabels: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
tooltips: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
marginInner: 5,
tickmarksStyle: 'dot'
}
}).draw()
function myFunc (obj)
{
// ...
}
RGraph.addCustomEventListener(line, 'ontooltip', myFunc);
</script>
Removing DOM2 events
In the case that you need to remove RGraph event listeners, there are a few ways that you can do it. The API function RGraph.removeCustomEventListener(obj, id) can be used to remove a single event listener. This function takes the chart object and the numerical ID (returned by RGraph.addCustomEventListener) as its arguments.
There's also the RGraph.removeAllCustomEventListeners, for easily removing all of the pertinent event listeners. This function can either take no arguments at all, in which case ALL event listeners for ALL objects are removed. Or it can also take a canvas id (the same id that you pass to the constructor), in which case the removal will be limited to that canvas.Note that the RGraph.removeAllCustomEventListeners function only applies to events that are installed using the DOM2 style. DOM1 event listeners are unaffected.
Adding events within the main configuration
From version 6.22 adding events using the inline events configuration property is now the preferred way to add your event listeners. The on method is still part of RGraph and still works exactly the same - so nothing should change with your existing charts. The example from above could be modified to the following:
<script>
line = new RGraph.Line({
id: 'cvs',
data: [45,12,16,18,44,54,23,21,56],
options: {
xaxisLabels: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
tooltips: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
marginInner: 5,
tickmarksStyle: 'dot',
//
// This is the installation of the event listeners.
// They're installed using the up-to-date method of
// using the events property in the main configuration.
//
events: {
beforedraw: function (obj) {alert('The chart is about to be drawn!');},
draw: function (obj) {alert('The chart has been drawn!');}
tooltip: function (obj) {alert('This alert was triggered by the custom tooltip event');}
}
}
}).draw();
</script>