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 »

HOWTO: Use DOM1 (.onclick, .onmousemove) events

Previously, adding custom RGraph events was rather verbose - being modeled 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 draw custom event to add a highlight after-effect to the bars. The code to achieve this is shown below.

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [[47,75],[32,74],[71,85],[25,19],[23,71],[81,59],[43,130],[23,20]],
        options: {
            colors: ['#494949','#35A0DA'],
            xaxisLabels: ['Alf','Bob','Carry','Dara','Edgar','Fliss','Gary','Harry'],
            yaxisLabelsCount: 3,
            yaxisTickmarksCount: 3,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            marginLeft: 35,
            textSize: 14
        }
    });
    
    // Use the .on() function to add an ondraw function
    bar.ondraw = function (obj)
    {
        var len = obj.coords.length;
        
        for (var i=0; i<len; ++i) {
            obj.path(
                'fs rgba(255,255,255,0.15) fr % % % %',
                obj.coords[i][0], obj.coords[i][1], obj.coords[i][2] / 2, obj.coords[i][3]
            );
        }
    }
    
    bar.draw();
</script>

The on() function

Because dom1 events don't work particularly well with chaining there's an on function which helps you to use the dom1 events and chaining. For example:

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [5,8,9,6,4,5,5],
        options: {
            // ...
        }
    }).on('draw', function (obj)
    {
        // ...
    }).draw()
    
    bar.draw();
</script>

An example of the tooltip event

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

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [14,16,13,15,5,8,9,12],
        options: {
            labels: ['Luis','Kev','Jim','Harry','Hoolio','liss','Rhonda','Fred'],
            tooltips: '<canvas id="tooltip_canvas" width="300" height="100"></canvas>',
            tooltipsCss: {
                backgroundColor: 'white',
                color: 'black'
            },
            marginInner: 5,
            tickmarksStyle: 'endcircle',
            tickmarksSize: 7,
            shadow: false,
            textSize: 14,
            spline: true
        }
    }).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('tooltip');
        var index   = tooltip.__index__;
        
        var bar = new RGraph.Bar({
            id: 'tooltip_canvas',
            data: tooltip_data[index],
            options: {
                marginLeft: 17,
                marginRight: 5,
                marginTop: 15,
                xaxisLabels: ['Monday','Tuesday','Wednesday'],
                backgroundGrid: false,
                yaxis: false,
                yaxisLabels: false,
                labelsAbovebar: true,
                shadow: false
            }
        }).draw();
    }
</script>