Getting a PNG image

Note: Retrieving PNG images of your charts won't work if you use accessible text (well it will, but there won't be any text on the image). So don't use the textAccessible option if you need to retrieve PNGs.

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 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.


Include the context menu code:

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

Add the context menu to the chart configuration:

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 code positions the link over the top right of the canvas -->
<style>
    span#png_link {
        border: 1px black solid;
        padding: 1px;
        background-color: #eee;
        cursor: pointer;
    }
</style>

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

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:

Saving the chart on the server

If you want to save the chart as an image on the server (not the client) there's information about that here. The example uses PHP but could easily be adapted to other server-side languages.

Note about the textAccessible option

If you're planning to retrieve a PNG of the chart you'll need to NOT use the textAccessible option otherwise you'll end up with no text on your image.