[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]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>
    <script type="text/javascript" src="../extras/synchronizer.js"></script>

    <script type="text/javascript" src="data.js"></script>
    <style type="text/css">
      .chart { width: 500px; height: 300px; }
      .chart-container { overflow: hidden; }
      #div1 { float: left; }
      #div2 { float: left; }
      #div3 { float: left; clear: left; }
      #div4 { float: left; }
    </style>
  </head>
  <body>
    <p>Zooming and panning on any of the charts will zoom and pan all the
    others. Selecting points on one will select points on the others.</p>

    <p>To use this, source <a href="https://github.com/danvk/dygraphs/blob/master/extras/synchronizer.js"><code>extras/synchronizer.js</code></a> on your page.
    See the comments in that file for usage.</p>

    <div class="chart-container">
      <div id="div1" class="chart"></div>
      <div id="div2" class="chart"></div>
      <div id="div3" class="chart"></div>
      <div id="div4" class="chart"></div>
    </div>

    <p>
      Synchronize what?
      <input type=checkbox id='chk-zoom' checked onChange='update()'><label for='chk-zoom'> Zoom</label>
      <input type=checkbox id='chk-selection' checked onChange='update()'><label for='chk-selection'> Selection</label>
    </p>

    <script type="text/javascript">
      gs = [];
      var blockRedraw = false;
      for (var i = 1; i <= 4; i++) {
        gs.push(
          new Dygraph(
            document.getElementById("div" + i),
            NoisyData, {
              rollPeriod: 7,
              errorBars: true,
            }
          )
        );
      }
      var sync = Dygraph.synchronize(gs);
      
      function update() {
        var zoom = document.getElementById('chk-zoom').checked;
        var selection = document.getElementById('chk-selection').checked;
        sync.detach();
        sync = Dygraph.synchronize(gs, {
          zoom: zoom,
          selection: selection
        });
      }
    </script>
  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
02f49d0b DV	2	<html>
02f49d0b DV	3	<head>
10494b48	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
02f49d0b DV	5	<title>synchronize</title>
02f49d0b DV	6	<!--[if IE]>
a2b2c3a1	7	<script type="text/javascript" src="../excanvas.js"></script>
02f49d0b	8	<![endif]-->
7e5ddc94 DV	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>
8cadc6c9	14	<script type="text/javascript" src="../extras/synchronizer.js"></script>
7e5ddc94	15
02f49d0b DV	16	<script type="text/javascript" src="data.js"></script>
02f49d0b DV	17	<style type="text/css">
8cadc6c9 DV	18	.chart { width: 500px; height: 300px; }
	19	.chart-container { overflow: hidden; }
	20	#div1 { float: left; }
	21	#div2 { float: left; }
	22	#div3 { float: left; clear: left; }
	23	#div4 { float: left; }
02f49d0b DV	24	</style>
	25	</head>
	26	<body>
	27	<p>Zooming and panning on any of the charts will zoom and pan all the
8cadc6c9	28	others. Selecting points on one will select points on the others.</p>
fe0b7c03	29
8cadc6c9 DV	30	<p>To use this, source <a href="https://github.com/danvk/dygraphs/blob/master/extras/synchronizer.js"><code>extras/synchronizer.js</code></a> on your page.
	31	See the comments in that file for usage.</p>
	32
	33	<div class="chart-container">
	34	<div id="div1" class="chart"></div>
	35	<div id="div2" class="chart"></div>
	36	<div id="div3" class="chart"></div>
	37	<div id="div4" class="chart"></div>
	38	</div>
	39
	40	<p>
	41	Synchronize what?
	42	<input type=checkbox id='chk-zoom' checked onChange='update()'><label for='chk-zoom'> Zoom</label>
	43	<input type=checkbox id='chk-selection' checked onChange='update()'><label for='chk-selection'> Selection</label>
	44	</p>
02f49d0b DV	45
	46	<script type="text/javascript">
	47	gs = [];
	48	var blockRedraw = false;
02f49d0b DV	49	for (var i = 1; i <= 4; i++) {
	50	gs.push(
	51	new Dygraph(
	52	document.getElementById("div" + i),
	53	NoisyData, {
	54	rollPeriod: 7,
	55	errorBars: true,
02f49d0b DV	56	}
	57	)
	58	);
	59	}
8cadc6c9 DV	60	var sync = Dygraph.synchronize(gs);
	61
	62	function update() {
	63	var zoom = document.getElementById('chk-zoom').checked;
	64	var selection = document.getElementById('chk-selection').checked;
	65	sync.detach();
	66	sync = Dygraph.synchronize(gs, {
	67	zoom: zoom,
	68	selection: selection
	69	});
	70	}
02f49d0b DV	71	</script>
	72	</body>
	73	</html>