Summary of events documentation

A summary of the different events 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 HOWTO
• Pseudo-standard events dollar syntax
• RGraph DOM1-style events
• Available RGraph DOM2-style events
The pseudo-standard events dollar syntax

 

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 theres are onbeforedraw, ondraw and ontooltip events.

new RGraph.Bar({
    id: 'cvs',
    data: [4,8,6,4,3,5,4],
    options: {
        gutterLeft: 35,
        gutterBottom: 55,
        labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
    }
}).on('draw', function (obj)
{
    alert('Chart has been drawn!');
}).on('tooltip', function (obj)
{
    var tooltip = RGraph.Registry.get('chart.tooltip');
    
    alert() the tooltip object (its 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: {
        gutterLeft: 35,
        gutterBottom: 55,
        labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
    }
}).on('draw', function (obj)
{
    alert('Chart has been drawn!');
}).draw()

Go to the API docs page »

 

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 »

 

Pseudo-standard events HOWTO

This is an older HOWTO document that has useful information about making use of the Pseudo-standard events.

Go to the events HOWTO »

 

Pseudo-standard dollar events

This is a document detailing the new $ syntax for adding events to specific shapes on your chart. The dollar syntax makes adding events much easier than previously.

Read about the dollar syntax »

 

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)
{
}

Go to the DOM1 HOWTO »

 

Available RGraph DOM2-style events

The docs 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);

Go to the DOM2 docs page»

 

The pseudo-standard events dollar syntax

This is the docs page that describes the pseudo-standard dollar syntax that is available with RGraph. The dollar syntax make it much easier to add events to specific bar/points/segments etc.

myObj.$2.onclick = function (e, shape)
{
}

myObj.$2.onmousemove = function (e, shape)
{
}

Go to the pseudo standard events dollar syntax docs page»