Custom events

• Introduction to Custom events
• Available events
• Adding DOM2 events
• Removing DOM2 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

• beforetooltip
  The beforetooltip fires just before a tooltip is created and shown.
  
  
• tooltip
  The tooltip event fires just after a tooltip has been created and shown. Note that effect timers may make it look like that the event fires before the tooltip appears.
  
  
• beforecontextmenu
  The beforecontextmenu fires just before the contextmenu is shown.
  
  
• contextmenu
  The contextmenu event fires when the contextmenu is shown.
  
  
• beforedraw
  This event fires before the draw method runs. It can fire multiple times (eg when a tooltip is hidden).
  
  
• firstdraw
  This event fires the first (and only the first) time that the chart is drawn (after the draw is complete, but before the draw event fires).
  
  
• draw
  This event fires after the draw method has run. It can fire multiple times (eg when a tooltip is hidden).
  
  
• modaldialog
  The modaldialog event fires when the ModalDialog that comes as a part of RGraph is shown. This event is added slightly differently to other events:

  ModalDialog.addCustomEventListener('modaldialog', function () {alert('Hello world!');});
  

  
  
• adjustbegin
  This event fires when adjusting begins.
  
  
• adjust
  This event fires during adjusting.
  
  
• adjustend
  This event fires when adjusting ends. Much like the mouseup event
  
  
• annotatebegin
  This event fires when annotating begins.
  
  
• annotate
  This event fires during annotating - much like the mousemove event.
  
  
• annotateend
  This event fires when annotating ends.
  
  
• annotatecolor
  This event fires when the annotate color is changed via the mini-palette.
  
  
• annotateclear
  This event fires when the annotations are cleared using the api function RGraph.clearAnnotations.
  
  
• beforeclear
  This event fires just before the canvas is cleared using the api function RGraph.Clear.
  
  
• clear
  This event fires when the canvas is cleared using the api function RGraph.Clear.
  
  
• crosshairs
  This event fires when the RGraph crosshairs are moved.
  
  
• beforeinteractivekey
  This event fires before the interactive key has triggered and is about to highlight the chart. You can get the index of the key element by: obj.get('keyInteractiveIndex')
  
  
• afterinteractivekey
  This event fires after the interactive key has triggered and has highlighted the chart. You can get the index of the key element by: obj.get('keyInteractiveIndex')
  
  
• beforebackground
  This event fires before the background is drawn in charts that use a background (ie Bar charts Gantt charts Horizontal Bar charts Line charts Scatter charts Waterfall charts drawing API Background).
  
  
• background
  This event fires after the background is drawn in charts that use a background (ie Bar charts Gantt charts Horizontal Bar charts Line charts Scatter charts Waterfall charts drawing API Background).
  
  

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.