actually draw the graph
[dygraphs.git] / tests / hourly.html
1 <html>
2 <head>
3 <title>hourly</title>
4 <!--[if IE]>
5 <script type="text/javascript" src="excanvas.js"></script>
6 <![endif]-->
7 <script type="text/javascript" src="../dygraph-combined.js"></script>
8 <script type="text/javascript" src="../dygraph-canvas.js"></script>
9 <script type="text/javascript" src="../dygraph.js"></script>
10 </head>
11 <body>
12 <p>Hourly data:</p>
13 <div id="div_g" style="width:600px; height:300px;"></div>
14
15 <p>Minutely data:</p>
16 <div id="div_gm" style="width:600px; height:300px;"></div>
17
18 <p>Secondly data:</p>
19 <div id="div_gs" style="width:600px; height:300px;"></div>
20
21 <script type="text/javascript">
22 g = new Dygraph(
23 document.getElementById("div_g"),
24 function HourlyData() {
25 return "" +
26 "Date,A,B\n" +
27 "2009/07/12 00:00:00,3,4\n" +
28 "2009/07/12 01:00:00,5,6\n" +
29 "2009/07/12 02:00:00,7,6\n" +
30 "2009/07/12 03:00:00,6,5\n" +
31 "2009/07/12 04:00:00,4,7\n" +
32 "2009/07/12 05:00:00,3,6\n" +
33 "2009/07/12 06:00:00,4,6"
34 }
35 );
36
37 gm = new Dygraph(
38 document.getElementById("div_gm"),
39 function() {
40 var ret = "Date,Hours,Minutes\n";
41 var zp = function(x) { if (x<10) return "0"+x; else return ""+x;};
42 for (var d = 0; d <= 1; d++) {
43 for (var h = 0; h < 24; h++) {
44 for (var m = 0; m < 60; m++) {
45 ret += "2008/07/" + zp(12 + d) + " " + zp(h) + ":" + zp(m) +
46 "," + (24*d + h) + "," + m + "\n";
47 }
48 }
49 }
50 return ret;
51 }
52 );
53
54 gs = new Dygraph(
55 document.getElementById("div_gs"),
56 function() {
57 var ret = "Date,Minutes,Seconds\n";
58 var zp = function(x) { if (x<10) return "0"+x; else return ""+x;};
59 for (var h = 0; h <= 1; h++) {
60 for (var m = 0; m < 60; m++) {
61 for (var s = 0; s < 60; s++) {
62 ret += "2008/07/01 " + zp(h) + ":" + zp(m) + ":" + zp(s) +
63 "," + (h*60 + m) + "," + s + "\n";
64 }
65 }
66 }
67 return ret;
68 }
69 );
70 </script>
71 </body>
72 </html>