| 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: Javascript charts and graph library - a basic example</title> |
|---|
| 23 | |
|---|
| 24 | <meta name="keywords" content="rgraph javascript charts html5 canvas basic example" /> |
|---|
| 25 | <meta name="description" content="RGraph: Javascript charts and graph library - 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.original.js"></script><![endif]--> |
|---|
| 31 | |
|---|
| 32 | </head> |
|---|
| 33 | |
|---|
| 34 | <body> |
|---|
| 35 | |
|---|
| 36 | <h1>RGraph: Javascript charts and 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.left', 35); |
|---|
| 50 | bar.Set('chart.colors', ['red']); |
|---|
| 51 | bar.Set('chart.title', 'A basic graph'); |
|---|
| 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 chart. 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> |
|---|
