source: Dev/trunk/RGraph/docs/png.html @ 77

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 8.7 KB
RevLine 
[77]1<?php ob_start('ob_gzhandler') ?>
2<!DOCTYPE html>
3<html>
4<head>
5    <meta http-equiv="X-UA-Compatible" content="chrome=1">
6    <!--
7        /**
8        * o------------------------------------------------------------------------------o
9        * | This file is part of the RGraph package - you can learn more at:             |
10        * |                                                                              |
11        * |                          http://www.rgraph.net                               |
12        * |                                                                              |
13        * | This package is licensed under the RGraph license. For all kinds of business |
14        * | purposes there is a small one-time licensing fee to pay and for non          |
15        * | commercial  purposes it is free to use. You can read the full license here:  |
16        * |                                                                              |
17        * |                      http://www.rgraph.net/LICENSE.txt                       |
18        * o------------------------------------------------------------------------------o
19        */
20    -->
21    <title>RGraph: Javascript charts and graph library - Retrieving a PNG of your graph</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas charts docs png image" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Retrieving a PNG representation of your chart" />
25   
26    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
27    <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
28    <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
29
30    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
31    <link rel="icon" type="image/png" href="/favicon.png">
32   
33    <script src="../libraries/RGraph.common.core.js" ></script>
34    <script src="../libraries/RGraph.common.context.js" ></script>
35    <script src="../libraries/RGraph.line.js" ></script>
36    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
37   
38    <script>
39        window.onload = function ()
40        {
41            var line = new RGraph.Line('cvs', [4,3,7,4,5,6,7,4,8,9]);
42            line.Set('chart.labels', ['Dez', 'Fliss','Geoff','Hoolio','John','Rich','Kev','Charles','Lou','Bob']);
43            line.Set('chart.hmargin', 5);
44            line.Set('chart.title', 'Retrieving a PNG of your chart (context menu)');
45            line.Set('chart.title.vpos', 0.5);
46            line.Set('chart.tickmarks', 'endcircle');
47           
48            line.Set('chart.contextmenu', [
49                                           ['Get PNG', RGraph.showPNG],
50                                           null,
51                                           ['Cancel', function () {}]
52                                          ]);
53
54            line.Set('chart.linewidth', 2);
55            line.Set('chart.shadow', true);
56            line.Set('chart.shadow.offsetx', 0);
57            line.Set('chart.shadow.offsety', 0);
58            line.Set('chart.shadow.blur', 15);
59            line.Set('chart.shadow.color', 'red');
60           
61            RGraph.Clear(line.canvas, 'white'); // This effectively sets the background color to be white
62           
63            line.Draw();
64        }
65    </script>
66
67    <script>
68      var _gaq = _gaq || [];
69      _gaq.push(['_setAccount', 'UA-54706-2']);
70      _gaq.push(['_trackPageview']);
71   
72      (function() {
73        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
74        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
75        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
76      })();
77    </script>
78
79</head>
80<body>
81
82    <!-- Social networking buttons -->
83        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
84            <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20charts%20types&title=RGraph:Javascript%20charts%20and%20graphs%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
85            <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+and+graph+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank"><img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
86        </div>
87
88        <script>
89            // Opera fix
90            if (navigator.userAgent.indexOf('Opera') == -1) {
91              document.getElementById("social_icons").style.position = 'fixed';
92            }
93        </script>
94    <!-- Social networking buttons -->
95
96
97<div id="breadcrumb">
98    <a href="../index.html">RGraph: Javascript charts and graph library</a>
99    >
100    <a href="index.html">Documentation</a>
101    >
102    Retrieving a PNG of your chart
103</div>
104
105    <h1>RGraph: <span>Javascript charts and graph library</span> - Retrieving a PNG of your chart</h1>
106
107    <script>
108        if (RGraph.isIE8()) {
109            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a> to see some screenshots.</div>');
110        }
111    </script>
112
113    <style>
114        span#png_link {
115            position: absolute;
116            left: 500px;
117            top: 30px;
118            border: 1px black solid;
119            padding: 1px;
120            background-color: rgba(225,225,225,0.5);
121            cursor: pointer;
122            color: blue;
123            font-size: 12pt;
124        }
125    </style>
126
127    <div style="position: relative">
128        <span id="png_link" onclick="RGraph.showPNG(document.getElementById('cvs'), event);">Get PNG</span>
129        <canvas id="cvs" width="600" height="250" style="float: left">[No canvas support]</canvas>
130    </div>
131   
132   
133    <p>
134        RGraph  provides an easy way to get a PNG image of your chart. This allows you to
135        easily save the image locally to use in (for example) a document, spreadsheet or presentation.
136    </p>
137   
138    <p>
139        Originally, the function was designed to be used with a context menu, so it is located in the <i>RGraph.common.context.js</i>.
140        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
141        example of its usage on the first <a href="../examples/radar.html">Radar example</a href>.
142    </p>
143   
144    <br clear="all" />
145
146    <p>Include the context menu code:</p>
147    <pre class="code">&lt;script src="../libraries/RGraph.common.context.js" &gt;&lt;/script&gt;</pre>
148   
149    <p>Add the context menu:</p>
150    <pre class="code">
151myGraph.Set('chart.contextmenu', [
152                                  <span style="color: green">['Get PNG', RGraph.showPNG]</span>,
153                                  null,
154                                  ['Cancel', function () {}]
155                                 ]);</pre>
156
157    <h4>Using the function without a context menu</h4>
158
159    <p>
160        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
161        the canvas into the function as an argument, along with the event object.
162    </p>
163   
164    <pre class="code">
165&lt;!-- This CSS positions the link over the top right of the canvas --&gt;
166&lt;style&gt;
167    span#png_link {
168        position: absolute;
169        left: 450px;
170        top: 30px;
171        border: 1px black solid;
172        padding: 1px;
173        background-color: #eee;
174        cursor: pointer;
175    }
176&lt;/style&gt;
177
178&lt;div style="position: relative"&gt;
179    &lt;span id="png_link" <span style="color: green">onclick="RGraph.showPNG(myCanvas, event)"</span>&gt;Get PNG&lt;/span&gt;
180    &lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
181&lt;/div&gt;
182</pre>
183
184</body>
185</html>
Note: See TracBrowser for help on using the repository browser.