[dygraphs.git] / tests / synchronize.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>synchronize</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>
    <script type="text/javascript" src="data.js"></script>
    <style type="text/css">
      #div1 { position: absolute; left: 10px; top: 30px; }
      #div2 { position: absolute; left: 520px; top: 30px; }
      #div3 { position: absolute; left: 10px; top: 340px; }
      #div4 { position: absolute; left: 520px; top: 340px; }
    </style>
  </head>
  <body>
    <p>Zooming and panning on any of the charts will zoom and pan all the
    others.</p>

    <div id="div1" style="width:500px; height:300px;"></div>
    <div id="div2" style="width:500px; height:300px;"></div>
    <div id="div3" style="width:500px; height:300px;"></div>
    <div id="div4" style="width:500px; height:300px;"></div>

    <script type="text/javascript">
      gs = [];
      var blockRedraw = false;
      var initialized = false;
      for (var i = 1; i <= 4; i++) {
        gs.push(
          new Dygraph(
            document.getElementById("div" + i),
            NoisyData, {
              rollPeriod: 7,
              errorBars: true,
              drawCallback: function(me, initial) {
                if (blockRedraw || initial) return;
                blockRedraw = true;
                var range = me.xAxisRange();
                var yrange = me.yAxisRange();
                for (var j = 0; j < 4; j++) {
                  if (gs[j] == me) continue;
                  gs[j].updateOptions( {
                    dateWindow: range,
                    valueRange: yrange
                  } );
                }
                blockRedraw = false;
              }
            }
          )
        );
      }
    </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>synchronize</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	<script type="text/javascript" src="data.js"></script>
	14	<style type="text/css">
	15	#div1 { position: absolute; left: 10px; top: 30px; }
	16	#div2 { position: absolute; left: 520px; top: 30px; }
	17	#div3 { position: absolute; left: 10px; top: 340px; }
	18	#div4 { position: absolute; left: 520px; top: 340px; }
	19	</style>
	20	</head>
	21	<body>
	22	<p>Zooming and panning on any of the charts will zoom and pan all the
	23	others.</p>
	24
	25	<div id="div1" style="width:500px; height:300px;"></div>
	26	<div id="div2" style="width:500px; height:300px;"></div>
	27	<div id="div3" style="width:500px; height:300px;"></div>
	28	<div id="div4" style="width:500px; height:300px;"></div>
	29
	30	<script type="text/javascript">
	31	gs = [];
	32	var blockRedraw = false;
	33	var initialized = false;
	34	for (var i = 1; i <= 4; i++) {
	35	gs.push(
	36	new Dygraph(
	37	document.getElementById("div" + i),
	38	NoisyData, {
	39	rollPeriod: 7,
	40	errorBars: true,
	41	drawCallback: function(me, initial) {
	42	if (blockRedraw \|\| initial) return;
	43	blockRedraw = true;
	44	var range = me.xAxisRange();
	45	var yrange = me.yAxisRange();
	46	for (var j = 0; j < 4; j++) {
	47	if (gs[j] == me) continue;
	48	gs[j].updateOptions( {
	49	dateWindow: range,
	50	valueRange: yrange
	51	} );
	52	}
	53	blockRedraw = false;
	54	}
	55	}
	56	)
	57	);
	58	}
	59	</script>
	60	</body>
	61	</html>