[dygraphs.git] / tests / labelsDateUTC.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>UTC date labels</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.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>labelsDateUTC</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,
                   {
                     labelsDateUTC: true,
                     labels: ['UTC', 'random']
                   }
                 );
    </script>

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