RGraph/docs/png.html

   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: HTML5 canvas graph library - Retrieving a PNG of your graph</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas graph docs png image" />
  24     <meta name="description" content="RGraph: HTML5 canvas graph library - Retrieving a PNG representation of your graph" />
  25
  26     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  27     <link rel="icon" type="image/png" href="/favicon.png">
  28
  29     <script src="../libraries/RGraph.common.core.js" ></script>
  30     <script src="../libraries/RGraph.common.context.js" ></script>
  31     <script src="../libraries/RGraph.line.js" ></script>
  32     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  33
  34     <script>
  35         window.onload = function ()
  36         {
  37             var line = new RGraph.Line('cvs', [4,3,null,4,5,6,7,4,8,9]);
  38             line.Set('chart.labels', ['Dez', 'Fliss','Geoff','Hoolio','John','Rich','Kev','Charles','Lou','Bob']);
  39             line.Set('chart.hmargin', 5);
  40             line.Set('chart.title', 'Retrieving a PNG of your graph (context menu)');
  41             line.Set('chart.tickmarks', 'endcircle');
  42
  43             line.Set('chart.contextmenu', [
  44                                            ['Get PNG', RGraph.showPNG],
  45                                            null,
  46                                            ['Cancel', function () {}]
  47                                           ]);
  48
  49             line.Set('chart.linewidth', 2);
  50             line.Set('chart.shadow', true);
  51             line.Set('chart.shadow.offsetx', 0);
  52             line.Set('chart.shadow.offsety', 0);
  53             line.Set('chart.shadow.blur', 15);
  54             line.Set('chart.shadow.color', 'red');
  55
  56             RGraph.Clear(line.canvas, 'white'); // This effectively sets the background color to be white
  57
  58             line.Draw();
  59         }
  60     </script>
  61 </head>
  62 <body>
  63
  64     <!-- Social networking buttons -->
  65     <script src="../libraries/RGraph.common.core.js" ></script>
  66
  67     <script>
  68         function HideTwitterDIV ()
  69         {
  70             document.getElementById("twitter_div").style.opacity = 0;
  71             document.getElementById("twitter_div").style.display = 'none';
  72         }
  73
  74
  75         function ShowTwitterDIV (e)
  76         {
  77             var e   = RGraph.FixEventObject(document.all ? event : e);
  78             var div = document.getElementById("twitter_div");
  79             var img = document.getElementById("twitter_icon");
  80
  81             div.style.display = 'block';
  82             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  83             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  84
  85             /**
  86             * Fade it in
  87             */
  88             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  89             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  90             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  91             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  92             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  93
  94             e.stopPropagation();
  95
  96             return false;
  97         }
  98
  99         /**
 100         * This code installs the event handler that hides the Twitter DIV
 101         */
 102         if (RGraph.isIE8()) {
 103              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 104         } else {
 105             window.addEventListener('click', HideTwitterDIV, false);
 106         }
 107     </script>
 108
 109     <!-- The twitter DIV -->
 110     <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;">
 111         <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet&nbsp;about&nbsp;RGraph</a><br>
 112         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 113     </div>
 114
 115     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 116         <script>
 117             // Opera fix
 118             if (navigator.userAgent.indexOf('Opera') == -1) {
 119               document.getElementById("social_icons").style.position = 'fixed';
 120               document.getElementById("twitter_div").style.position = 'fixed';
 121
 122             }
 123         </script>
 124
 125         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 126
 127
 128             <div id="social">
 129                 <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%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
 130                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 131                 </a>
 132
 133                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 134                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 135                 </a>
 136
 137
 138 <!--
 139                 <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
 140                     <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 141                 </a>
 142
 143
 144                 <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
 145                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 146                 </a>
 147
 148                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 149                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 150                 </a>
 151
 152                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 153                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 154                 </a>
 155 -->
 156             </div>
 157     </div>
 158     <!-- /Social networking buttons -->
 159
 160
 161 <div id="breadcrumb">
 162     <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 163     >
 164     <a href="index.html">Documentation</a>
 165     >
 166     Retrieving a PNG of your graph
 167 </div>
 168
 169     <h1>RGraph: HTML5 canvas graph library - Retrieving a PNG of your graph</h1>
 170
 171     <script>
 172         if (RGraph.isIE8()) {
 173             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 graphs, 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://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
 174         }
 175     </script>
 176
 177     <style>
 178         span#png_link {
 179             position: absolute;
 180             left: 500px;
 181             top: 30px;
 182             border: 1px black solid;
 183             padding: 1px;
 184             background-color: rgba(225,225,225,0.5);
 185             cursor: pointer;
 186             color: blue;
 187             font-size: 12pt;
 188         }
 189     </style>
 190
 191     <div style="position: relative">
 192         <span id="png_link" onclick="RGraph.showPNG(document.getElementById('cvs'), event);">Get PNG</span>
 193         <canvas id="cvs" width="600" height="250" style="float: left">[No canvas support]</canvas>
 194     </div>
 195
 196
 197     <p>
 198         RGraph  provides an easy way to get a PNG image of your graph. This allows you to
 199         easily save the image locally to use in (for example) a document, spreadsheet or presentation.
 200     </p>
 201
 202     <p>
 203         Originally, the function was designed to be used with a context menu, so it is located in the <i>RGraph.common.context.js</i>.
 204         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
 205         example of its usage on the first <a href="../examples/tradar.html">Tradar example</a href>.
 206     </p>
 207
 208     <br clear="all" />
 209
 210     <p>Include the context menu code:</p>
 211     <pre class="code">&lt;script src="../libraries/RGraph.common.context.js" &gt;&lt;/script&gt;</pre>
 212
 213     <p>Add the context menu:</p>
 214     <pre class="code">
 215 myGraph.Set('chart.contextmenu', [
 216                                   <span style="color: green">['Get PNG', RGraph.showPNG]</span>,
 217                                   null,
 218                                   ['Cancel', function () {}]
 219                                  ]);</pre>
 220
 221     <h4>Using the function without a context menu</h4>
 222
 223     <p>
 224         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
 225         the canvas into the function as an argument, along with the event object.
 226     </p>
 227
 228     <pre class="code">
 229 &lt;!-- This CSS positions the link over the top right of the canvas --&gt;
 230 &lt;style&gt;
 231     span#png_link {
 232         position: absolute;
 233         left: 450px;
 234         top: 30px;
 235         border: 1px black solid;
 236         padding: 1px;
 237         background-color: #eee;
 238         cursor: pointer;
 239     }
 240 &lt;/style&gt;
 241
 242 &lt;div style="position: relative"&gt;
 243     &lt;span id="png_link" <span style="color: green">onclick="RGraph.showPNG(myCanvas, event)"</span>&gt;Get PNG&lt;/span&gt;
 244     &lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
 245 &lt;/div&gt;
 246 </pre>
 247
 248 </body>
 249 </html>