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 »

HOWTO: Add interactivity to your charts

Starting from January 2012 adding events to your charts has become much easier. You can now use the on function to add click, mousemove, mouseover or mouseout event listeners to your charts (or the RGraph custom events).

This makes adding interactivity to your charts very easy. Here's a step-by-step example of using the events.

The chart without the event listeners

Here's the basic chart without any event listeners defined:

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss','Luis'],
            textSize: 14
        }
    }).draw();
</script>

The chart with the click event listener added

The first step would be to add the click event listener. This function is run when a bar is clicked. The function that you specify is passed two arguments - the (standard) event object, and a second shape object comprised of coordinates that describe the shape. This object also contains the RGraph chart object and the index of the shape. The shape object contains named properties that you can use like this:

<script>
    new RGraph.Bar({
        id: 'cvs2',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss', 'Jan'],
            textSize: 14
        }
    }).draw().on('click', function (e, shape)
    {
        var index = shape.dataset;

        switch (index) {
            case 0: alert('The first bar was clicked'); break;
            case 1: alert('The second bar was clicked'); break;
            case 2: alert('The third bar was clicked'); break;
            case 3: alert('The fourth bar was clicked'); break;
            case 4: alert('The fifth bar was clicked'); break;
            case 5: alert('The sixth bar was clicked'); break;
        }
    });
</script>

The chart with the mousemove event listener added

The second step is to add the mousemove event listener. By returning a value that can cast to a positive value (eg true or 1) from the handler function, this allows us to change the cursor to a pointer when the mouse is moved over a bar. Because this is a common operation the pointer is automatically changed back to the previous state when it is moved away from the bar.

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,5,3,8,9],
        options: {
            xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss','Jan'],
            textSize: 14
        }
    }).draw().on('click', function (e, shape)
    {
        var index = shape.dataset;

        switch (index) {
            case 0: alert('The first bar was clicked'); break;
            case 1: alert('The second bar was clicked'); break;
            case 2: alert('The third bar was clicked'); break;
            case 3: alert('The fourth bar was clicked'); break;
            case 4: alert('The fifth bar was clicked'); break;
            case 5: alert('The sixth bar was clicked'); break;
        }
    }).on('mousemove', function (e, shape)
    {
        return true;
    });
</script>

Standard DOM1 events

In October 2012 RGraph was reverted to dom2 events. This frees up the dom1 events for you to use. You may find that these are far easier and less verbose to use.

<script>
    window.onmousedown = function (e)
    {
    }
    
    window.onmouseup = function (e)
    {
    }
    
    obj.canvas.onmousedown = function (e)
    {
    }
    
    obj.canvas.onmouseup = function (e)
    {
    }
    
    obj.canvas.onclick = function (e)
    {
    }
    
    obj.canvas.onmousemove = function (e)
    {
    }
</script>