Custom RGraph events

Share RGraph:   

Summary
Documentation about the custom RGraph events that are available for you to use. These events may be preferable to the standard onmousemove and onclick events which apply to the entire canvas.

 

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>
    window.onload = function ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: [45,12,16,18,44,54,23,21,56],
            options: {
                labels: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
                tooltips: ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev'],
                hmargin: 5,
                tickmarks: '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 ontooltip event');
        }
    }    
</script>

 

Available events


 

Adding DOM2-style events

Instead of the more usual DOM1-style 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 DOM1 cousins. They are installed like this:

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

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

 

Removing DOM2-style 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. DOM1-style event listeners are unaffected.

Comments

Add a new comment...