source: Dev/branches/jQueryUI/client/RGraph/docs/msie.html @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.
File size: 10.4 KB
Line 
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.