tests/daylight-savings.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>Daylight Savings</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
  15   </head>
  16   <body>
  17     <h2>DST</h2>
  18     <p>This tests that tick marks don't break when the axis crosses into
  19     daylight savings time.</p>
  20
  21     <div id="demodiv"></div>
  22
  23     <p>The tick marks should all be on day boundaries or nice hours (6, 12, 18),
  24     rather than on odd time boundaries like 5, 11, 17 and 23.</p>
  25
  26     <hr/>
  27     <div id="chart2"></div>
  28     <p>This chart shows a continuous line going across the "fall back" EST/EDT event. You may need to switch your computer's time zone to Eastern to see this. The x-axis tick marks go from 01:00 &rarr; 01:55 and then back to 01:00.</p>
  29
  30     <script type="text/javascript">
  31       g = new Dygraph(
  32               document.getElementById("demodiv"),
  33 "Date/Time,Purchases\n" +
  34 "2010-11-05 00:00:00,167082\n" +
  35 "2010-11-06 00:00:00,168571\n" +
  36 "2010-11-07 00:00:00,177796\n" +
  37 "2010-11-08 00:00:00,165587\n" +
  38 "2010-11-09 00:00:00,164380\n",
  39           {
  40             width: 1024
  41           }
  42           );
  43
  44       // Generate data which crosses the EST/EDT boundary.
  45       var dst_data = [];
  46       var base_ms = 1383454200000;
  47       for (var x = base_ms; x < base_ms + 1000 * 60 * 80; x += 1000) {
  48         dst_data.push([new Date(x), x]);
  49       }
  50
  51       g = new Dygraph(
  52               document.getElementById("chart2"),
  53               dst_data,
  54           { width: 1024, labels: ['Date', 'Value'] }
  55           );
  56     </script>
  57 </body>
  58 </html>