Added UTC date label tests and adapted existing ones.
authorJoan Pau Beltran <joanpau.beltran@socib.cat>
Mon, 10 Feb 2014 11:11:24 +0000 (12:11 +0100)
committerJoan Pau Beltran <joanpau.beltran@socib.cat>
Thu, 5 Jun 2014 16:02:49 +0000 (18:02 +0200)
    * tests/labelsDateUTC.html:
      New test/demo for the option  `labelsDateUTC`.
      Display several days of data according to UTC and to local time,
      and compare the tick placement and the label format.

    * tests/x-axis-formatter.html:
      Added `opts` argument to `axisLabelFormatter` function
      (used by inner `Dygraphs.dateAxisLabelFormatter` call).

tests/labelsDateUTC.html [new file with mode: 0644]
tests/x-axis-formatter.html

diff --git a/tests/labelsDateUTC.html b/tests/labelsDateUTC.html
new file mode 100644 (file)
index 0000000..a4abfc3
--- /dev/null
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <title>UTC date labels</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="../excanvas.js"></script>
+    <![endif]-->
+    <!--
+    For production (minified) code, use:
+    <script type="text/javascript" src="dygraph-combined.js"></script>
+    -->
+    <script type="text/javascript" src="../dygraph-dev.js"></script>
+  </head>
+  <body>
+
+    <h2>UTC date and time labels</h2>
+
+    <p>This shows how date ticks and labels may be generated according to local 
+    time (default) or UTC with the option <code>labelsDateUTC</code>.</p>
+    
+    <p>72 hours of random hourly data since 2009-Jul-23 18:00 UTC 
+    according to local time (top) and UTC (bottom):</p>
+    
+    <div id="div_loc" style="width:600px; height:200px;"></div>
+    <div id="div_utc" style="width:600px; height:200px;"></div>
+    
+    <p>Please note the offset between the respective ticks in both plots.
+    It should match your local time zone offset.</p>
+    
+    <p>You can also check it by hovering over corresponding points and comparing
+    the value labels.</p>
+    
+    <p>Try different zoom levels to show that ticks are always placed at nice
+    time boundaries.</p>
+
+    <script type="text/javascript">
+      var data = (function() {
+        var rand10 = function () { return Math.round(10 * Math.random()); };
+        var a = []
+        for (var y = 2009, m = 6, d = 23, hh = 18, n=0; n < 72; n++) {
+          a.push([new Date(Date.UTC(y, m, d, hh + n, 0, 0)), rand10()]);
+        }
+        return a;
+      })();
+      gloc = new Dygraph(
+                   document.getElementById("div_loc"),
+                   data,
+                   {
+                     labels: ['local time', 'random']
+                   }
+                 );
+      gutc = new Dygraph(
+                   document.getElementById("div_utc"),
+                   data,
+                   {
+                     labelsDateUTC: true,
+                     labels: ['UTC', 'random']
+                   }
+                 );
+    </script>
+
+  </body>
+</html>
index d216c97..9983391 100644 (file)
@@ -47,8 +47,8 @@
             { 
               axes: {
                 x: {
-                  axisLabelFormatter: function(d, gran) {
-                      return Dygraph.dateAxisFormatter(new Date(d.getTime() + 7200*1000), gran);
+                  axisLabelFormatter: function(d, gran, opts) {
+                      return Dygraph.dateAxisLabelFormatter(new Date(d.getTime() + 7200*1000), gran, opts);
                   }
                 }
               }