About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

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

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']
    }
}).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']
    }
}).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']
    }
}).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.

If the mousemove event handler function returns a true value (ie true, 1, [], {}, function () {} etc) then the mouse cursor shape is changed to pointer. If not then it remains at default.
<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)
{
}

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»