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.
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.
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.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 theAnd thetoDataURL
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 thedata:
URL as the SRC of an image tag to show it on the page } </script>
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
- [Optional] The content type required. Defaults to
PNG
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.