[dygraphs.git] / tests / labelsDateMilliseconds.html

<!DOCTYPE html>
<html>
  <head>
    <title>Milliseconds date labels</title>
    <script type="text/javascript" src="../dist/dygraph.js"></script>
  </head>
  <body>

    <h2>Milliseconds display in date and time labels</h2>

    <p>This shows how milliseconds are displayed when present.</p>

    <div id="div_ms" style="width:600px; height:200px;"></div>
    <div id="div_std" style="width:600px; height:200px;"></div>
    
    <p>You can check it by hovering over corresponding points and comparing
    the value labels.</p>

    <script type="text/javascript">
      var values = (function () {
        var rand10 = function () { return Math.round(10 * Math.random()); };
        var a = [];
        for (var n=0; n < 72; n++) {
          a.push(rand10());
        }
        return a;
      })();
      function data(y,m,d,hh,mm,ss,ms) {
        var a = [];
        for (var n=0; n < 72; n++) {
          a.push([new Date(Date.UTC(y, m, d, hh + n, mm, ss, ms)), values[n]]);
        }
        return a;
      }
      gms = new Dygraph(
                   document.getElementById("div_ms"),
                   data(2009, 6, 25, 14, 34, 56, 654),
                   {
                     labels: ['time with ms', 'random']
                   }
                 );
      gstd = new Dygraph(
                   document.getElementById("div_std"),
                   data(2009, 6, 25, 14, 0, 0, 0),
                   {
                     labels: ['time', 'random']
                   }
                 );
    </script>

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