[dygraphs.git] / tests / synchronize.html

<!DOCTYPE html>
<html>
  <head>
    <title>synchronize</title>
    <!--
    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>
      .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>
	3	<head>
	4	<title>synchronize</title>
7e5ddc94 DV	5	<!--
	6	For production (minified) code, use:
	7	<script type="text/javascript" src="dygraph-combined.js"></script>
	8	-->
	9	<script type="text/javascript" src="../dygraph-dev.js"></script>
8cadc6c9	10	<script type="text/javascript" src="../extras/synchronizer.js"></script>
7e5ddc94	11
02f49d0b	12	<script type="text/javascript" src="data.js"></script>
0dd82a21	13	<style>
8cadc6c9 DV	14	.chart { width: 500px; height: 300px; }
	15	.chart-container { overflow: hidden; }
	16	#div1 { float: left; }
	17	#div2 { float: left; }
	18	#div3 { float: left; clear: left; }
	19	#div4 { float: left; }
02f49d0b DV	20	</style>
	21	</head>
	22	<body>
	23	<p>Zooming and panning on any of the charts will zoom and pan all the
8cadc6c9	24	others. Selecting points on one will select points on the others.</p>
fe0b7c03	25
8cadc6c9 DV	26	<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.
	27	See the comments in that file for usage.</p>
	28
	29	<div class="chart-container">
	30	<div id="div1" class="chart"></div>
	31	<div id="div2" class="chart"></div>
	32	<div id="div3" class="chart"></div>
	33	<div id="div4" class="chart"></div>
	34	</div>
	35
	36	<p>
	37	Synchronize what?
	38	<input type=checkbox id='chk-zoom' checked onChange='update()'><label for='chk-zoom'> Zoom</label>
	39	<input type=checkbox id='chk-selection' checked onChange='update()'><label for='chk-selection'> Selection</label>
	40	</p>
02f49d0b DV	41
	42	<script type="text/javascript">
	43	gs = [];
	44	var blockRedraw = false;
02f49d0b DV	45	for (var i = 1; i <= 4; i++) {
	46	gs.push(
	47	new Dygraph(
	48	document.getElementById("div" + i),
	49	NoisyData, {
	50	rollPeriod: 7,
	51	errorBars: true,
02f49d0b DV	52	}
	53	)
	54	);
	55	}
8cadc6c9 DV	56	var sync = Dygraph.synchronize(gs);
	57
	58	function update() {
	59	var zoom = document.getElementById('chk-zoom').checked;
	60	var selection = document.getElementById('chk-selection').checked;
	61	sync.detach();
	62	sync = Dygraph.synchronize(gs, {
	63	zoom: zoom,
	64	selection: selection
	65	});
	66	}
02f49d0b DV	67	</script>
	68	</body>
	69	</html>