Merge
[dygraphs.git] / tests / labelsDateUTC.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>UTC date labels</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14 </head>
15 <body>
16
17 <h2>UTC date and time labels</h2>
18
19 <p>This shows how date ticks and labels may be generated according to local
20 time (default) or UTC with the option <code>labelsUTC</code>.</p>
21
22 <p>72 hours of random hourly data since 2009-Jul-23 18:00 UTC
23 according to local time (top) and UTC (bottom):</p>
24
25 <div id="div_loc" style="width:600px; height:200px;"></div>
26 <div id="div_utc" style="width:600px; height:200px;"></div>
27
28 <p>Please note the offset between the respective ticks in both plots.
29 It should match your local time zone offset.</p>
30
31 <p>You can also check it by hovering over corresponding points and comparing
32 the value labels.</p>
33
34 <p>Try different zoom levels to show that ticks are always placed at nice
35 time boundaries.</p>
36
37 <script type="text/javascript">
38 var data = (function() {
39 var rand10 = function () { return Math.round(10 * Math.random()); };
40 var a = []
41 for (var y = 2009, m = 6, d = 23, hh = 18, n=0; n < 72; n++) {
42 a.push([new Date(Date.UTC(y, m, d, hh + n, 0, 0)), rand10()]);
43 }
44 return a;
45 })();
46 gloc = new Dygraph(
47 document.getElementById("div_loc"),
48 data,
49 {
50 labels: ['local time', 'random']
51 }
52 );
53 gutc = new Dygraph(
54 document.getElementById("div_utc"),
55 data,
56 {
57 labelsUTC: true,
58 labels: ['UTC', 'random']
59 }
60 );
61 </script>
62
63 </body>
64 </html>