Share RGraph:
Share RGraph on Twitter Share RGraph on Google Plus Share RGraph on Facebook Follow RGraph on LinkedIn


How to use DOM1-style RGraph custom events

[No canvas support]

Previously, adding custom RGraph events was rather verbose - being modelled on the DOM2 method of adding events. Now though you can use the older but more concise DOM1 method. You can only add one DOM1 event listener (which could do multiple things) but you can add both DOM1 and DOM2 style event listeners at the same time.

This example uses the ondraw custom event to add a highlight after-effect to the bars.

The code to achieve this is shown below.


<script>
    window.onload = function (e)
    {
        var bar = new RGraph.Bar('cvs', [[47,75],[32,74],[71,85],[25,19],[23,71],[81,59],[43,130],[23,20]])
            .set('colors', ['#494949','#35A0DA'])
            .set('labels', ['Alf','Bob','Carry','Dara','Edgar','Fliss','Gary','Harry'])
            .set('ylabels.count', 3)
            .set('numyticks', 5)
            .set('background.grid.vlines', false)
            .set('background.grid.border', false)

        
        bar.ondraw = function (obj)
        {
            var len = obj.coords.length;
            
            obj.context.fillStyle = 'rgba(255,255,255,0.15)';
            for (var i=0; i<len; ++i) {
                obj.context.fillRect(obj.coords[i][0], obj.coords[i][1], obj.coords[i][2] / 2, obj.coords[i][3])
            }
        }

        bar.draw();
    }
</script>

An example of the ontooltip event

[No canvas support]

This is an example of the ontooltip event that you can use to create charts in tooltips.


<script>
    var line = new RGraph.Line('cvs2', [14,16,13,15,5,8,9,12])
        .set('labels', ['Luis','Kev','Jim','Harry','Hoolio','liss','Rhonda','Fred'])
        .set('tooltips', function () {return '<canvas id="tooltip_canvas" width="300" height="100"></canvas>';})
        .set('hmargin', 5)
        .set('tickmarks', 'endcircle')
        .draw();
    
    line.ontooltip = function (obj)
    {
        // This is the data for the tooltip bar chart
        var tooltip_data = [[4,4,6],[4,7,5],[10,1,2],[5,5,5],[1,2,2],[4,2,2],[2,4,3],[6,4,2]];
    
        // Get the visible tooltip
        var tooltip = RGraph.Registry.get('chart.tooltip');
        var index   = tooltip.__index__;
        
        var bar = new RGraph.Bar('tooltip_canvas', tooltip_data[index])
            .set('gutter.left', 17)
            .set('gutter.right', 5)
            .set('gutter.top', 15)
            .set('labels', ['Monday','Tuesday','Wednesday'])
            .set('background.grid', false)
            .set('noyaxis', true)
            .set('ylabels', false)
            .set('labels.abovebar', true)
            .draw();
    }
</script>

RGraph replacement events

If you include the dynamic library (RGraph.common.dynamic.js) in your page it uses the DOM1 events, so any DOM1 events that RGraph uses and that you try to add will be replaced. There is a direct replacement available though and you can use it like this:

<script>
    var bar = new RGraph.Bar('cvs', [4,6,2,1])
        .set('labels', ['Dave','Louis','John','Fred'])
        .draw();
    
    bar.canvas.onclick = function (e)
    {
        // Add your code for when the canvas is clicked on here...
    }
</script>

© Copyright 2014 Richard Heyes All rights reserved.