/
animation.html
121 lines (109 loc) · 5.56 KB
/
animation.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<?php ob_start('ob_gzhandler') ?>
<!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 personal, |
* | charity and educational purposes it is free to use. You can read the full |
* | license here: |
* | http://www.rgraph.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>RGraph: HTML5 canvas graph library - Animating your graphs</title>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../favicon.png">
<script src="../libraries/RGraph.common.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>
<script>
/**
* The total number of frames, delay and current frame number
*/
delay = 50;
curframe = 1;
numframe = 20;
window.onload = function ()
{
/**
* Clear all of the canvases
*/
RGraph.Clear(document.getElementById("myLine"));
/**
* Draw the line graph
*/
var multiplier = curframe / numframe;
var line = new RGraph.Line('myLine', [45 * multiplier, 12 * multiplier,
16 * multiplier, 18 * multiplier,
44 * multiplier, 54 * multiplier,
23 * multiplier, 21 * multiplier,
56 * multiplier, 58 * multiplier,
33 * multiplier, 47 * multiplier] );
line.Set('chart.tickmarks', 'endcircle');
line.Set('chart.linewidth', 2);
line.Set('chart.shadow', true);
line.Set('chart.shadow.offsetx', 2);
line.Set('chart.shadow.offsety', 2);
line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
line.Set('chart.ymax', 60); // This stops the scale from changing frame to frame
line.Set('chart.hmargin', 10);
line.Set('chart.title', 'An animated line graph');
line.Set('chart.colors', ['rgba(255,0,0,' + (1 * multiplier) + ')']);
line.Draw();
/**
* If the animation frame is less than number of the total number of frames, redraw all of the canvases
*/
if (curframe < numframe) {
curframe++;
setTimeout(window.onload, delay);
}
}
</script>
</head>
<body>
<div id="logo">
<a href="../">RGraph: HTML5 canvas graph library</a>
>
<a href="index.html">Documentation</a>
>
Animating your graphs
</div>
<h1>RGraph: Animating your graphs</h1>
<script>
<!--
if (document.all) {
document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag yet, so if you want to see the graphs, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use another browser entirely. Your choices are Firefox, Chrome or Safari</li></ul></div>');
}
// -->
</script>
<div style="float: right">
<canvas id="myLine" width="400" height="200">[No canvas support]</canvas>
</div>
<p>
Animating your graphs is a relatively easy affair, whilst not being supported natively as it would only serve to
over-complicate the RGraph libraries. The way to do it is to use
the function <i>RGraph.Clear(canvas)</i>, passing it your canvas object that is returned by
<i>document.getElementById()</i>. By default this will cover the canvas in white. You can change this by
passing it the color you want it to use as the second (optional) argument. You could even use a gradient if
you wanted. Then you can simply redraw the entire graph.
</p>
<p>
One thing you should note, is that you may have to specify the scale manually, to prevent it from changing
from frame to frame. This can be done by using the <i>chart.ymax</i> property.
</p>
<p>
You can review the source of this page if you need further help. Two global variables are set - the number of frames
and the current frame number (which starts at one). The graphs are then drawn with appropriate data
(ie the data multiplied by the frame number over the total number of frames). If the frame number is less than
the total number of frames, the frame number is incremented and the function (window.onload) is called again
after a small delay.
</p>
</body>
</html>