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>