source: Dev/trunk/RGraph/index.html @ 144

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

RGraph
File size: 27.7 KB
Line 
1<?php
2    require_once('common.php');
3   
4    CheckDomain();
5
6    if ($_SERVER['SERVER_NAME'] == 'www.rgraph.net') {
7        ob_start('ob_gzhandler');
8        header('Cache-control: max-age=4800');
9    }
10?>
11<!DOCTYPE html>
12<html>
13<head>
14
15    <meta http-equiv="X-UA-Compatible" content="chrome=1">
16
17    <!--
18        /**
19        * o------------------------------------------------------------------------------o
20        * | This file is part of the RGraph package - you can learn more at:             |
21        * |                                                                              |
22        * |                          http://www.rgraph.net                               |
23        * |                                                                              |
24        * | This package is licensed under the RGraph license. For all kinds of business |
25        * | purposes there is a small one-time licensing fee to pay and for non          |
26        * | commercial  purposes it is free to use. You can read the full license here:  |
27        * |                                                                              |
28        * |                      http://www.rgraph.net/LICENSE.txt                       |
29        * o------------------------------------------------------------------------------o
30        */
31    -->
32
33    <title>RGraph: Javascript charts and graph library</title>
34    <link rel="stylesheet" href="css/website.css" type="text/css" media="screen" />
35
36    <RELEASE_SCRIPT_REMOVE>
37        <!-- These get replaced by a single combined JS file -->
38        <script src="libraries/RGraph.common.core.js" ></script>
39        <script src="libraries/RGraph.common.tooltips.js" ></script>
40        <script src="libraries/RGraph.line.js" ></script>
41        <script src="libraries/RGraph.bar.js" ></script>
42    </RELEASE_SCRIPT_REMOVE>
43    <!--[if IE 8]>
44        <script src="excanvas/excanvas.original.js"></script>
45    <![endif]-->
46
47    <link rel="icon" type="image/png" href="images/favicon.png">
48    <link rel="alternate" type="application/rss+xml" title="RGraph: Javascript charts and graph library" href="http://support.rgraph.net/rss">
49
50    <meta name="verify-v1" content="5y8rHGO/NPFDYU8jBgyT3qI7CSiEoPaeB+4x2TXan+4=" />
51    <meta name="keywords" content="html5 charts canvas graph rgraph javascript line chart bar charts" />
52    <meta name="description" content="RGraph: Javascript charts and graph library" />
53   
54    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
55    <meta property="og:description" content="A javascript charts and graph library based on the HTML5 canvas tag" />
56    <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
57    <meta property="fb:admins" content="825417645" />
58   
59    <!-- Place this tag in your head or just before your close body tag -->
60    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
61   
62   
63    <style>       
64        .color_square {
65            display: inline;
66            display: inline-block;
67            width: 10px;
68            height: 10px;
69        }
70       
71        .black {
72            background-color: black;
73        }
74       
75        .red {
76            background-color: red;
77        }
78    </style>
79
80    <script>
81        cover = {div: null};
82
83        function ShowWarning ()
84        {
85            if (document.all && !RGraph.isIE8() && !RGraph.isIE9up()) {
86                cover.div = document.createElement('DIV');
87                cover.div.style.position = 'absolute';
88                cover.div.style.top    = 0;
89                cover.div.style.left   = 0;
90                cover.div.style.width  = (document.body.clientWidth + 20) + 'px';
91                cover.div.style.height = Math.max(document.documentElement.scrollHeight, screen.height) + 'px';
92                cover.div.style.filter = 'Alpha(opacity=50)';
93                cover.div.style.backgroundColor = 'gray';
94                document.body.appendChild(cover.div);
95               
96
97                cover.messageDiv = document.createElement('DIV');
98                cover.messageDiv.style.left = ((parseInt(document.body.clientWidth) / 2) - 200) + 'px';
99                cover.messageDiv.style.top = '200px';
100                cover.messageDiv.style.width = '400px';
101                cover.messageDiv.style.padding = '5px';
102                cover.messageDiv.style.position = 'absolute';
103                cover.messageDiv.style.backgroundColor = 'yellow';
104                cover.messageDiv.style.textAlign = 'center';
105                cover.messageDiv.style.fontFamily = 'Arial';
106                cover.messageDiv.style.fontSize = '12pt';
107                cover.messageDiv.style.border   = '2px black solid';
108                cover.messageDiv.style.filter = 'filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135);';
109                document.body.appendChild(cover.messageDiv);
110               
111                cover.messageDiv.innerHTML = "<h2>Yikes!</h2>Your version of Microsoft Internet Explorer appears to be less than 8, which is required to view these charts. You can still view the website, but it will look odd and the charts won't work.<br /><br /><a onclick=\"cover.div.style.display = 'none'; cover.messageDiv.style.display = 'none';\" href=\"javascript:\">Close</a>"
112            }
113        }
114
115        window.onload = function (e)
116        {
117            if (RGraph.isIE8()) {
118                CreateLineChart();
119                CreateBarChart();
120                CreateRoseChart();
121            }
122
123            ShowWarning();
124        }
125       
126        window.onresize = function (e)
127        {
128            if (cover.div) {
129                cover.messageDiv.style.display = 'none';
130                cover.div.style.display = 'none';
131                cover.div = null;
132            }
133
134            ShowWarning();
135        }
136       
137    </script>
138
139    <script>
140      var _gaq = _gaq || [];
141      _gaq.push(['_setAccount', 'UA-54706-2']);
142      _gaq.push(['_trackPageview']);
143   
144      (function() {
145        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
146        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
147        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
148      })();
149    </script>
150</head>
151<body>
152
153    <!-- Social networking buttons -->
154        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
155            <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%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAK3RFWHRDcmVhdGlvbiBUaW1lAFN1biA0IE9jdCAyMDA5IDE2OjU1OjAyIC0wMDAwXdSr9wAAAAd0SU1FB9oGBBA4IE+EyF0AAAAJcEhZcwAACvAAAArwAUKsNJgAAAAEZ0FNQQAAsY8L/GEFAAADUklEQVR42qVUQYtcRRCuqu432Y3ZYEDFOBhDkJCQ9SAExKOXhYAI7uhJD2JAlOAf8OJvCd70JHgKJAoGPEg8iEEW9xCi7AaDybiZeW/mve4qv+qejfFs87bnbb/ur77vq6pmsy/p/41Yf5TeEcpGZMRE4ivKrPT5Zzeufb3XyEkRMTOSqNanfv7hR1sffLIe1ymGrxxiSBMRNhGH8j+fmYMpPf/cq+devhj0OD4aE0BCwCe69s2v80W4/PHZp5+lePfua6dOeVgzYRZ2Tr7ZKRHNZrP791MjGwSODIYeki1tnBj/8P2tM2fOvv0exel0Oh6PpUbx75DBhn8AQ5SSLjqzAHBww7KaIY7YQ+qG+Med4sUwLHMeQhhRPXQ4xEiN0oIf/Z1TJBYIUFPnC8BFlyxyOx8cIoRglFfn+BDAHEyUlm2eT1PGwVj2WHaPMDfDkQ3QaRxCVUsiFAqs5APnXU1Z7buUO25zZuCxBRNlzfD5yDBYqqzdHthIT2ooS2AGpG6ZMhhbKEQ1VXoIlMJiMawgRFwLUuolwUULOxstzsyXfQpiWWGik+Mspp7WBAMVkCshQZonGVjR4+GElnkvhcFiRxJUM5Ajk2aV8EDCHYqPVhmZTCZd19WiLEXFoKY6Wi6fev3iW5cuvZH7YwnJQIGqm4ToEto+v/DiS7MKMVy//u3BwYHZf+1wm9benbz5/uUTHp5L0q3OI5ajfz14Zm//d98HhchToeBv8KwKIRhObbKHsNI1BT/vD94L3ZSmprNqp/ePVelkj7mgHB0vLwJrKHmDpzFYbQU4m7XNuigswBAkuJSvaS0uNq5gTRg5IbStSaxKcqaAQwGJxFOw81AjM1chxKt+98eBYASoS8m3n0V9F6Q8rDwbjWIolfW4taxOXnHIAIjVWwD3RxnFEECimlAQzuIYxvGNEPiwM+BW/NdXceHqeChYLobixfnv7++3bev7X7nw2/b2Ngep10xpUVqZyrq2NqoGeIOBSG0iknv3/tzd3R2PT6565MqVT2OMN7+72fc9x8brKg+FtO3s7Fz94ioIN+5aPrwTfWxtbZ0+/WPxvly/t2+f+/mnW8NQWhK84T+kaeIQJDZoCLAEBFZB8Oja+ubm5vnzv1Q7/wE5+e63NZwqQQAAAABJRU5ErkJggg==" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
156            <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="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAIAAABL1vtsAAAAK3RFWHRDcmVhdGlvbiBUaW1lAFN1biA0IE9jdCAyMDA5IDE4OjM4OjI3IC0wMDAwqmTObgAAAAd0SU1FB9oGBBA5GpCTIK4AAAAJcEhZcwAACvAAAArwAUKsNJgAAAAEZ0FNQQAAsY8L/GEFAAAD40lEQVR42j1UTW8cRRDt6u7dWe+u12sb21iOBUGJsEmcQ5AgKEJwRIIbN478If5HbhxAHEEiIKzIgETiRCDHseO1idf7MRvvfHR3Na/GNjM7vV/Vr1+9elUU44Ne+tkoLwORiipiJW+YgrKRmCjKreS6WC/eNSkT4mIzWZn9gY76ZwOtHcJd0AKiWDOxjUor5SMAFXCq7XSFga9EdWMM+/lazR6nKXW6hQ8IiexNVBxxrpNQYiVY8s/VckFCnjL4Rl3vH5/Y/iTtJi1GsJbDXFRdaxYbDTYqnU7TjL0WGlfnXxIxMTLp3MfBaGjL0pcheFbEQrDVsDfn55FXGePSQvPFOD1OJ0iKSONvUaq6QgyRDDYVpbM+8NR7sIgUgPLOQidj9e3uJHfh8425a7PN09E4Cx5M+EJsSQhaMHQDRuBoOXDunPyIhxki/fvaHZ4nQdF+GtZatdtrq67Sr/T++elgkGVKGyGkHKEOIVjnvXclNCTJkJi5VHUfg1PUy+KTcaGqiujIy+3kztqbj/YPTjOnFQsdosAC4XyeawAKDxZBWDmvEPV7j3eOGDpoBoRebZx/dbe12pk9Hh8xGVFEcfAeWoTzLLPGIhJVBQ2cWaBAEa6wsBkOuvAEJAtVyV+7grQoEJhtwCswUEr4SmsgI22PVbGP6vYy3VoQXwhBFa91Ou0aPXo1KAoQzSNyR6GioETnpCJak2P2LLWviqPebtInK6YqoxgvY/7xz92np0MQI9krWyxyRPZeJPUACt5xcE1LMaBH9N6o7DOdK7z0VCQx68tvxBh8dQl9h1SEBXiIn9EgyodXw9Hm9cXFZtbLZx6fmW9+nbbrkF76ZWvJfnp95b3xaPvvPfjKKEgK/dFSkYGHJ6A2HB8f9kz0X2wmXTsN0ZwVyYu0tpfavUny8z/TUcHLrVl2SigIEdlpIbFjkRqmg+MOzvq/PXl2f2vz67vNXw7K4TnEgV3g7nBzodFN9F/jERKIMg1AQyxj4QNAweYiO0SI4aenzwZp+vGdrS83ZlglsWpMmBrxL/v9P/aeeygpALg1Os/KglwADH2rsrPhnYPD3cPe3Fw7MTVpLwoeviupPx7mRtDEshgqpi4sDMd6vVbkhZdGZRkwTgbVhMNkOAIkas/ofB1kL9WCzBQxG9xXs9Z4p9v1uvG+NdOoGChxOHCkc8FWSyhKhniMEoLfCgqoJATidrPJ0+lSZ85+cGtj/7vvfZLMduY4SPWqdrZXg87Ey4EnbVh90JKFpvzkuEvx3v17yOXB7u7Ww+3tlycnQRqkChelL+fc/2PmanSqqhT2rfX1jz58/90bO/8BXcnf85jv+UAAAAAASUVORK5CYII=" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
157        </div>
158
159        <script>
160            // Opera fix
161            if (navigator.userAgent.indexOf('Opera') == -1) {
162              document.getElementById("social_icons").style.position = 'fixed';
163            }
164        </script>
165       
166        <div id="google_plusone" style="position: fixed; right: 0; z-index: 1000">
167            <!-- Place this tag where you want the +1 button to render -->
168            <g:plusone href="http://www.rgraph.net"></g:plusone>
169        </div>
170
171    <!-- Social networking buttons -->
172
173
174    <div id="title">
175        <div id="image">
176            <br />
177            <img src="data:image/png;base64,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" align="absmiddle" alt="RGraph: Javascript charts and graph library" width="64" height="64" style="position: relative; top: 15px" />
178        </div>
179       
180        <div id="text">
181            <h1 id="title">RGraph: <span>Javascript charts and graph library</span></h1>
182            <i style="position: relative; top: -20px; left: 5px">Interactive javascript charts using the HTML5 canvas tag</i>
183        </div>
184    </div>
185
186    <!-- END HEADER -->
187
188
189
190        <canvas id="myLine" width="480" height="250" style="float: right">[Please wait for the onload event to fire...]</canvas>
191        <script>
192            /**
193            * Create the line graph
194            */
195            function CreateLineChart ()
196            {
197                var data1 = [14,13,16,18,14,12,11,14,19,18,17,18];
198                var data2 = [11,12,14,12,11,13,13,15,14,15,13,14];
199                var labels = ['Jane','Geoff','Lou','Pob','Verity','Baz','Hue','Olga','Pete','Lou','Kev','Fred']
200       
201                var myLine = new RGraph.Line('myLine', data1, data2);
202
203                myLine.Set('chart.gutter.top', 35);
204                myLine.Set('chart.gutter.left', 40  );
205                myLine.Set('chart.gutter.right', 5);
206                myLine.Set('chart.gutter.bottom', 10);
207
208                myLine.Set('chart.colors', ['red', 'black']);
209                myLine.Set('chart.units.post', '%');
210                myLine.Set('chart.tickmarks', null);
211                myLine.Set('chart.shadow', true);
212                myLine.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0);
213                myLine.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0);
214                myLine.Set('chart.shadow.blur', 15);
215                myLine.Set('chart.shadow.color', ['#f66', '#666']);
216                myLine.Set('chart.linewidth', 5);
217                myLine.Set('chart.hmargin', 10);
218               
219                myLine.Set('chart.background.grid.width', 1);
220                myLine.Set('chart.background.grid.color', '#ddd');
221                myLine.Set('chart.background.barcolor1', 'white');
222                myLine.Set('chart.background.barcolor2', 'white');
223                myLine.Set('chart.background.grid.autofit', true);
224                myLine.Set('chart.background.grid.autofit.numvlines', 12);
225                myLine.Set('chart.background.grid.autofit.numhlines', 5);
226
227                myLine.Set('chart.title', 'An example showing Robert and Daniels sats');
228                myLine.Set('chart.title.vpos', 0.5);
229
230                myLine.Set('chart.text.color', '#333');
231                myLine.Set('chart.noaxes', true);
232                myLine.Set('chart.ymin', 10);
233
234                myLine.Set('chart.key', ['Robert', 'Daniel']);
235                myLine.Set('chart.key.rounded', true);
236                myLine.Set('chart.key.background', 'white');
237                myLine.Set('chart.key.position.x', myLine.Get('chart.gutter.left') + 10);
238               
239                if (RGraph.isIE8()) {
240                    // Change the shadow color
241                    myLine.Set('chart.shadow.color', '#666');
242                } else {
243                    // Only show tooltips for capable browsers - NOT IE8
244                    window.__rgraph_line_object__ = myLine;
245                   
246                    /**
247                    * This function is used to create the tooltip - instead of an array of tooltips
248                    */
249                    function line_chart_tooltip_func (i)
250                    {
251                        var obj   = window.__rgraph_line_object__
252                        var index = i;
253                       
254
255                        while (i > 11) {
256                            index   = i - 12;
257                            i       = i - 12;
258                        }
259
260                        // Add the index to the window object so it can be used
261                        // in the ontooltip event handler in making the Pie
262                        window.__rgraph_line_tooltip_index__ = index;
263
264                        var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
265                   
266                        return '<canvas id="tooltip_cvs" width="50" height="50" style="float: right">[No canvas support]</canvas><div style="float: right"><b>' + months[index] + '</b><br /><div class="color_square red"></div> Robert: ' + obj.original_data[0][index] + '<br /><div class="color_square black"></div> Daniel: ' + obj.original_data[1][index] + '</div>';
267                    }
268                    myLine.Set('chart.tooltips', line_chart_tooltip_func);
269                    myLine.Set('chart.tooltips.effect', 'fade');
270                    myLine.Set('chart.tooltips.css.class', 'line_graph_css');
271                   
272                    function DrawTooltipPie (obj)
273                    {
274                        var tt = RGraph.Registry.Get('chart.tooltip');
275
276                        // Extract the data from the tooltip HTML itself
277                        var r_data = data1[__rgraph_line_tooltip_index__];
278                        var d_data = data2[__rgraph_line_tooltip_index__];
279                       
280                        var bar = new RGraph.Bar('tooltip_cvs', [r_data, d_data]);
281                        bar.Set('chart.gutter.top', 5);
282                        bar.Set('chart.gutter.bottom', 5);
283                        bar.Set('chart.gutter.left', 5);
284                        bar.Set('chart.gutter.right', 5);
285                        bar.Set('chart.noyaxis', true);
286                        bar.Set('chart.background.grid', false);
287                        bar.Set('chart.colors', ['red', 'black']);
288                        bar.Set('chart.colors.sequential', true);
289                        bar.Set('chart.shadow', true);
290                        bar.Set('chart.shadow.offsetx', 0);
291                        bar.Set('chart.shadow.offsety', 0);
292                        bar.Set('chart.shadow.blur', 15);
293                        bar.Set('chart.strokestyle', 'rgba(0,0,0,0)');
294                        bar.Draw();
295                    }
296                    RGraph.AddCustomEventListener(myLine, 'ontooltip', DrawTooltipPie);
297                }
298                myLine.Draw();
299            }
300        </script>
301
302    <h2>Faster <span>websites with RGraph</span></h2>
303    <p>
304        RGraph is a Javascript charts and graph library. By using the HTML5 canvas tag, these javascript charts are created in the web
305        browser, meaning quicker charts and less web server load. RGraph is an easy way of speeding up your website.
306       
307    </p>
308
309    <p>
310        RGraph uses the HTML5 canvas tag to produce a wide variety of javascript charts and graph types.
311        It is covered by the RGraph License.
312    </p>
313
314    <div style="text-align: center">
315        <a href="examples/index.html" id="read-more"><b>Examples</b></a> &amp;
316        <a href="docs/index.html" id="read-more">Documentation</a>
317    </div>
318   
319    <h2>Available <span>charts</span></h2>
320        <p>
321            RGraph supports over twenty different types of javascript charts, including: Bar charts, Bipolar charts, Donut charts,
322            Funnel charts, Gantt charts, Horizontal Bar charts, Horizontal Progress bars, LED grids, Line charts, Meter charts,
323            Odometer charts, Pie charts, Radar charts, Radial Scatter charts, Rose charts, Scatter charts, Thermometer charts,
324            Vertical Progress bars and Waterfall charts. In addition there are variants available on many charts.
325        </p>
326
327    <a name="download"></a>
328    <h2>Download <span>RGraph</span></h2>
329   
330    <?php if($_SERVER['SERVER_NAME'] == 'www.rgraph.net' OR $_SERVER['SERVER_NAME'] == 'www.rgraph.org' OR isset($_GET['showdownloadlinks'])): ?>
331        <div id="downloadlinks">
332            <p>
333                The latest downloads are below. These are not time limited demos or a branded trial - they're full versions.
334            </p>
335       
336            <?php ShowDownloadLinks() ?>
337        </div>
338
339    <?php else: ?>
340
341        <span style="color: red">
342            [Only available on <a href="http://www.rgraph.net#download">http://www.rgraph.net</a>]
343        </span>
344    <?php endif ?>
345
346   
347    <script>
348        /**
349        * Hide the download links if not online
350        */
351        if (location.host != 'www.rgraph.net' && location.host != 'www.rgraph.org' && location.host != 'dev.rgraph.net') {
352            var downloadlinks = document.getElementById("downloadlinks");
353           
354            if (downloadlinks) {
355                document.getElementById("downloadlinks").style.display = 'none';
356            }
357        }
358    </script>
359
360
361    <a name="license"></a>
362    <h2>The <span>RGraph license</span></h2>
363
364    <div style="float: right; padding-left: 15px; padding-right: 40px; text-align: center">
365        <form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm">
366            <input name="item_name_1" type="hidden" value="RGraph License" />
367            <input name="item_description_1" type="hidden" value="License for RGraph: Javascript charts and graph library" />
368            <input name="item_quantity_1" type="hidden" value="1" />
369            <input name="item_price_1" type="hidden" value="79.0" />
370            <input name="item_currency_1" type="hidden" value="GBP" />
371            <input name="_charset_" type="hidden" value="utf-8" />
372            <input alt="" width="116" height="61" src="images/buy.png" type="image" />
373        </form>
374
375        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
376            <input type="hidden" name="cmd" value="_s-xclick">
377            <input type="hidden" name="hosted_button_id" value="FDVK4T4GKQ6M8">
378            <input type="image" src="images/paypal.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
379            <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
380        </form>
381    </div>
382
383    <p>
384        RGraph is covered by the RGraph license. A summary is that for commercial/business use there is a small one-time
385        licensing fee of 79 GBP (roughly 125 USD). For non-commercial purposes it's freely usable.
386       
387        There are some
388        <a href="docs/licensing.html"><b>licensing FAQs</b></a> that should help to answer any
389        questions you might have. If you need one, you can <a href="http://www.rgraph.net/invoice.html">get an invoice here</a>.
390    </p>
391
392    <p>
393        If you have any questions about RGraph licensing, you can send your question to: <a href="mailto:licensing@rgraph.net">licensing@rgraph.net</a>.
394        If your question is of a support nature, please use the <a href="http://support.rgraph.net" target="_blank">support forum</a>.
395    </p>
396   
397    <iframe width="100%" height="300" src="LICENSE.txt"></iframe>
398
399    <script>
400        if (!RGraph.isIE8()) {
401            CreateLineChart();
402        }
403    </script>
404
405
406    <br clear="all" />
407
408
409
410
411    <p style="text-align: center">
412        <a href="http://www.rgraph.net" target="_blank">Keep up-to-date at www.rgraph.net</a>
413    </p>
414   
415    <div id="rgraph"></div>
416   
417    <script>
418        if (location.host.match(/^dev\.rgraph/)) {
419            document.getElementById("rgraph").innerHTML = '<div id="devtag">DEVELOPMENT<br /><a href="http://www.rgraph.net">Go to the live version &raquo;</a></div>';
420        }
421    </script>
422
423    <script>
424        (function swapImages ()
425        {
426            document.getElementById("social_icons").getElementsByTagName('IMG')[0].src = 'images/delicious.png';
427            document.getElementById("social_icons").getElementsByTagName('IMG')[1].src = 'images/twitter.png';
428            document.getElementById("title").getElementsByTagName('IMG')[0].src = 'images/logo.png';
429        })()
430    </script>
431</body>
432</html><!-- 2011-07-29 -->
Note: See TracBrowser for help on using the repository browser.