RGraph/docs/msie.html

   1 <?php ob_start('ob_gzhandler') ?>
   2 <!DOCTYPE html >
   3 <html>
   4 <head>
   5     <!--
   6         /**
   7         * o------------------------------------------------------------------------------o
   8         * | This file is part of the RGraph package - you can learn more at:             |
   9         * |                                                                              |
  10         * |                          http://www.rgraph.net                               |
  11         * |                                                                              |
  12         * | This package is licensed under the RGraph license. For all kinds of business |
  13         * | purposes there is a small one-time licensing fee to pay and for non          |
  14         * | commercial  purposes it is free to use. You can read the full license here:  |
  15         * |                                                                              |
  16         * |                      http://www.rgraph.net/LICENSE.txt                       |
  17         * o------------------------------------------------------------------------------o
  18         */
  19     -->
  20     <title>RGraph: HTML5 canvas graph library - Microsoft Internet Explorer support</title>
  21
  22     <meta name="keywords" content="rgraph html5 canvas docs msie" />
  23     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about Microsoft Internet Explorer (MSIE) support" />
  24
  25     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  26     <link rel="icon" type="image/png" href="/favicon.png">
  27
  28     <script src="../libraries/RGraph.common.core.js" ></script>
  29     <script src="../libraries/RGraph.common.context.js" ></script>
  30     <script src="../libraries/RGraph.line.js" ></script>
  31     <script src="../libraries/RGraph.modaldialog.js" ></script>
  32     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  33
  34     <style>
  35         div#msie9 {
  36             background-color: #dfd;
  37             padding: 5px;
  38             border: 2px dashed green;
  39         }
  40     </style>
  41
  42 </head>
  43 <body>
  44
  45     <!-- Social networking buttons -->
  46     <script src="../libraries/RGraph.common.core.js" ></script>
  47
  48     <script>
  49         function HideTwitterDIV ()
  50         {
  51             document.getElementById("twitter_div").style.opacity = 0;
  52             document.getElementById("twitter_div").style.display = 'none';
  53         }
  54
  55
  56         function ShowTwitterDIV (e)
  57         {
  58             var e   = RGraph.FixEventObject(document.all ? event : e);
  59             var div = document.getElementById("twitter_div");
  60             var img = document.getElementById("twitter_icon");
  61
  62             div.style.display = 'block';
  63             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  64             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  65
  66             /**
  67             * Fade it in
  68             */
  69             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  70             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  71             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  72             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  73             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  74
  75             e.stopPropagation();
  76
  77             return false;
  78         }
  79
  80         /**
  81         * This code installs the event handler that hides the Twitter DIV
  82         */
  83         if (RGraph.isIE8()) {
  84              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  85         } else {
  86             window.addEventListener('click', HideTwitterDIV, false);
  87         }
  88     </script>
  89
  90     <!-- The twitter DIV -->
  91     <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;">
  92         <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>
  93         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  94     </div>
  95
  96     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  97         <script>
  98             // Opera fix
  99             if (navigator.userAgent.indexOf('Opera') == -1) {
 100               document.getElementById("social_icons").style.position = 'fixed';
 101               document.getElementById("twitter_div").style.position = 'fixed';
 102
 103             }
 104         </script>
 105
 106         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 107
 108
 109             <div id="social">
 110                 <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">
 111                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 112                 </a>
 113
 114                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 115                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 116                 </a>
 117
 118
 119 <!--
 120                 <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">
 121                     <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"/>
 122                 </a>
 123
 124
 125                 <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">
 126                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 127                 </a>
 128
 129                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 130                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 131                 </a>
 132
 133                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 134                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 135                 </a>
 136 -->
 137             </div>
 138     </div>
 139     <!-- /Social networking buttons -->
 140
 141     <div id="breadcrumb">
 142         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 143         >
 144         <a href="index.html">Documentation</a>
 145         >
 146         MSIE support
 147     </div>
 148
 149     <h1>RGraph: HTML5 canvas graph library - Microsoft Internet Explorer (MSIE) support</h1>
 150
 151     <script>
 152         if (RGraph.isIE8()) {
 153             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>');
 154         }
 155     </script>
 156
 157     <p />
 158
 159     <div id="msie9">
 160         <b>Microsoft Internet Explorer 9</b>
 161
 162         <p>
 163             Starting from preview 3, Internet Explorer 9 has support for canvas, including the text and shadow APIs. It also
 164             benefits from hardware acceleration, and quick rendering times. You can see some screenshots
 165             <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a>.
 166         </p>
 167     </div>
 168
 169     <br />
 170
 171     <canvas id="myLine" width="600" height="250" style="float: right">[No canvas support]</canvas>
 172
 173     <script>
 174
 175         window.onload = function ()
 176         {
 177             var data1 = [4,3,6,8,4,2,1,4,9,8,7,8];
 178             var data2 = [1,2,4,2,1,3,5,6,6,5,3,5];
 179
 180             // No "var" as the variable has to be global
 181             line = new RGraph.Line('myLine', data1, data2);
 182             line.Set('chart.title', 'Sales for Acme Inc. (context menu)');
 183             line.Set('chart.title.vpos', 0.5);
 184             line.Set('chart.colors', ['red', 'black']);
 185             line.Set('chart.linewidth', 5);
 186
 187             // Odd, but this seems to fix an odd MSIE bug where the text is truncated
 188             line.Set('chart.units.post', '%                         .');
 189
 190             line.Set('chart.yaxispos', 'right');
 191             line.Set('chart.key', ['2007', '2008']);
 192             line.Set('chart.key.background', 'white');
 193             line.Set('chart.noaxes', true);
 194             line.Set('chart.gutter', 35);
 195             line.Set('chart.hmargin', 10);
 196             line.Set('chart.background.barcolor1', 'white');
 197             line.Set('chart.background.barcolor2', 'white');
 198             line.Set('chart.shadow', true);
 199             line.Set('chart.background.grid.autofit', true);
 200             line.Set('chart.contextmenu', [['Show dialog', function () {ModalDialog.Show('myDialog', 300);}], ['Cancel', function () {}]]);
 201             line.Draw();
 202         }
 203     </script>
 204
 205     <ul>
 206         <li><a href="#introduction">Introduction</a></li>
 207         <li><a href="#getting">Getting hold of ExCanvas</a></li>
 208         <li><a href="#caveats">Caveats</a></li>
 209         <li><a href="#frame">Google Chrome Frame</a></li>
 210         <li><a href="#dynamic.canvas">Using a dynamically created canvas</a></li>
 211     </ul>
 212
 213     <a name="introduction"></a>
 214     <h4>Introduction</h4>
 215
 216     <p>
 217         As of December 2009 RGraph now works partially with Internet Explorer without Google Chrome Frame.
 218         Graphs are rendered as VML. You are still recommended to use
 219         <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a> to get the best results.
 220         The interactive features are unlikely to work correctly. RGraph only works with Microsoft
 221         Internet Explorer 8.
 222     </p>
 223
 224     <p>
 225         Thanks go to everyone involved with the <a href="http://code.google.com/p/explorercanvas/" target="_blank" rel="nofollow">ExCanvas project</a> for providing the ExCanvas library.
 226     </p>
 227
 228     <a name="getting"></a>
 229     <h4>Getting hold of ExCanvas</h4>
 230
 231     <p>
 232         Google ExCanvas is distributed with RGraph in the "excanvas" directory. There is a minified gzip compressed version, along
 233         with the original.
 234     </p>
 235
 236     <a name="caveats"></a>
 237     <h4>Caveats</h4>
 238
 239     <ul>
 240         <li>The interactive features of RGraph are unlikely to work correctly with MSIE 8.</li>
 241         <li>Shadows are now available (on some graph types), albeit without blurring.</li>
 242         <li>You must reference the Javascript libraries in the documents &lt;head&gt;.</li>
 243         <li>You must use the window.onload event to create your graph.</li>
 244         <li>
 245             Inside the window.onload function your graph must be created as a <i>local</i> variable (ie you must use the <i>var</i> keyword). Eg:
 246             <pre class="code">
 247 &lt;script&gt;
 248     window.onload = function ()
 249     {
 250         <span style="color: green">var</span> myGraph = new RGraph.Bar('myCanvas', [1,9,8,7,3,4,8,4,9,5,7,8]);
 251         myGraph.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
 252         myGraph.Draw();
 253     }
 254 &lt;/script&gt;
 255 </pre>
 256         </li>
 257         <li>If your page is large, there may be a slight pause before the window.onload event fires and thus creates the graph.</li>
 258         <li>Changing the font that text is shown in is not available.</li>
 259     </ul>
 260
 261     <a name="frame"></a>
 262     <h4>Google Chrome Frame</h4>
 263         <p>
 264             Instead of ExCanvas you can also use Google Chrome Frame. This basically turns Internet Explorer into Google Chrome, and fully
 265             supports RGraph. Since it involves a plugin installation, this is a better option if you can fully influence the users PC. If you
 266             can fully influence the users PC however, a better option might be to simply use one of the browsers with native
 267             support.
 268         </p>
 269
 270
 271     <br />
 272
 273
 274     <a name="dynamic.canvas"></a>
 275     <h4>Using a dynamically created canvas</h4>
 276         <p>
 277             If you're creating your canvas dynamically there is an extra step that you must perform to allow it to be recognised by
 278             ExCanvas:
 279         </p>
 280
 281         <pre class="code">
 282 var canvas = document.createElement('CANVAS');
 283     canvas.id = 'cvs';
 284     canvas.width = 600;
 285     canvas.height = 250;
 286     canvas.style.border = '1px dashed black';
 287 document.body.appendChild(canvas);
 288
 289 <span style="color: green">G_vmlCanvasManager.initElement(canvas);</span>
 290 </pre>
 291
 292
 293
 294     <br />
 295     <br />
 296     <br />
 297
 298     <!-- This is the ModdalDialog -->
 299     <div id="myDialog" style="display: none">
 300         <div style="text-align: center; font-family: Arial">
 301             <h4>Please wait...</h4>
 302             <span style="font-size: 8pt">(Nothing is going to happen, this is simply an example <a href="" onclick="ModalDialog.Close(); return false">Close</a>)</span>
 303         </div>
 304     </div>
 305 </body>
 306 </html>