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 use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

 

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

More »

HOWTO: Use the dollar syntax for events

The dollar syntax in RGraph makes it a breeze for you to add event listeners to your charts. Previously you would add an event listener with the on function and then check the index and dataset properties of the shape array to verify which shape had been clicked or hovered over. With the dollar syntax though, you can add event listeners to specific shapes (bars/points/segments etc) by using the syntax shown below. Keep in mind though that, as with arrays, the numbering begins at zero.

The initial chart

Here is the plain Bar chart before the event listeners have been added:

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [13,12,16,15,12,11,21],
        options: {
            xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            textSize: 14
        }
    }).draw();
</script>

The chart with the click event added

Here is the Bar chart with the click event added. Note the mouse pointer doesn't change as there hasn't been a mousemove listener added yet.

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [13,12,16,15,12,11,21],
        options: {
            xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
        }
    }).draw();
    
    bar.$3.onclick = function (e, shape)
    {
        alert('The second Bar charts event listener');
    }
</script>

The chart with the mousemove event added

And here is the Bar chart with the mousemove event listener added. This changes the cursor to the hand when the relevant bar is hovered over. The pointer is automatically changed back for you when the mouse is moved away from the bar.

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [13,12,16,15,12,11,21],
        options: {
            xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            textSize: 14
        }
    }).draw();


    bar.$3.onclick = function (e, shape)
    {
        alert('In the third bar charts event listener');
    }
    
    bar.$3.onmousemove = function (e, shape)
    {
        return true;
    }
</script>