RGraph/examples/basic.html

   1 <?php ob_start('ob_gzhandler') ?>
   2 <!DOCTYPE html>
   3 <html>
   4 <head>
   5     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6     <!--
   7         /**
   8         * o------------------------------------------------------------------------------o
   9         * | This file is part of the RGraph package - you can learn more at:             |
  10         * |                                                                              |
  11         * |                          http://www.rgraph.net                               |
  12         * |                                                                              |
  13         * | This package is licensed under the RGraph license. For all kinds of business |
  14         * | purposes there is a small one-time licensing fee to pay and for non          |
  15         * | commercial  purposes it is free to use. You can read the full license here:  |
  16         * |                                                                              |
  17         * |                      http://www.rgraph.net/LICENSE.txt                       |
  18         * o------------------------------------------------------------------------------o
  19         */
  20     -->
  21
  22     <title>RGraph: HTML5 canvas graph library - a basic example</title>
  23
  24     <meta name="keywords" content="rgraph html5 canvas basic example" />
  25     <meta name="description" content="RGraph: A basic example" />
  26
  27     <!-- 1/3. Include the RGraph libraries -->
  28     <script src="../libraries/RGraph.common.core.js" ></script>
  29     <script src="../libraries/RGraph.bar.js" ></script>
  30     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  31
  32 </head>
  33
  34 <body>
  35
  36     <h1>RGraph: HTML5 canvas graph library - A basic example</h1>
  37
  38     <!-- 2/3. This is the canvas that the graph is drawn on -->
  39     <canvas id="myBar" width="1000" height="250">[No canvas support]</canvas>
  40
  41     <!--
  42         3/3. This creates and displays the graph. As it is here, you can call this from the window.onload event,
  43              allowing you to put it in your pages header.
  44     -->
  45     <script>
  46         window.onload = function ()
  47         {
  48             var bar = new RGraph.Bar('myBar', [12,13,16,15,16,19,19,12,23,16,13,24]);
  49             bar.Set('chart.gutter', 35);
  50             bar.Set('chart.colors', ['red']);
  51             bar.Set('chart.title', 'A basic graph (big, but basic)');
  52             bar.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
  53             bar.Draw();
  54         }
  55     </script>
  56
  57     <p>
  58         This is a very basic example that does little more than display a graph. If you're trying to understand how RGraph
  59         works, this should help as there is very little happening on this page. To see the source code of this
  60         page simply view the source (Right click > View Source).
  61     </p>
  62
  63 </body>
  64 </html>