Tweet about RGraph
Follow for HTML5 news
Bookmark and share:

# RGraph: HTML5 canvas graph library - Retrieving a PNG of your graph

Get PNG

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 () {}]
                                     ]);

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

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