Getting a PNG image

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

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:

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