RGraph provides an easy way to get a PNG image of your graph. 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 Tradar 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 () {}]
]);
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>