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 »

Pseudo-standard events

The events properties

Normally, if you apply a click listener to the canvas it will apply to the whole canvas. RGraph provides a way to add event listeners to your chart so that the event listeners apply only to the appropriate areas. In the case of the Bar chart here this means the actual bars themselves.

You can use the on method with these events:

...to add your listeners to the chart. The listener is simply a function that is called when the event fires. You can add multiple event listeners if you want to.


<script>
    new RGraph.Bar({
        id:'cvs',
        data: [4,5,8,4,6,8,5],
        options: {
            xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            colors: ['blue'],
            textSize: 14
        }
    }).wave().on('click', function (e, shape)
    {
        var obj   = shape.object,
            x     = shape.x,
            y     = shape.y,
            w     = shape.width,
            h     = shape.height,
            index = shape.dataset;
    
        alert('The onclick listener just fired with index: ' + index);
    }).on('mousemove', function ()
    {
        return true;
    });
</script>

The new $ syntax

To add an event to a specific shape you can use the dollar syntax - this provides you with a very easy way to add an event listener to a specific bar/point/segment etc.

bar = new RGraph.Bar({
    id: 'cvs',
    data: [6,5,-5,5,-5,4,2,1,3,-2,-3,-6],
    options: {
        xaxisPosition: 'center'
    }
}).draw();

bar.$2.onclick = function (e, shape)
{
    alert(shape.dataset);
}

Using DOM1 style addition

As of September 2012, you can now use the dom1 style way to add these events to your charts. This is a much less verbose and far more readable way of adding these events to your charts.

<script>
    window.onload = function ()
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [4,5,8,4,6,8,5],
            options: {
                xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                colors: ['blue'],
                textSize: 14
            }
        }).draw()


        // Notice that unlike adding event listeners in HTML here you're adding them to the RGraph Bar chart
        // object - NOT the canvas tag.
        bar.onclick = function (e, shape)
        {
            alert('A bar has been clicked!');
        }
        
        // If the mousemove event listener function returns a truthy value then
        // the cursor is changed to pointer Keep in mind that when the
        // cursor is moved away from the shape it is automatically changed back
        //  to 'default'.
        bar.onmousemove = function (e, shape)
        {
            return true
        }
    }
</script>

Note

If you want the mouse pointer to change to the hand when you move the mouse over a bar you need to simply return true from the mousemove event listener, as shown below. When you move the mouse away from the bar the cursor will be restored to its previous state. Like this:

obj.onmousemove =  function (e, shape)
{
    return true;
};

Note

There's information about replacements for the standard dom1 events here