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 »

Custom events

Introduction to custom events

Custom events allow you to easily interact with and extend RGraph for your own purposes. The list of available events is below, as is an example of how to make use of them. Event handler functions (ie your functions) are passed a single parameter - the chart object. With this, you can get references to the canvas and context. There's an example of this below.

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [45,12,16,18,44,54,23,21,56],
        options: {
            xaxisLabels: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
            tooltips: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
            marginInner: 5,
            tickmarksStyle: 'dot'
        }
    }).draw()


    // This is the installation of the event listener. This is the DOM1 style method - significantly easier
    // and less code than the DOM2 method.
    line.ontooltip = function myFunc(obj)
    {
        var id      = obj.id;
        var canvas  = obj.canvas;
        var context = obj.context;

        alert('This alert was triggered by the custom tooltip event');
    }
</script>

Available events


Adding DOM2 events

Instead of the more usual dom1 events you may want to use the older dom2 style method of adding event listeners. These can facilitate the addition of multiple event listeners compared to their dom2 cousins. They are installed like this:

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [45,12,16,18,44,54,23,21,56],
        options: {
            xaxisLabels: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
            tooltips: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
            marginInner: 5,
            tickmarksStyle: 'dot'
        }
    }).draw()

    
    function myFunc (obj)
    {
        // ...
    }
    RGraph.addCustomEventListener(line, 'ontooltip', myFunc);
</script>

Removing DOM2 events

In the case that you need to remove RGraph event listeners, there are a few ways that you can do it. The api function RGraph.removeCustomEventListener(obj, id) can be used to remove a single event listener. This function takes the chart object and the numerical ID (returned by RGraph.addCustomEventListener) as its arguments.

There's also the RGraph.removeAllCustomEventListeners, for easily removing all of the pertinent event listeners. This function can either take no arguments at all, in which case ALL event listeners for ALL objects are removed. Or it can also take a canvas id (the same id that you pass to the constructor), in which case the removal will be limited to that canvas.

Note that the RGraph.removeAllCustomEventListeners function only applies to events that are installed using the dom2 style. dom2 event listeners are unaffected.