Summary of events documentation

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:

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: {
        gutter: {
            left: 35,
            bottom: 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('events.click', function (e, shape) {});
obj.set('events.mousemove', 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»