3 ob_start('ob_gzhandler');
9 <meta http-equiv="X-UA-Compatible" content="chrome=1">
13 * o------------------------------------------------------------------------------o
14 * | This file is part of the RGraph package - you can learn more at: |
16 * | http://www.rgraph.net |
18 * | This package is licensed under the RGraph license. For all kinds of business |
19 * | purposes there is a small one-time licensing fee to pay and for non |
20 * | commercial purposes it is free to use. You can read the full license here: |
22 * | http://www.rgraph.net/LICENSE.txt |
23 * o------------------------------------------------------------------------------o
27 <title>RGraph: HTML5 canvas graph library based on the HTML5 canvas tag</title>
29 <script src="libraries/RGraph.common.adjusting.js" ></script>
30 <script src="libraries/RGraph.common.core.js" ></script>
31 <script src="libraries/RGraph.common.context.js" ></script>
32 <script src="libraries/RGraph.common.tooltips.js" ></script>
33 <script src="libraries/RGraph.common.zoom.js" ></script>
34 <script src="libraries/RGraph.modaldialog.js" ></script>
36 <script src="libraries/RGraph.line.js" ></script>
37 <script src="libraries/RGraph.bar.js" ></script>
38 <script src="libraries/RGraph.rose.js" ></script>
39 <!--[if IE 8]><script src="excanvas/excanvas.compressed.js"></script><![endif]-->
41 <link rel="stylesheet" href="css/website.css" type="text/css" media="screen" />
42 <link rel="icon" type="image/png" href="images/favicon.png">
43 <link rel="alternate" type="application/rss+xml" title="RGraph: HTML5 canvas graph library" href="http://groups.google.com/group/rgraph/feed/rss_v2_0_msgs.xml">
45 <meta name="verify-v1" content="5y8rHGO/NPFDYU8jBgyT3qI7CSiEoPaeB+4x2TXan+4=" />
46 <meta name="keywords" content="html5 canvas graph rgraph javascript line chart bar graphs" />
47 <meta name="description" content="RGraph: HTML5 canvas graph library for websites on all platforms" />
52 border-radius: 0 ! important;
53 -moz-border-radius: 0 ! important;
54 -webkit-border-radius: 0 ! important;
55 box-shadow: 0 0 15px gray ! important;
56 -moz-box-shadow: 0 0 15px gray ! important;
57 -webkit-box-shadow: 0 0 15px gray ! important;
58 border: 1px gray solid ! important;
61 .RGraph_zoomed_canvas {
62 -webkit-box-shadow: 0 0 15px gray ! important;
66 -webkit-box-shadow: gray 0 0 15px ! important;
67 -moz-box-shadow: 0 0 15px gray ! important;
68 box-shadow: 0 0 15px gray ! important;
75 function ShowWarning ()
77 if (document.all && !RGraph.isIE8() && !RGraph.isIE9up()) {
78 cover.div = document.createElement('DIV');
79 cover.div.style.position = 'absolute';
80 cover.div.style.top = 0;
81 cover.div.style.left = 0;
82 cover.div.style.width = (document.body.clientWidth + 20) + 'px';
83 cover.div.style.height = Math.max(document.documentElement.scrollHeight, screen.height) + 'px';
84 cover.div.style.filter = 'Alpha(opacity=50)';
85 cover.div.style.backgroundColor = 'gray';
86 document.body.appendChild(cover.div);
89 cover.messageDiv = document.createElement('DIV');
90 cover.messageDiv.style.left = ((parseInt(document.body.clientWidth) / 2) - 200) + 'px';
91 cover.messageDiv.style.top = '200px';
92 cover.messageDiv.style.width = '400px';
93 cover.messageDiv.style.padding = '5px';
94 cover.messageDiv.style.position = 'absolute';
95 cover.messageDiv.style.backgroundColor = 'yellow';
96 cover.messageDiv.style.textAlign = 'center';
97 cover.messageDiv.style.fontFamily = 'Arial';
98 cover.messageDiv.style.fontSize = '12pt';
99 cover.messageDiv.style.border = '2px black solid';
100 cover.messageDiv.style.filter = 'filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135);';
101 document.body.appendChild(cover.messageDiv);
103 cover.messageDiv.innerHTML = "<h2>Yikes!</h2>Your version of Microsoft Internet Explorer appears to be less than 8, which is required to view these graphs. You can still view the website, but it will look odd and the graphs won't work.<br /><br /><a onclick=\"cover.div.style.display = 'none'; cover.messageDiv.style.display = 'none';\" href=\"javascript:\">Close</a>"
107 window.onload = function (e)
109 if (RGraph.isIE8()) {
118 window.onresize = function (e)
121 cover.messageDiv.style.display = 'none';
122 cover.div.style.display = 'none';
130 function HideTwitterDIV ()
132 document.getElementById("twitter_div").style.opacity = 0;
133 document.getElementById("twitter_div").style.display = 'none';
137 function ShowTwitterDIV (e)
139 var e = RGraph.FixEventObject(document.all ? event : e);
140 var div = document.getElementById("twitter_div");
141 var img = document.getElementById("twitter_icon");
143 div.style.display = 'block';
144 div.style.left = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
145 div.style.top = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
150 setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
151 setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
152 setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
153 setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
154 setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
162 * This code installs the event handler that hides the Twitter DIV
164 if (RGraph.isIE8()) {
165 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
167 window.addEventListener('click', HideTwitterDIV, false);
175 <!-- "Preload" images -->
176 <div style="position: absolute; top: -100px">
177 <img src="images/delicious.png">
178 <img src="images/twitter.png">
179 <img src="images/buzz.png">
180 <img src="images/facebook.png">
181 <img src="images/friendfeed.png">
182 <img src="images/stumble.png">
189 <img src="images/logo.png" align="absmiddle" alt="RGraph: HTML5 canvas graphing library" width="64" height="64" style="position: relative; top: 15px" />
193 <h1>RGraph: HTML5 canvas graph library based on the HTML5 canvas tag</h1>
194 <i style="position: relative; top: -20px; left: 5px">Interactive javascript/HTML5 canvas graphs using the <b>HTML5 canvas</b> tag for all platforms</i>
198 <div style="display: inline; display: inline-block; float: left">
199 <a href="#download" style="text-decoration: none">
200 <img src="images/download-stable-sml.png" width="32" height="32" alt="Download the beta version" border="0" align="absmiddle" />
201 <b style="text-decoration: underline">Download the stable version</b>
204 <a href="#download" style="text-decoration: none">
205 <img src="images/download-beta-sml.png" width="32" height="32" alt="Download the beta version" border="0" align="absmiddle" />
206 <b style="text-decoration: underline">Download the beta version</b>
211 <!-- The twitter DIV -->
212 <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;">
213 <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 about RGraph</a><br>
214 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
217 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
220 if (navigator.userAgent.indexOf('Opera') == -1) {
221 document.getElementById("social_icons").style.position = 'fixed';
222 document.getElementById("twitter_div").style.position = 'fixed';
227 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
229 <!-- Social networking buttons -->
232 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=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">
233 <img src="images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
236 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
237 <img src="images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
242 <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">
243 <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"/>
246 <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">
247 <img src="images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
250 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
251 <img src="images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
254 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
255 <img src="images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
260 <!-- Social networking buttons -->
270 <div style="margin-top: 25px">
271 <center><b>Note:</b> Starting from preview 3, <b>Internet Explorer 9</b> has <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank" rel="nofollow">canvas support</a>.</center>
282 <div style="width: 475px; float: right">
285 <div style="float: right; width: 480px; text-align: center">
286 <canvas id="myLine" width="480" height="230">[Please wait for the onload event to fire...]</canvas>
289 * Create the line graph
291 function CreateLineChart ()
293 var data1 = [14,13,16,18,14,12,11,14,19,18,17,18];
294 var data2 = [11,12,14,12,11,13,13,15,14,15,13,14];
296 var myLine = new RGraph.Line('myLine', data1, data2);
297 myLine.Set('chart.colors', ['red', 'black']);
298 myLine.Set('chart.units.post', '%');
299 myLine.Set('chart.tickmarks', null);
300 myLine.Set('chart.shadow', true);
301 myLine.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0);
302 myLine.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0);
303 myLine.Set('chart.shadow.blur', 15);
304 myLine.Set('chart.shadow.color', ['#f66', '#666']);
305 myLine.Set('chart.linewidth', 5);
306 myLine.Set('chart.hmargin', 10);
307 myLine.Set('chart.background.grid.width', 1);
308 myLine.Set('chart.background.grid.color', '#ddd');
309 myLine.Set('chart.background.grid.hsize', 25);
310 myLine.Set('chart.background.grid.vsize', 25);
311 myLine.Set('chart.background.barcolor1', 'white');
312 myLine.Set('chart.background.barcolor2', 'white');
313 myLine.Set('chart.title', 'An example line chart with zoom');
314 myLine.Set('chart.title.xaxis', 'Previous year');
315 myLine.Set('chart.title.yaxis.pos', 0.5);
316 myLine.Set('chart.title.xaxis.pos', 0.5);
317 myLine.Set('chart.title.yaxis', 'Percentage');
318 myLine.Set('chart.title.color', '#333');
319 myLine.Set('chart.text.color', '#333');
320 myLine.Set('chart.noaxes', true);
321 myLine.Set('chart.gutter', 40);
322 myLine.Set('chart.yaxispos', 'right');
323 myLine.Set('chart.ymin', 10);
325 myLine.Set('chart.key', ['Robert', 'Daniel']);
326 myLine.Set('chart.key.shadow', true);
327 myLine.Set('chart.key.shadow.blur', navigator.userAgent.indexOf('Chrome') > 0 ? 15 : 5);
328 myLine.Set('chart.key.shadow.offsetx', 0);
329 myLine.Set('chart.key.shadow.offsety', 0);
330 myLine.Set('chart.key.shadow.color', navigator.userAgent.indexOf('Chrome') > 0 ? '#ccc' : 'black');
331 myLine.Set('chart.key.rounded', true);
333 if (!RGraph.isIE8()) {
334 myLine.Set('chart.zoom.frames', 15);
335 myLine.Set('chart.zoom.delay', 20);
336 myLine.Set('chart.zoom.hdir', 'left');
337 myLine.Set('chart.zoom.vdir', 'center');
338 myLine.Set('chart.zoom.mode', 'area');
339 myLine.Set('chart.zoom.factor', 2);
342 myLine.Set('chart.contextmenu', [['Show modal dialog', function() {ModalDialog.Show('myDialog', 300);}],['Cancel', function () {}]]);
343 // Change the shadow color
344 myLine.Set('chart.shadow.color', '#666');
348 myLine.Set('chart.chromefix', location.href.indexOf('chromefix=0') > 0 ? false : true);
355 <div class="description">
356 An example of the line chart. This chart has zoom functionality enabled in area mode. Simply draw a rectangle around
357 the area you wish to zoom in on. Once the zoom appears you can move it around with the left mouse button, move the
358 canvas around within the zoom using the right mouse button and double click the zoom to expand it full size.<br />
359 <a href="examples/line.html">More Line charts...</a>
366 <canvas id="myBar" width="480" height="230">[Please wait for the onload event to fire...]</canvas>
368 function CreateBarChart ()
370 var bar = new RGraph.Bar('myBar', [[23,25], [30,25], [27,28], [26,18], [31,20], [39,28], [27,29], [26,23]]);
373 * Create the gradients
375 var grad1 = bar.context.createLinearGradient(0,25,0,205);
376 grad1.addColorStop(0, 'blue');
377 grad1.addColorStop(1, '#6F72FF');
379 var grad2 = bar.context.createLinearGradient(0,25,0,205);
380 grad2.addColorStop(0, 'pink');
381 grad2.addColorStop(1, '#FFDDFF');
383 if (!RGraph.isIE8()) {
384 bar.Set('chart.tooltips', ['<b>2000</b><br />Girls only had an average<br />year in 2000',
385 '<b>2000</b><br />Boys had a slightly better<br />year in 2000',
386 '<b>2001</b><br />Girls had a good year',
387 '<b>2001</b><br />Boys had an average year',
388 '<b>2002</b><br />Both girls and boys had an average year',
389 '<b>2002</b><br />Both girls and boys had an average year',
390 '<b>2003</b><br />Girls had an average year in 2003',
391 '<b>2003</b><br />Boys had a rather poor showing in 2003',
392 '<b>2004</b><br />Girls had a good showing in 2004',
393 '<b>2004</b><br />Slightly better than than last year,<br />but still not good',
394 '<b>2005</b><br />Girls had a particularly good year',
395 '<b>2005</b><br />Boys got back up to par this year',
396 '<b>2006</b><br />Girls were back to average',
397 '<b>2006</b><br />Boys remained at an average level',
398 '<b>2007</b><br />Girls were more or less the same as last month',
399 '<b>2007</b><br />Boys were starting to drop again'
401 bar.Set('chart.tooltips.effect', 'contract');
402 //bar.Set('chart.tooltips.event', 'onmousemove');
403 bar.Set('chart.zoom.vdir', 'center');
404 bar.Set('chart.zoom.hdir', 'left');
405 bar.Set('chart.zoom.frames', 50);
406 bar.Set('chart.zoom.delay', 5);
407 bar.Set('chart.zoom.factor', 2);
408 bar.Set('chart.contextmenu', [
409 ['Zoom', RGraph.Zoom],
410 ['Get PNG', RGraph.showPNG],
413 ['Login...', function () {ModalDialog.Show('modaldialog_login', 300);}]
417 ['Cancel', function () {}]
421 bar.Set('chart.title', 'Population by gender (tooltips, context, zoom)');
422 bar.Set('chart.gutter', 35);
423 bar.Set('chart.background.barcolor1', 'white');
424 bar.Set('chart.background.barcolor2', 'white');
425 bar.Set('chart.background.grid.autofit', true);
426 bar.Set('chart.colors', [grad2, grad1]);
427 bar.Set('chart.labels', ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007']);
428 bar.Set('chart.text.angle', 30);
429 bar.Set('chart.units.post', 'm');
431 bar.Set('chart.shadow', true);
432 bar.Set('chart.shadow.color', '#ccc');
433 bar.Set('chart.shadow.blur', 15);
434 bar.Set('chart.shadow.offsetx', 0);
435 bar.Set('chart.shadow.offsety', 0);
437 bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
438 bar.Set('chart.labels.above', true);
439 bar.Set('chart.xlabels.offset', 3);
441 RGraph.Clear(bar.canvas, 'white');
443 if (RGraph.isIE8()) {
444 bar.Set('chart.shadow.offsetx', 3);
445 bar.Set('chart.shadow.offsety', 3);
453 <div class="description">
454 The bar chart has tooltips, along with a context menu. The context menu has options to zoom the canvas (in full
455 canvas mode) and shows an example of the ModalDialog which is part of RGraph. The context menu shows one
456 level of submenus. It also shows how you can add an option to get a PNG version of the graph.<br />
457 <a href="examples/bar.html">More Bar charts...</a>
463 <canvas id="rose" width="450" height="300">[Please wait for the onload event to fire...]</canvas>
466 * Show the funnel chart
468 function CreateRoseChart ()
470 var rose = new RGraph.Rose('rose', [41,37,16,3,3,45,26,25,24,12,34,60]);
471 rose.Set('chart.colors', ['rgba(0,255,0,0.5)']);
472 rose.Set('chart.gutter', 25);
473 rose.Set('chart.labels', ['30','60','90','120','150','180','210','240','270','300','330','360']);
474 rose.Set('chart.labels.axes', 'n'); // North axis only
475 rose.Set('chart.labels.position', 'edge');
477 if (!RGraph.isIE8()) {
478 rose.Set('chart.zoom.vdir', 'center');
479 rose.Set('chart.zoom.hdir', 'left');
480 rose.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom], ['Get PNG', RGraph.showPNG]]);
481 rose.Set('chart.adjustable', true);
482 rose.Set('chart.tooltips', ['Lucy','Kelly','Bart','Abu','Anne','Hoolio','Richard','Pete','Lou','Kev','Fred','Jan']);
490 <div class="description">
491 The Rose chart is a less well known chart but can be very effective in showing information in some circumstances. This
492 example shows tooltips and adjusting.<br />
493 <a href="examples/rose.html">More Rose charts...</a>
501 if (!RGraph.isIE8()) {
508 <div style="float: left; width: 480px">
510 <h2>Introduction to RGraph</h2>
513 RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag)
514 to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart,
515 funnel chart, gantt chart, horizontal bar chart, LED display, line graph, meter, odometer, pie chart, progress bar, rose chart,
516 scatter graph and traditional radar chart. RGraph is covered by the <b><a href="#license">RGraph License</a></b>.
519 <img src="images/chrome_logo.png" align="left" alt="Ideal for Chrome extensions!" width="61" height="58" style="margin-right: 10px" />
522 Being Javascript, RGraph is ideal for use in <b>Chrome extensions</b> and <b>Web Apps</b>. You can download a sample
523 extension <a href="http://www.rgraph.net/RGraph_ChromeExtension_sample.zip"><b>here</b></a>.
526 <p style="float: right">
527 <a href="docs/index.html"><b>Full documentation »</b></a>
535 <li><a href="#intro" title="A short description of RGraph">Introduction to RGraph</a></li>
536 <li><a href="docs/index.html#benefits" title="Benefits of using RGraph over more traditional server based graph/chart libraries">Benefits of HTML5 canvas graphs</a></li>
538 <a href="examples/index.html" title="Look at the examples">Examples</a> & <a href="docs/index.html" title="Look at the documentation">documentation</a><br />
540 <div style="padding-left: 20px">
541 <div class="list-item label">Bar chart</div>
542 <div class="list-item">
543 [<a href="examples/bar.html">examples</a>]
544 [<a href="docs/bar.html">documentation</a>]
549 <div class="list-item label">Bi-polar chart</div>
550 <div class="list-item link">
551 [<a href="examples/bipolar.html">examples</a>]
552 [<a href="docs/bipolar.html">documentation</a>]
557 <div class="list-item label">Donut chart</div>
558 <div class="list-item">
559 [<a href="examples/donut.html">examples</a>]
560 [<a href="docs/donut.html">documentation</a>]
565 <div class="list-item label">Funnel chart</div>
566 <div class="list-item">
567 [<a href="examples/funnel.html">examples</a>]
568 [<a href="docs/funnel.html">documentation</a>]
573 <div class="list-item label">Gantt chart</div>
574 <div class="list-item link">
575 [<a href="examples/gantt.html">examples</a>]
576 [<a href="docs/gantt.html">documentation</a>]
581 <div class="list-item label">Horizontal Bar chart</div>
582 <div class="list-item link">
583 [<a href="examples/hbar.html">examples</a>]
584 [<a href="docs/hbar.html">documentation</a>]
589 <div class="list-item label">Horizontal Progress bar</div>
590 <div class="list-item link">
591 [<a href="examples/hprogress.html">examples</a>]
592 [<a href="docs/hprogress.html">documentation</a>]
597 <div class="list-item label">LED grid</div>
598 <div class="list-item link">
599 [<a href="examples/led.html">examples</a>]
600 [<a href="docs/led.html">documentation</a>]
605 <div class="list-item label">Line chart</div>
606 <div class="list-item link">
607 [<a href="examples/line.html">examples</a>]
608 [<a href="docs/line.html">documentation</a>]
613 <div class="list-item label">Meter</div>
614 <div class="list-item link">
615 [<a href="examples/meter.html">examples</a>]
616 [<a href="docs/meter.html">documentation</a>]
621 <div class="list-item label">Odometer</div>
622 <div class="list-item link">
623 [<a href="examples/odo.html">examples</a>]
624 [<a href="docs/odo.html">documentation</a>]
629 <div class="list-item label">Pie chart</div>
630 <div class="list-item link">
631 [<a href="examples/pie.html">examples</a>]
632 [<a href="docs/pie.html">documentation</a>]
637 <div class="list-item label">Rose chart</div>
638 <div class="list-item link">
639 [<a href="examples/rose.html">examples</a>]
640 [<a href="docs/rose.html">documentation</a>]
645 <div class="list-item label">Radial scatter chart</div>
646 <div class="list-item link">
647 [<a href="examples/rscatter.html">examples</a>]
648 [<a href="docs/rscatter.html">documentation</a>]
653 <div class="list-item label">Scatter chart</div>
654 <div class="list-item link">
655 [<a href="examples/scatter.html">examples</a>]
656 [<a href="docs/scatter.html">documentation</a>]
661 <div class="list-item label">Traditional radar chart</div>
662 <div class="list-item link">
663 [<a href="examples/tradar.html">examples</a>]
664 [<a href="docs/tradar.html">documentation</a>]
669 <div class="list-item label">Vertical Progress bar</div>
670 <div class="list-item link">
671 [<a href="examples/vprogress.html">examples</a>]
672 [<a href="docs/vprogress.html">documentation</a>]
679 <h3 style="margin-left: 20px">Features</h3>
682 <li><a href="docs/setconfig.html">The RGraph.SetConfig() function</a></li>
683 <li><a href="docs/keys.html">Examples of keys</a></li>
684 <li><a href="docs/dynamic.html">Updating your graphs dynamically</a></li>
685 <li><a href="docs/png.html">Retrieving a PNG of your graph</a></li>
686 <li><a href="docs/domcontentloaded.html">The DOMContentLoaded event</a></li>
687 <li><a href="docs/events.html">Custom RGraph events</a></li>
688 <li><a href="docs/adjusting.html">Adjusting your graphs interactively</a></li>
689 <li><a href="docs/tooltips.html">Using tooltips</a></li>
690 <li><a href="docs/resizing.html">Resizing your graphs</a></li>
691 <li><a href="docs/msie.html">Microsoft Internet Explorer support</a></li>
692 <li><a href="docs/async.html">Asynchronous processing</a></li>
693 <li><a href="docs/zoom.html">Zooming your graphs</a></li>
694 <li><a href="docs/annotating.html">Annotating your graphs</a></li>
695 <li><a href="docs/combine.html">Combining charts</a></li>
696 <li><a href="docs/external.html">Integrating RGraph with external libraries (ModalDialog)</a></li>
697 <li><a href="docs/animation.html">Animating your graphs</a></li>
698 <li><a href="examples/basic.html">A basic example</a></li>
699 <li><a href="docs/css.html">Available CSS classes</a></li>
700 <li><a href="docs/color.html">About canvas color definitions</a></li>
701 <li><a href="docs/context.html">About context menus</a></li>
704 <h3 style="margin-left: 20px">Implementation information</h3>
707 <li><a href="docs/index.html#browser" title="Information about browser support">Browser support</a></li>
708 <li><a href="docs/index.html#performance" title="Things you may want to look at concerning performance">Improving the performance of your graphs</a></li>
709 <li><a href="docs/index.html#implementation" title="Implementing RGraph on your website">Implementing RGraph</a></li>
710 <li><a href="docs/index.html#structure" title="Suggested structure for RGraph">Suggested structure for RGraph</a></li>
712 <a href="docs/index.html#integration" title="Information on integrating RGraph with server side scripting">Integration with server side scripting</a>
714 <li><a href="docs/index.html#mysql" title="Integration with PHP & MySQL">Integration with PHP & MySQL</li>
715 <li><a href="docs/index.html#ajax" title="Making AJAX requests">Making AJAX requests</a></li>
719 <li><a href="docs/issues.html" title="If you're having trouble, have a look through these">Common issues</a></li>
722 <h3 style="margin-left: 20px">Other</h3>
725 <li><a href="docs/misc.html">Miscellaneous documentation</a></li>
726 <li><a href="docs/api.html">API documentation</a></li>
727 <li><a href="docs/index.html#support" title="Need support? Get it here">Support forum</a></li>
728 <li><a href="#download" title="Download RGraph">Download</a></li>
729 <li><a href="#license" title="">License</a> (<a href="docs/licensing.html">Licensing FAQs</a>)</li>
736 <a name="download"></a>
737 <br /> <br /> <br />
740 <?php if($_SERVER['SERVER_NAME'] == 'www.rgraph.net' OR $_SERVER['SERVER_NAME'] == 'www.rgraph.org'): ?>
741 <div id="downloadlinks">
743 The latest download is below. It's a .zip file which you'll be able to download to your computer and open with Winzip
744 (or equivalent). This is not a time limited demo or a branded trial - it's the full version.
747 <?php ShowDownloadLinks() ?>
749 <p style="background-color: #ff0; border: 2px dashed black; padding: 5px; box-shadow: 0 0 15px #ccc; -moz-box-shadow: 0 0 15px #ccc; -webkit-box-shadow: 0 0 15px #ccc">
750 The website is based on the latest version of RGraph. If you're only interested in the stable version of RGraph, you should
751 download the stable archive and use that. All of the documentation is included in the archive.
757 <span style="color: red">
758 [Only available on <a href="http://www.rgraph.net#download">http://www.rgraph.net</a>]
764 * Hide the download links if not online
766 if (location.host != 'www.rgraph.net' && location.host != 'www.rgraph.org') {
767 var downloadlinks = document.getElementById("downloadlinks");
770 document.getElementById("downloadlinks").style.display = 'none';
776 <a name="license"></a>
779 <div style="float: right; padding-left: 15px; padding-right: 40px">
781 <div style="float: right">
782 <form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/456239608328156" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm">
783 <input name="item_name_1" type="hidden" value="RGraph and PHPGuru License" />
784 <input name="item_description_1" type="hidden" value="License for RGraph: HTML5 canvas graph library and www.phpguru.org" />
785 <input name="item_quantity_1" type="hidden" value="1" />
786 <input name="item_price_1" type="hidden" value="49.0" />
787 <input name="item_currency_1" type="hidden" value="GBP" />
788 <input name="_charset_" type="hidden" value="utf-8" />
789 <input alt="" width="116" height="61" src="images/buy.png" type="image" />
795 RGraph is covered by the RGraph license. A summary is that for commercial/business use
796 there is a small one-time licensing fee to pay. For non-commercial purposes it's freely usable.
799 <a href="docs/licensing.html"><b>licensing FAQs</b></a> that should help to answer any
800 questions you might have. If you need one, you can <a href="http://www.rgraph.net/invoice.html">get an invoice here</a>.
804 If you have any questions about RGraph licensing, you can send your question to: <a href="mailto:licensing@rgraph.net">licensing@rgraph.net</a>.
805 If your question is of a support nature though, please use the <a href="http://groups.google.com/group/rgraph/topics?gvc=2" target="_blank">support forum</a>.
808 <iframe width="100%" height="300" src="LICENSE.txt"></iframe>
812 <div id="rgraph"></div>
815 if (location.host.match(/^dev\.rgraph/)) {
816 document.getElementById("rgraph").innerHTML = '<div id="devtag">DEVELOPMENT<br /><a href="http://www.rgraph.net">Go to the live version »</a></div>';
821 if (location.host == 'www.rgraph.net') {
822 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
823 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
829 if (location.host == 'www.rgraph.net') {
831 var pageTracker = _gat._getTracker("UA-54706-2");
832 pageTracker._trackPageview();
838 <div id="myDialog" class="ModalDialog_dialog" style="display: none">
839 <div style="font-weight: bold; font-face: Verdana; text-align: center">A modal dialog</div>
841 This is an example of the ModalDialog that comes as part of RGraph. More information on it
842 can be found <a href="docs/external.html">here</a>.
844 <small><a href="javascript: ModalDialog.Close()">Close</a></small>
847 <!-- Login dialog -->
848 <div style="display: none" class="ModalDialog" id="modaldialog_login">
850 <b>Login to admin area</b><br /><br />
854 <td align="right">Email:</td>
855 <td><input type="text" name="email" /></td>
858 <td align="right">Password:</td>
859 <td><input type="password" name="password" /></td>
864 <td align="right"><input type="submit" value="Login »" /></td>
868 <div style="font-size: 8pt; float: right"><a href="" onclick="ModalDialog.Hide(); return false">Dismiss</a></div>