RGraph/index.html

   1 <?php
   2     require('common.php');
   3     ob_start('ob_gzhandler');
   4 ?>
   5 <!DOCTYPE html>
   6 <html>
   7 <head>
   8
   9     <meta http-equiv="X-UA-Compatible" content="chrome=1">
  10
  11     <!--
  12         /**
  13         * o------------------------------------------------------------------------------o
  14         * | This file is part of the RGraph package - you can learn more at:             |
  15         * |                                                                              |
  16         * |                          http://www.rgraph.net                               |
  17         * |                                                                              |
  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:  |
  21         * |                                                                              |
  22         * |                      http://www.rgraph.net/LICENSE.txt                       |
  23         * o------------------------------------------------------------------------------o
  24         */
  25     -->
  26
  27     <title>RGraph: HTML5 canvas graph library based on the HTML5 canvas tag</title>
  28
  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>
  35
  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]-->
  40
  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">
  44
  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" />
  48
  49
  50     <style>
  51         .RGraph_zoom_window {
  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;
  59         }
  60
  61         .RGraph_zoomed_canvas {
  62             -webkit-box-shadow: 0 0 15px gray ! important;
  63         }
  64
  65         .ModalDialog_dialog {
  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;
  69         }
  70     </style>
  71
  72     <script>
  73         cover = {div: null};
  74
  75         function ShowWarning ()
  76         {
  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);
  87
  88
  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);
 102
 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>"
 104             }
 105         }
 106
 107         window.onload = function (e)
 108         {
 109             if (RGraph.isIE8()) {
 110                 CreateLineChart();
 111                 CreateBarChart();
 112                 CreateRoseChart();
 113             }
 114
 115             ShowWarning();
 116         }
 117
 118         window.onresize = function (e)
 119         {
 120             if (cover.div) {
 121                 cover.messageDiv.style.display = 'none';
 122                 cover.div.style.display = 'none';
 123                 cover.div = null;
 124             }
 125
 126             ShowWarning();
 127         }
 128
 129
 130         function HideTwitterDIV ()
 131         {
 132             document.getElementById("twitter_div").style.opacity = 0;
 133             document.getElementById("twitter_div").style.display = 'none';
 134         }
 135
 136
 137         function ShowTwitterDIV (e)
 138         {
 139             var e   = RGraph.FixEventObject(document.all ? event : e);
 140             var div = document.getElementById("twitter_div");
 141             var img = document.getElementById("twitter_icon");
 142
 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';
 146
 147             /**
 148             * Fade it in
 149             */
 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);
 155
 156             e.stopPropagation();
 157
 158             return false;
 159         }
 160
 161         /**
 162         * This code installs the event handler that hides the Twitter DIV
 163         */
 164         if (RGraph.isIE8()) {
 165              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 166         } else {
 167             window.addEventListener('click', HideTwitterDIV, false);
 168         }
 169
 170     </script>
 171
 172 </head>
 173 <body>
 174
 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">
 183     </div>
 184
 185
 186     <div id="title">
 187         <div id="image">
 188             <br />
 189             <img src="images/logo.png" align="absmiddle" alt="RGraph: HTML5 canvas graphing library" width="64" height="64" style="position: relative; top: 15px" />
 190         </div>
 191
 192         <div id="text">
 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>
 195
 196             <br />
 197
 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>
 202                 </a>
 203
 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>
 207                 </a>
 208             </div>
 209
 210
 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&nbsp;about&nbsp;RGraph</a><br>
 214                 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 215             </div>
 216
 217             <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 218                 <script>
 219                     // Opera fix
 220                     if (navigator.userAgent.indexOf('Opera') == -1) {
 221                       document.getElementById("social_icons").style.position = 'fixed';
 222                       document.getElementById("twitter_div").style.position = 'fixed';
 223
 224                     }
 225                 </script>
 226
 227                 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 228
 229                 <!-- Social networking buttons -->
 230
 231                     <div id="social">
 232                         <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">
 233                             <img src="images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 234                         </a>
 235
 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" />
 238                         </a>
 239
 240
 241 <!--
 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"/>
 244                         </a>
 245
 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"/>
 248                         </a>
 249
 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" />
 252                         </a>
 253
 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" />
 256                         </a>
 257 -->
 258                     </div>
 259
 260                 <!-- Social networking buttons -->
 261             </div>
 262
 263             &nbsp;
 264         </div>
 265     </div>
 266
 267     <br />
 268
 269     <div>
 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>
 272         </div>
 273     </div>
 274
 275
 276
 277     <!-- END HEADER -->
 278
 279
 280     <br clear="all" />
 281
 282     <div style="width: 475px; float: right">
 283
 284
 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>
 287             <script async>
 288                 /**
 289                 * Create the line graph
 290                 */
 291                 function CreateLineChart ()
 292                 {
 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];
 295
 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);
 324
 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);
 332
 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);
 340
 341                     } else {
 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');
 345                     }
 346
 347                     // Chrome shadow bug
 348                     myLine.Set('chart.chromefix', location.href.indexOf('chromefix=0') > 0 ? false : true);
 349
 350                     myLine.Draw();
 351                 }
 352             </script>
 353
 354
 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>
 360             </div>
 361
 362
 363             <br />
 364
 365
 366             <canvas id="myBar" width="480" height="230">[Please wait for the onload event to fire...]</canvas>
 367             <script async>
 368                 function CreateBarChart ()
 369                 {
 370                     var bar = new RGraph.Bar('myBar', [[23,25], [30,25], [27,28], [26,18], [31,20], [39,28], [27,29], [26,23]]);
 371
 372                     /**
 373                     * Create the gradients
 374                     */
 375                     var grad1 = bar.context.createLinearGradient(0,25,0,205);
 376                     grad1.addColorStop(0, 'blue');
 377                     grad1.addColorStop(1, '#6F72FF');
 378
 379                     var grad2 = bar.context.createLinearGradient(0,25,0,205);
 380                     grad2.addColorStop(0, 'pink');
 381                     grad2.addColorStop(1, '#FFDDFF');
 382
 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'
 400                                              ]);
 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],
 411                                                       ['Application',
 412                                                                      [
 413                                                                       ['Login...', function () {ModalDialog.Show('modaldialog_login', 300);}]
 414                                                                      ]
 415                                                      ],
 416                                                      null,
 417                                                      ['Cancel', function () {}]
 418                                                     ]);
 419                     }
 420
 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');
 430
 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);
 436
 437                     bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
 438                     bar.Set('chart.labels.above', true);
 439                     bar.Set('chart.xlabels.offset', 3);
 440
 441                     RGraph.Clear(bar.canvas, 'white');
 442
 443                     if (RGraph.isIE8()) {
 444                         bar.Set('chart.shadow.offsetx', 3);
 445                         bar.Set('chart.shadow.offsety', 3);
 446                     }
 447
 448                     bar.Draw();
 449                 }
 450             </script>
 451
 452
 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>
 458             </div>
 459
 460             <br />
 461
 462
 463             <canvas id="rose" width="450" height="300">[Please wait for the onload event to fire...]</canvas>
 464             <script async>
 465                 /**
 466                 * Show the funnel chart
 467                 */
 468                 function CreateRoseChart ()
 469                 {
 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');
 476
 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']);
 483                     }
 484
 485                     rose.Draw();
 486                 }
 487             </script>
 488
 489
 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>
 494             </div>
 495         </div>
 496     </div>
 497
 498     <a name="intro"></a>
 499
 500     <script>
 501         if (!RGraph.isIE8()) {
 502             CreateLineChart();
 503             CreateBarChart();
 504             CreateRoseChart();
 505         }
 506     </script>
 507
 508     <div style="float: left; width: 480px">
 509
 510         <h2>Introduction to RGraph</h2>
 511
 512         <p>
 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>.
 517         </p>
 518
 519         <img src="images/chrome_logo.png" align="left" alt="Ideal for Chrome extensions!" width="61" height="58" style="margin-right: 10px" />
 520
 521         <p>
 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>.
 524         </p>
 525
 526         <p style="float: right">
 527             <a href="docs/index.html"><b>Full documentation &raquo;</b></a>
 528         </p>
 529
 530         <br clear="all" />
 531
 532         <h2>Contents</h2>
 533
 534         <ul>
 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>
 537             <li>
 538                 <a href="examples/index.html" title="Look at the examples">Examples</a> &amp; <a href="docs/index.html" title="Look at the documentation">documentation</a><br />
 539
 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>]
 545                     </div>
 546
 547                     <br />
 548
 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>]
 553                     </div>
 554
 555                     <br />
 556
 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>]
 561                     </div>
 562
 563                     <br />
 564
 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>]
 569                     </div>
 570
 571                     <br />
 572
 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>]
 577                     </div>
 578
 579                     <br />
 580
 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>]
 585                     </div>
 586
 587                     <br />
 588
 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>]
 593                     </div>
 594
 595                     <br />
 596
 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>]
 601                     </div>
 602
 603                     <br />
 604
 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>]
 609                     </div>
 610
 611                     <br />
 612
 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>]
 617                     </div>
 618
 619                     <br />
 620
 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>]
 625                     </div>
 626
 627                     <br />
 628
 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>]
 633                     </div>
 634
 635                     <br />
 636
 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>]
 641                     </div>
 642
 643                     <br />
 644
 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>]
 649                     </div>
 650
 651                     <br />
 652
 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>]
 657                     </div>
 658
 659                     <br />
 660
 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>]
 665                     </div>
 666
 667                     <br />
 668
 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>]
 673                     </div>
 674
 675                     <br /><br />
 676             </li>
 677         </ul>
 678
 679         <h3 style="margin-left: 20px">Features</h3>
 680
 681         <ul>
 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>
 702         </ul>
 703
 704         <h3 style="margin-left: 20px">Implementation information</h3>
 705
 706         <ul>
 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>
 711             <li>
 712                 <a href="docs/index.html#integration" title="Information on integrating RGraph with server side scripting">Integration with server side scripting</a>
 713                 <ul>
 714                     <li><a href="docs/index.html#mysql" title="Integration with PHP &amp; MySQL">Integration with PHP &amp; MySQL</li>
 715                     <li><a href="docs/index.html#ajax" title="Making AJAX requests">Making AJAX requests</a></li>
 716                 </ul>
 717             </li>
 718
 719             <li><a href="docs/issues.html" title="If you're having trouble, have a look through these">Common issues</a></li>
 720         </ul>
 721
 722         <h3 style="margin-left: 20px">Other</h3>
 723
 724         <ul>
 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>
 730         </ul>
 731     </div>
 732
 733     <br clear="all" />
 734
 735
 736     <a name="download"></a>
 737     <br />&nbsp;<br />&nbsp;<br />
 738     <h2>Download</h2>
 739
 740     <?php if($_SERVER['SERVER_NAME'] == 'www.rgraph.net' OR $_SERVER['SERVER_NAME'] == 'www.rgraph.org'): ?>
 741         <div id="downloadlinks">
 742             <p>
 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.
 745             </p>
 746
 747             <?php ShowDownloadLinks() ?>
 748
 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.
 752             </p>
 753         </div>
 754
 755     <?php else: ?>
 756
 757         <span style="color: red">
 758             [Only available on <a href="http://www.rgraph.net#download">http://www.rgraph.net</a>]
 759         </span>
 760     <?php endif ?>
 761
 762     <script>
 763         /**
 764         * Hide the download links if not online
 765         */
 766         if (location.host != 'www.rgraph.net' && location.host != 'www.rgraph.org') {
 767             var downloadlinks = document.getElementById("downloadlinks");
 768
 769             if (downloadlinks) {
 770                 document.getElementById("downloadlinks").style.display = 'none';
 771             }
 772         }
 773     </script>
 774
 775
 776     <a name="license"></a>
 777     <h2>License</h2>
 778
 779     <div style="float: right; padding-left: 15px; padding-right: 40px">
 780
 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" />
 790             </form>
 791         </div>
 792     </div>
 793
 794     <p>
 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.
 797
 798         There are some
 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>.
 801     </p>
 802
 803     <p>
 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>.
 806     </p>
 807
 808     <iframe width="100%" height="300" src="LICENSE.txt"></iframe>
 809
 810     <p>
 811
 812     <div id="rgraph"></div>
 813
 814     <script>
 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 &raquo;</a></div>';
 817         }
 818     </script>
 819
 820     <script>
 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"));
 824         }
 825     </script>
 826
 827     <script>
 828
 829         if (location.host == 'www.rgraph.net') {
 830             try {
 831                 var pageTracker = _gat._getTracker("UA-54706-2");
 832                 pageTracker._trackPageview();
 833             } catch(err) {}
 834         }
 835     </script>
 836
 837
 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>
 840         <p>
 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>.
 843         </p>
 844         <small><a href="javascript: ModalDialog.Close()">Close</a></small>
 845     </div>
 846
 847     <!-- Login dialog -->
 848     <div style="display: none" class="ModalDialog" id="modaldialog_login">
 849
 850         <b>Login to admin area</b><br /><br />
 851
 852         <table border="0">
 853             <tr>
 854                 <td align="right">Email:</td>
 855                 <td><input type="text" name="email" /></td>
 856             </tr>
 857             <tr>
 858                 <td align="right">Password:</td>
 859                 <td><input type="password" name="password" /></td>
 860             </tr>
 861
 862             <tr>
 863                 <td>&nbsp;</td>
 864                 <td align="right"><input type="submit" value="Login &raquo;" /></td>
 865             </tr>
 866         </table>
 867
 868         <div style="font-size: 8pt; float: right"><a href="" onclick="ModalDialog.Hide(); return false">Dismiss</a></div>
 869     </div>
 870
 871 </body>
 872 </html>