Retrieving a PNG

Summary: Documentation about how to retrieve a PNG representation/image of your chart. It's retrieved as a base64 encoded string which you can then send to your server so that it can be written to a file.

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

Using the function without a context menu
Retrieving just the PNG URL
Saving the chart to the server
Note about the textAccessible option

PNG

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.

Include the context menu code:

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

Add the context menu:

myGraph.set({
    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 {
        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():

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:

Google Chrome shows the image, but doesn't show the URL in the address bar
MSIE9 can show the image using the context menu API (top) method, but not the stand-alone image.

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.