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'],
        textAccessible: false
    }
}).on('draw', function (obj)
{
    alert('The chart has been drawn!');
}).on('tooltip', function (obj)
{
    var tooltip = RGraph.Registry.get('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).

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'],
        textAccessible: false
    }
}).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 and set in the same way - using the on() function:

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'],
        textAccessible: false
    }
}).on('click', function (e, shape)
{
    alert('A bar has been clicked!');
}).on('mousemove', function (e, shape)
{    
    // Returning true will make the mouse pointer change to a hand
    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,
            textAccessible: false
        }
    }).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)
{
}

Go to the DOM1 HOWTO »

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

myFunc = function (obj)
{
}
RGraph.addCustomEventListener(myObj, 'ondraw', myFunc);

Go to the DOM2 docs page»