Mention RGraph on Twitter

RGraph: HTML5 Javascript charts library - Retrieving a PNG of your chart

PNG [No canvas support]

RGraph provides an easy way to get a PNG image of your chart. This allows you to easily save the image locally to use in (for example) a document, spreadsheet or presentation.

Originally, the function was designed to be used with a context menu, so it is located in the RGraph.common.context.js. Now though, you do not have to use the function with a context menu, and can instead pass in the canvas as the optional argument. There's an example of its usage on the first Radar example.


Include the context menu code:

<script src="../libraries/RGraph.common.context.js" ></script>

Add the context menu:

myGraph.Set('chart.contextmenu', [
                                  ['Get PNG', RGraph.showPNG],
                                  null,
                                  ['Cancel', function () {}]
                                 ]);

Using the function without a context menu

If you want to use the function with a piece of text (or an image) as the "link", optionally positioned over the canvas, you can pass the canvas into the function as an argument, along with the event object. 

<!-- This CSS positions the link over the top right of the canvas -->
<style>
    span#png_link {
        position: absolute;
        left: 450px;
        top: 30px;
        border: 1px black solid;
        padding: 1px;
        background-color: #eee;
        cursor: pointer;
    }
</style>

<div style="position: relative">
    <span id="png_link" onclick="RGraph.showPNG(myCanvas, event)">Get PNG</span>
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
</div>

Retrieving just the PNG URL

If you just want to get the PNG image URL - this can be done with the standard canvas function.toDataUrl(): 

var myUrl = myCanvas.toDataURL();

This gives you a data: URL which represents the canvas. Like this. Because the URLs are very long there are some things that you should be aware of: