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