[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>
      <input type=checkbox id='chk-range' checked onChange='update()'><label for='chk-range'> Range (y-axis)</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,
            selection = document.getElementById('chk-selection').checked,
            syncRange = document.getElementById('chk-range').checked;
        document.getElementById('chk-range').disabled = !zoom;

        sync.detach();
        sync = Dygraph.synchronize(gs, {
          zoom: zoom,
          selection: selection,
          range: syncRange
        });
      }
    </script>
  </body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<title>synchronize</title>
	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>
	10	<script type="text/javascript" src="../extras/synchronizer.js"></script>
	11
	12	<script type="text/javascript" src="data.js"></script>
	13	<style>
	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; }
	20	</style>
	21	</head>
	22	<body>
	23	<p>Zooming and panning on any of the charts will zoom and pan all the
	24	others. Selecting points on one will select points on the others.</p>
	25
	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	<input type=checkbox id='chk-range' checked onChange='update()'><label for='chk-range'> Range (y-axis)</label>
	41	</p>
	42
	43	<script type="text/javascript">
	44	gs = [];
	45	var blockRedraw = false;
	46	for (var i = 1; i <= 4; i++) {
	47	gs.push(
	48	new Dygraph(
	49	document.getElementById("div" + i),
	50	NoisyData, {
	51	rollPeriod: 7,
	52	errorBars: true,
	53	}
	54	)
	55	);
	56	}
	57	var sync = Dygraph.synchronize(gs);
	58
	59	function update() {
	60	var zoom = document.getElementById('chk-zoom').checked,
	61	selection = document.getElementById('chk-selection').checked,
	62	syncRange = document.getElementById('chk-range').checked;
	63	document.getElementById('chk-range').disabled = !zoom;
	64
	65	sync.detach();
	66	sync = Dygraph.synchronize(gs, {
	67	zoom: zoom,
	68	selection: selection,
	69	range: syncRange
	70	});
	71	}
	72	</script>
	73	</body>
	74	</html>