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 show charts on your website.

More »


Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »


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 »

Updating your charts dynamically

View example on CodePen

The example code shown below shows a Line chart that automatically updates itself every 50 milliseconds. An ideal use for this could be showing a network's bandwidth usage or a server's load value.

This particular example shows a filled Line chart.

To get up-to-date data from your server you could simply have the page refresh itself, storing the data on the server, or use AJAX if you want the data stored client-side or, like this example, the storage location doesn't strictly matter.

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

    d1  = [0];
    l   = 0; // The letter 'L' - NOT a one
    obj = null;

    // Pre-pad the arrays with null values
    for (var i=0; i<600; ++i) {

    function getGraph(id, d1)
        // After creating the chart, it's stored on the global window object
        if (!window.obj) {
            window.obj = new RGraph.Line({
                id: id,
                data: d1,
                options: {
                    marginRight: 75,
                    backgroundColor: 'white',
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    title: 'Bandwidth used',
                    titleSize: 18,
                    titleBold: true,
                    titledsVpos: 0.5,
                    yaxis: false,
                    yaxisPosition: 'right',
                    yaxisScaleMax: 50,
                    yaxisLabelsCount: 2,
                    yaxisScaleUnitsPost: 'MB/s',
                    xaxisTickmarksCount: 0,
                    xaxisTickmarksLength: 5,
                    colors: ['#000'],
                    linewidth: 0.5,
                    filled: true,
                    tickmarksStyle: null

            // Create a gradient
            var grad = window.obj.context.createLinearGradient(0,0,0,250);
            grad.addColorStop(0, '#efefef');
            grad.addColorStop(0.9, 'rgba(0,0,0,0)');

            // Set the gradient as the charts fill color
            window.obj.set('filledColors', [grad]);

        return window.obj;

    // The draw() function draws a single frame of the chart. It's
    // called repeatedly to get the scrolling effect.
    function draw ()
        // Clear the canvas in preparation for for
        // drawing a new frame
        RGraph.clear(document.getElementById('cvs', 'white'));

        // Create the chart and draw it
        var graph = getGraph('cvs', d1);

        // Generate a random value that's close to the
        // last value of the current data
        var index = d1.length - 1;
        var r1 = RGraph.random(
            RGraph.isNull(d1[index]) ? 26 : d1[index] - 2,
            RGraph.isNull(d1[index]) ? 24 : d1[index] + 2
        // Bounds checking for the new value
        r1 = Math.max(r1, 0);
        r1 = Math.min(r1, 50);

        // Add the new value on to the end of the data array
        // Ensure the array is at most 600 values
        while (d1.length > 600) {
            d1 = RGraph.arrayShift(d1);

        // Set the new data on the Line chart object
        window.obj.original_data[0] = d1;
        // Call this function again in 50ms
        setTimeout(draw, 50);

    // Call the draw function to set things going