[dygraphs.git] / tests / labelsDateUTC.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../dist/dygraph.css">
    <title>UTC date labels</title>
    <script type="text/javascript" src="../dist/dygraph.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>labelsUTC</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,
                   {
                     labelsUTC: true,
                     labels: ['UTC', 'random']
                   }
                 );
    </script>

  </body>
</html>
Commit	Line	Data
4c765ad9 JPB	1	<!DOCTYPE html>
	2	<html>
	3	<head>
fd6b8dad	4	<link rel="stylesheet" href="../dist/dygraph.css">
4c765ad9	5	<title>UTC date labels</title>
fbd6834a	6	<script type="text/javascript" src="../dist/dygraph.js"></script>
4c765ad9 JPB	7	</head>
	8	<body>
	9
	10	<h2>UTC date and time labels</h2>
	11
	12	<p>This shows how date ticks and labels may be generated according to local
8c0599e3	13	time (default) or UTC with the option <code>labelsUTC</code>.</p>
4c765ad9 JPB	14
	15	<p>72 hours of random hourly data since 2009-Jul-23 18:00 UTC
	16	according to local time (top) and UTC (bottom):</p>
	17
	18	<div id="div_loc" style="width:600px; height:200px;"></div>
	19	<div id="div_utc" style="width:600px; height:200px;"></div>
	20
	21	<p>Please note the offset between the respective ticks in both plots.
	22	It should match your local time zone offset.</p>
	23
	24	<p>You can also check it by hovering over corresponding points and comparing
	25	the value labels.</p>
	26
	27	<p>Try different zoom levels to show that ticks are always placed at nice
	28	time boundaries.</p>
	29
	30	<script type="text/javascript">
	31	var data = (function() {
	32	var rand10 = function () { return Math.round(10 * Math.random()); };
	33	var a = []
	34	for (var y = 2009, m = 6, d = 23, hh = 18, n=0; n < 72; n++) {
	35	a.push([new Date(Date.UTC(y, m, d, hh + n, 0, 0)), rand10()]);
	36	}
	37	return a;
	38	})();
	39	gloc = new Dygraph(
	40	document.getElementById("div_loc"),
	41	data,
	42	{
	43	labels: ['local time', 'random']
	44	}
	45	);
	46	gutc = new Dygraph(
	47	document.getElementById("div_utc"),
	48	data,
	49	{
8c0599e3	50	labelsUTC: true,
4c765ad9 JPB	51	labels: ['UTC', 'random']
	52	}
	53	);
	54	</script>
	55
	56	</body>
	57	</html>