From 770ba5201f5c60b2bb36602ff9d359f641e33125 Mon Sep 17 00:00:00 2001 From: Yves Fischer Date: Sun, 23 Oct 2011 21:14:40 +0200 Subject: Charting with flask, rgraph and custom "timeseries database" --- schall/static/RGraph/docs/png.html | 214 +++++++++++++++++++++++++++++++++++++ 1 file changed, 214 insertions(+) create mode 100644 schall/static/RGraph/docs/png.html (limited to 'schall/static/RGraph/docs/png.html') diff --git a/schall/static/RGraph/docs/png.html b/schall/static/RGraph/docs/png.html new file mode 100644 index 0000000..a5eafe3 --- /dev/null +++ b/schall/static/RGraph/docs/png.html @@ -0,0 +1,214 @@ + + + + + + RGraph: HTML5 Javascript charts library - Retrieving a PNG of your graph + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + + +

RGraph: HTML5 Javascript charts library - Retrieving a PNG of your chart

+ + + + + +
+ PNG + [No canvas support] +
+ + +

+ 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. There's an + example of its usage on the first Radar 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. +

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

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(): +

+ + 
var 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: +

+ + + + + \ No newline at end of file -- cgit v1.2.1