[dygraphs.git] / tests / labelsDateUTC.html

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