[dygraphs.git] / tests / link-interaction.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>noise</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
    <script type="text/javascript" src="../dygraph-canvas.js"></script>
    <script type="text/javascript" src="../dygraph.js"></script>
  </head>
  <body>
    <div id="div_g"></div>
    <b>Zoom:</b>
      <a href="#" onclick="zoom(3600)">hour</a>
      <a href="#" onclick="zoom(86400)">day</a>
      <a href="#" onclick="zoom(604800)">week</a>
      <a href="#" onclick="zoom(30 * 86400)">month</a>
      <a href="#" onclick="reset()">full</a>
    <b>Pan:</b>
      <a href="#" onclick="pan(-1)">left</a>
      <a href="#" onclick="pan(+1)">right</a>

    <script type="text/javascript">
      var r = [ ];
      var base_time = Date.parse("2008/07/01");
      var num = 24 * 0.25 * 365;
      for (var i = 0; i < num; i++) {
        r.push([ new Date(base_time + i * 3600 * 1000),
                 i + 50 * (i % 60),        // line
                 i * (num - i) * 4.0 / num  // parabola
               ]);
      }
      var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
      g = new Dygraph(
            document.getElementById("div_g"),
            r, {
              rollPeriod: 7,
              // errorBars: true,
              width: 600,
              height: 300,
              labels: ["Date", "a", "b"]
            }
          );

      var desired_range = null;
      function approach_range() {
        if (!desired_range) return;
        // go halfway there
        var range = g.xAxisRange();
        if (Math.abs(desired_range[0] - range[0]) < 60 &&
            Math.abs(desired_range[1] - range[1]) < 60) {
          g.updateOptions({dateWindow: desired_range});
          // (do not set another timeout.)
        } else {
          var new_range;
          new_range = [0.5 * (desired_range[0] + range[0]),
                       0.5 * (desired_range[1] + range[1])];
          g.updateOptions({dateWindow: new_range});
          animate();
        }
      }
      function animate() {
        setTimeout(approach_range, 50);
      }

      function zoom(res) {
        var w = g.xAxisRange();
        desired_range = [ w[0], w[0] + res * 1000 ];
        animate();
      }

      function reset() {
        desired_range = orig_range;
        animate();
      }

      function pan(dir) {
        var w = g.xAxisRange();
        var scale = w[1] - w[0];
        var amount = scale * 0.25 * dir;
        desired_range = [ w[0] + amount, w[1] + amount ];
        animate();
      }
    </script>
  </body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	5	<title>noise</title>
	6	<!--[if IE]>
	7	<script type="text/javascript" src="../excanvas.js"></script>
	8	<![endif]-->
	9	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
	10	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
	11	<script type="text/javascript" src="../dygraph-canvas.js"></script>
	12	<script type="text/javascript" src="../dygraph.js"></script>
	13	</head>
	14	<body>
	15	<div id="div_g"></div>
	16	<b>Zoom:</b>
	17	<a href="#" onclick="zoom(3600)">hour</a>
	18	<a href="#" onclick="zoom(86400)">day</a>
	19	<a href="#" onclick="zoom(604800)">week</a>
	20	<a href="#" onclick="zoom(30 * 86400)">month</a>
	21	<a href="#" onclick="reset()">full</a>
	22	<b>Pan:</b>
	23	<a href="#" onclick="pan(-1)">left</a>
	24	<a href="#" onclick="pan(+1)">right</a>
	25
	26	<script type="text/javascript">
	27	var r = [ ];
	28	var base_time = Date.parse("2008/07/01");
	29	var num = 24 * 0.25 * 365;
	30	for (var i = 0; i < num; i++) {
	31	r.push([ new Date(base_time + i * 3600 * 1000),
	32	i + 50 * (i % 60), // line
	33	i * (num - i) * 4.0 / num // parabola
	34	]);
	35	}
	36	var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
	37	g = new Dygraph(
	38	document.getElementById("div_g"),
	39	r, {
	40	rollPeriod: 7,
	41	// errorBars: true,
	42	width: 600,
	43	height: 300,
	44	labels: ["Date", "a", "b"]
	45	}
	46	);
	47
	48	var desired_range = null;
	49	function approach_range() {
	50	if (!desired_range) return;
	51	// go halfway there
	52	var range = g.xAxisRange();
	53	if (Math.abs(desired_range[0] - range[0]) < 60 &&
	54	Math.abs(desired_range[1] - range[1]) < 60) {
	55	g.updateOptions({dateWindow: desired_range});
	56	// (do not set another timeout.)
	57	} else {
	58	var new_range;
	59	new_range = [0.5 * (desired_range[0] + range[0]),
	60	0.5 * (desired_range[1] + range[1])];
	61	g.updateOptions({dateWindow: new_range});
	62	animate();
	63	}
	64	}
	65	function animate() {
	66	setTimeout(approach_range, 50);
	67	}
	68
	69	function zoom(res) {
	70	var w = g.xAxisRange();
	71	desired_range = [ w[0], w[0] + res * 1000 ];
	72	animate();
	73	}
	74
	75	function reset() {
	76	desired_range = orig_range;
	77	animate();
	78	}
	79
	80	function pan(dir) {
	81	var w = g.xAxisRange();
	82	var scale = w[1] - w[0];
	83	var amount = scale * 0.25 * dir;
	84	desired_range = [ w[0] + amount, w[1] + amount ];
	85	animate();
	86	}
	87	</script>
	88	</body>
	89	</html>