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 (£99) commercial license available.

More »

Hi!

I have a SVG waterfall chart which needs to be updated.

I have already tried to use reset or clear but the chart just disapear and doesn't redraw when I call .draw() function.

Thanks!

I've updated the RGraph.SVG.reset() function so download the updated core library from this link:

https://raw.githubusercontent.com/heyesr/rgraph/main/libraries/RGraph.svg.common.core.js

And try using it and see if it makes a difference.

This is what I was using to get a new waterfall chart displayed - by resetting the SVG tag, removing it from the DOM and creating a new chart from scratch.



<div id="cc" style="width: 500px; height: 500px"></div>

<script>
    // Create the initial chart
    waterfall = new RGraph.SVG.Waterfall({
        id: 'cc',
        data: [1,2,3,4,5,6,7,8,9,10],
        options: {
        }
    }).draw();
    
    // Clear the canvas after two seconds
    setTimeout(function ()
    {
        RGraph.SVG.reset(waterfall.svg);

    }, 2000);

    // Draw the second chart
    setTimeout(function ()
    {
        waterfall = new RGraph.SVG.Waterfall({
            id: 'cc',
            data: [4,8,6,4,5,-5,-4],
            options: {
            }
        }).draw();
    }, 5000);
</script>

Thank you! It worked!

I really shouldn't be as surprised as I am! :-)