tests/labelsDateMilliseconds.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Milliseconds 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="../dist/dygraph.js"></script>
  10   </head>
  11   <body>
  12
  13     <h2>Milliseconds display in date and time labels</h2>
  14
  15     <p>This shows how milliseconds are displayed when present.</p>
  16
  17     <div id="div_ms" style="width:600px; height:200px;"></div>
  18     <div id="div_std" style="width:600px; height:200px;"></div>
  19
  20     <p>You can check it by hovering over corresponding points and comparing
  21     the value labels.</p>
  22
  23     <script type="text/javascript">
  24       var values = (function () {
  25         var rand10 = function () { return Math.round(10 * Math.random()); };
  26         var a = [];
  27         for (var n=0; n < 72; n++) {
  28           a.push(rand10());
  29         }
  30         return a;
  31       })();
  32       function data(y,m,d,hh,mm,ss,ms) {
  33         var a = [];
  34         for (var n=0; n < 72; n++) {
  35           a.push([new Date(Date.UTC(y, m, d, hh + n, mm, ss, ms)), values[n]]);
  36         }
  37         return a;
  38       }
  39       gms = new Dygraph(
  40                    document.getElementById("div_ms"),
  41                    data(2009, 6, 25, 14, 34, 56, 654),
  42                    {
  43                      labels: ['time with ms', 'random']
  44                    }
  45                  );
  46       gstd = new Dygraph(
  47                    document.getElementById("div_std"),
  48                    data(2009, 6, 25, 14, 0, 0, 0),
  49                    {
  50                      labels: ['time', 'random']
  51                    }
  52                  );
  53     </script>
  54
  55   </body>
  56 </html>