MENU
.net Powerful JavaScript charts
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.19, 28th September 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.

Download »

 

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 »

The toDataURL function

The toDataURL function returns a data: URL representing the canvas at the time that the function is called. Using this function you can transfer the canvas to your server (using jquery for example) as a base64 encoded string and then use server-side scripting (eg PHP, ASP) to decode the string and save it to a file.

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        // Note that the toDataURL function is on the canvas object - NOT the context.
        // Transfer (using a HTTP POST request) the base64 encoded string to the server with jQuery
        var image_data = canvas.toDataURL("image/png");
        $.post("save_chart.php", { src: image_data } );
        
        // Alternatively you could use the data: URL as the SRC of an image tag to show it on the page
    }
</script>
And the php server-side code would be:
<?php
    // You need to adjust this to suit
    $filename = '/tmp/myChart.png';

    $src     = $_POST['src'];
    $src     = substr($src, strpos($src, ",") + 1);
    $decoded = base64_decode($src);
    
    $fp = fopen($filename,'wb');
    fwrite($fp, $decoded);
    fclose($fp);
?>

Arguments to the function

Note: If you're using the toDataURL function then any images that you draw on the canvas should be hosted on the same domain/server as the page. If they're not - an error occurs.