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

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

RGraph
File size: 10.4 KB
RevLine 
[77]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: Javascript charts and graph library - Microsoft Internet Explorer support</title>
21   
22    <meta name="keywords" content="rgraph html5 canvas docs msie" />
23    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about Microsoft Internet Explorer (MSIE) support" />
24   
25    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
26    <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
27    <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
28
29    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
30    <link rel="icon" type="image/png" href="/favicon.png">
31
32    <script src="../libraries/RGraph.common.core.js" ></script>
33    <script src="../libraries/RGraph.common.context.js" ></script>
34    <script src="../libraries/RGraph.line.js" ></script>
35    <script src="../libraries/RGraph.modaldialog.js" ></script>
36    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
37   
38    <style>
39        div#msie9 {
40            background-color: #dfd;
41            padding: 5px;
42            border: 2px dashed green;
43        }
44    </style>
45
46    <script>
47      var _gaq = _gaq || [];
48      _gaq.push(['_setAccount', 'UA-54706-2']);
49      _gaq.push(['_trackPageview']);
50   
51      (function() {
52        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
53        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
54        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
55      })();
56    </script>
57
58
59</head>
60<body>
61
62   
63    <!-- Social networking buttons -->
64        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
65            <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>
66            <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>
67        </div>
68
69        <script>
70            // Opera fix
71            if (navigator.userAgent.indexOf('Opera') == -1) {
72              document.getElementById("social_icons").style.position = 'fixed';
73            }
74        </script>
75    <!-- Social networking buttons -->
76
77    <div id="breadcrumb">
78        <a href="../index.html">RGraph: Javascript charts and graph library</a>
79        >
80        <a href="index.html">Documentation</a>
81        >
82        MSIE support
83    </div>
84
85    <h1>RGraph: <span>Javascript charts and graph library</span> - Microsoft Internet Explorer (MSIE) support</h1>
86
87    <script>
88        if (RGraph.isIE8()) {
89            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>');
90        }
91    </script>
92   
93    <p />
94
95    <div id="msie9">
96        <b>Microsoft Internet Explorer 9</b>
97       
98        <p>
99            Starting from preview 3, Internet Explorer 9 has support for canvas, including the text and shadow APIs. It also
100            benefits from hardware acceleration, and quick rendering times. You can see some screenshots
101            <a href="http://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a>.
102        </p>
103    </div>
104   
105    <br />
106
107    <canvas id="myLine" width="600" height="250" style="float: right">[No canvas support]</canvas>
108
109    <script>
110
111        window.onload = function ()
112        {
113            var data1 = [4,3,6,8,4,2,1,4,9,8,7,8];
114            var data2 = [1,2,4,2,1,3,5,6,6,5,3,5];
115   
116            // No "var" as the variable has to be global
117            line = new RGraph.Line('myLine', data1, data2);
118            line.Set('chart.title', 'Sales for Acme Inc. (context menu)');
119            line.Set('chart.title.vpos', 0.5);
120            line.Set('chart.colors', ['red', 'black']);
121            line.Set('chart.linewidth', 5);
122
123            // Odd, but this seems to fix an strange MSIE bug where the text is truncated
124            line.Set('chart.units.post', '%                         .');
125
126            line.Set('chart.yaxispos', 'right');
127            line.Set('chart.key', ['2007', '2008']);
128            line.Set('chart.key.background', 'white');
129            line.Set('chart.noaxes', true);
130            line.Set('chart.gutter.left', 5);
131            line.Set('chart.gutter.right', 35);
132            line.Set('chart.hmargin', 10);
133            line.Set('chart.background.barcolor1', 'white');
134            line.Set('chart.background.barcolor2', 'white');
135            line.Set('chart.shadow', true);
136            line.Set('chart.background.grid.autofit', true);
137            line.Set('chart.contextmenu', [['Show dialog', function () {ModalDialog.Show('myDialog', 300);}], ['Cancel', function () {}]]);
138            line.Draw();
139        }
140    </script>
141   
142    <ul>
143        <li><a href="#introduction">Introduction</a></li>
144        <li><a href="#getting">Getting hold of ExCanvas</a></li>
145        <li><a href="#caveats">Caveats</a></li>
146        <li><a href="#frame">Google Chrome Frame</a></li>
147        <li><a href="#dynamic.canvas">Using a dynamically created canvas</a></li>
148    </ul>
149
150    <a name="introduction"></a>
151    <h4>Introduction</h4>
152   
153    <p>
154        As of December 2009 RGraph now works partially with Internet Explorer without Google Chrome Frame.
155        Charts are rendered as VML. You are still recommended to use
156        <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a> to get the best results.
157        The interactive features are unlikely to work correctly. RGraph only works with Microsoft
158        Internet Explorer 8.
159    </p>
160   
161    <p>
162        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.
163    </p>
164   
165    <a name="getting"></a>
166    <h4>Getting hold of ExCanvas</h4>
167   
168    <p>
169        Google ExCanvas is distributed with RGraph in the "excanvas" directory. There is a minified gzip compressed version, along
170        with the original.
171    </p>
172
173    <a name="caveats"></a>
174    <h4>Caveats</h4>
175   
176    <ul>
177        <li>The interactive features of RGraph are unlikely to work correctly with MSIE 8.</li>
178        <li>Shadows are now available (on some chart types), albeit without blurring.</li>
179        <li>You must reference the Javascript libraries in the documents &lt;head&gt;.</li>
180        <li>You must use the window.onload event to create your chart.</li>
181        <li>If your page is large, there may be a slight pause before the window.onload event fires and thus creates the chart.</li>
182        <li>Changing the font that text is shown in is not available.</li>
183    </ul>
184   
185    <a name="frame"></a>
186    <h4>Google Chrome Frame</h4>
187        <p>
188            Instead of ExCanvas you can also use Google Chrome Frame. This basically turns Internet Explorer into Google Chrome, and fully
189            supports RGraph. Since it involves a plugin installation, this is a better option if you can fully influence the users PC. If you
190            can fully influence the users PC however, a better option might be to simply use one of the browsers with native
191            support.
192        </p>
193
194
195    <br />
196
197
198    <a name="dynamic.canvas"></a>
199    <h4>Using a dynamically created canvas</h4>
200        <p>
201            If you're creating your canvas dynamically there is an extra step that you must perform to allow it to be recognised by
202            ExCanvas:
203        </p>
204       
205        <pre class="code">
206var canvas = document.createElement('CANVAS');
207    canvas.id = 'cvs';
208    canvas.width = 600;
209    canvas.height = 250;
210    canvas.style.border = '1px dashed black';
211document.body.appendChild(canvas);
212
213<span style="color: green">G_vmlCanvasManager.initElement(canvas);</span>
214</pre>
215   
216
217   
218    <br />
219    <br />
220    <br />
221
222    <!-- This is the ModdalDialog -->
223    <div id="myDialog" style="display: none">
224        <div style="text-align: center; font-family: Arial">
225            <h4>Please wait...</h4>
226            <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>
227        </div>
228    </div>
229</body>
230</html>
Note: See TracBrowser for help on using the repository browser.