Bookmark and share:
Bookmark with delicious tweet this site Post to Google Buzz! Post to Facebook Share on FriendFeed Stumble! this site

RGraph: HTML5 canvas graph library - Custom RGraph 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 with the RGraph.AddCustomEventListener() function. Event handler functions (ie your functions) are passed a single parameter - the graph object. With this you can get references to the canvas and context. There's an example of this below.

    window.onload = function ()
        var line = new RGraph.Line('myLine', [45,12,16,18,44,54,23,21,56]);
        line.Set('chart.tooltips', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']);
        line.Set('chart.labels', ['Fred', 'Barney', 'Jay', 'Pete', 'Frank', 'Bob', 'Ted', 'Lou', 'Kev']);
        line.Set('chart.hmargin', 5);
        line.Set('chart.tickmarks', 'dot');

        * This is the call to the RGraph function that registers the event listener
        *      line: The graph object
        * ontooltip: The name of the event
        *    myFunc: The function that handles the event
        RGraph.AddCustomEventListener(line, 'ontooltip', myFunc);

    * The function that is called when the ontooltip event fires. It is  passed a single parameter - the graph object.
    * With this you can get the ID and references to the canvas and context:
    *  o
    *  o obj.canvas
    *  o obj.context
    function myFunc(obj)
        var id      =;
        var canvas  = obj.canvas;
        var context = obj.context;

        alert('This alert was triggered by the custom ontooltip event');

Available events

This event fires immediately after a tooltip has been created. This event allows you to easily show graphs in your tooltips (tooltip effects that involve moving the tooltip, eg. contract, expand & snap, will not function). You can find the tooltip object in the RGraph registry - RGraph.Registry.Get('chart.tooltip'). Note that if you're testing and using a function that pauses execution (eg alert()), this will also pause any timers (for animation effects etc). If you want to avoid this you should use a function that doesn't block execution, eg the Firebug/WebKit function, console.log() (you can use the cl() shortcut in RGraph).

This event fires immediately after the RGraph context menu is shown. If you want it, you can get at the context menu in the RGraph registry: RGraph.Registry.Get('chart.contextmenu') Like the ontooltip event, using alert() can pause the fade in timers, so you should consider using the Firebug/Webkit console.log functions instead.

Much like the ondraw event, however this fires at the start of the .Draw() method, in effect "before" the method.

The ondraw event fires after the .Draw() method has run. Note that the interactive features of RGraph may call the .Draw() method multiple times - the zoom in area mode is a prime example. A graph with tooltips is also an example. In this case it would demonstrate that the .Draw() method is called twice (and hence the ondraw event), whereas the ontooltip event only fires once.

Note: The ondraw event is not only fired by its own graph, but (if you're using tooltips for example), can also be fired by other graphs on the page.

The onzoom event fires whenever the canvas is zoomed. When the zoom is in area and canvas modes this fires once, but when in thumbnail mode this event is like the onmousemove event in that it fires whenever the mouse is moved.

The onmodaldialog event fires when the ModalDialog is shown. This event is easily replicated yourself, though using this event may help you to keep your code tidy. This event is utilised slightly differently to the other events:

ModalDialog.AddCustomEventListener('onmodaldialog', function () {alert('Hello world!');});

The onresize event fires when a canvas is resized. It also fires when the canvas is reset to the original size.

The onadjust event fires whenever one of the supported graph types is adjusted. It usually fires in conjunction with the onmousemove event, and can be blocked by alert(). You therefore may need to use a different function (eg console.log()) whilst debugging.

The onannotatestart event fires at the beginning of the annotating procedure (ie in a similar vein to the onmousedown event).

The onannotate event fires when the graph has been annotated. It fires during the annotate procedure.

The onannotateend event fires at the end of the annotating procedure (ie in a similar vein to the onmouseup event).