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