Getting a PNG image
Documentation about how to get a PNG image of your chart. It's returned as a base64 encoded string which you can then send to your server so that it can be written to a file.
- 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="../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.