Synchronization across graphs

README.md

This demonstates the ability to synchronize pan and zoom behavior across graphs.

To use this, source https://github.com/danvk/dygraphs/blob/master/src/extras/synchronizer.js on your page. See the comments in that file for usage.

data.js

function NoisyData() {
return "" +
"Date,A,B\n" +
"20061001,3.01953818828,0.7212041046,2.18487394958,0.599318549691\n" +
"20061002,3.63321799308,0.778297234566,1.69491525424,0.531417655826\n" +
"20061003,2.44328097731,0.644967734352,2.51256281407,0.640539070386\n" +
"20061004,3.52733686067,0.774700921683,2.68456375839,0.66207105053\n" +
"20061005,3.28719723183,0.741636245748,2.35294117647,0.621407707226\n" +
"20061006,1.58450704225,0.523967868159,3.78657487091,0.791868460623\n" +
"20061007,5.32859680284,0.946589405904,4.0404040404,0.807910739509\n" +
"20061008,2.64084507042,0.672799548916,2.37288135593,0.626609885481\n" +
"20061009,2.26480836237,0.620990945917,3.5413153457,0.75897176848\n" +
"20061010,3.29289428076,0.74289969528,2.02702702703,0.579191340004\n" +
"20061011,2.7633851468,0.681234043829,1.1744966443,0.4413034044\n" +
"20061012,3.28719723183,0.741636245748,3.37268128162,0.741327769578\n" +
"20061013,1.77304964539,0.55569466381,1.85810810811,0.555011329732\n" +
"20061014,3.39892665474,0.7664008338,1.67224080268,0.524368852929\n" +
"20061015,2.65017667845,0.675144574777,3.35570469799,0.737661045752\n" +
"20061016,3.63951473137,0.779620631266,2.34899328859,0.620377617453\n" +
"20061017,2.25694444444,0.618859623032,1.68067226891,0.526990133716\n" +
"20061018,4.47504302926,0.857766274964,2.51677852349,0.641599927369\n" +
"20061019,2.44755244755,0.646081155692,1.68067226891,0.526990133716\n" +
"20061020,3.67775831874,0.787656442774,3.066439523,0.711598843969\n" +
"20061021,3.94265232975,0.823839169829,3.85906040268,0.788990618726\n" +
"20061022,2.59067357513,0.660187558973,3.71621621622,0.777438794254\n" +
"20061023,4.33275563258,0.847570482324,3.85906040268,0.788990618726\n" +
"20061024,3.10344827586,0.720049610821,2.84280936455,0.679611549697\n" +
"20061025,1.40350877193,0.492720767725,2.7027027027,0.666482380968\n" +
"20061026,1.95035460993,0.582291234145,2.36486486486,0.624518599275\n" +
"20061027,2.30905861456,0.632980642182,2.03045685279,0.580161203819\n" +
"20061028,4.09252669039,0.835706590809,2.87648054146,0.68754192469\n" +
"20061029,2.66903914591,0.679883997626,2.02360876897,0.578224712918\n" +
"20061030,4.74516695958,0.89127787497,4.36241610738,0.836670992529\n" +
"20061031,2.78260869565,0.685905251933,3.20945945946,0.724388507178\n" +
"20061101,1.5873015873,0.524884521441,1.51260504202,0.500373860545\n" +
"20061102,2.78745644599,0.687083077461,2.0202020202,0.57726130639\n" +
"20061103,5.11463844797,0.925157232782,2.68907563025,0.663168401088\n" +
"20061104,4.9001814882,0.919644816432,3.07692307692,0.713993047527\n" +
"20061105,5.13274336283,0.928343545136,3.55329949239,0.761492892041\n" +
"20061106,1.92644483363,0.575222935029,2.35294117647,0.621407707226\n" +
"20061107,2.46478873239,0.650573541306,1.52027027027,0.502889967904\n" +
"20061108,2.13523131673,0.609772022763,2.6981450253,0.665374048085\n" +
"20061109,3.88007054674,0.811026422222,2.72572402044,0.672079879106\n" +
"20061110,2.63620386643,0.671633132526,3.71621621622,0.777438794254\n" +
"20061111,3.69718309859,0.791736755355,3.0303030303,0.703344064467\n" +
"20061112,3.83944153578,0.802703592906,4.05405405405,0.81058250986\n" +
"20061113,2.47787610619,0.653984033555,2.20338983051,0.604340313133\n" +
"20061114,1.77304964539,0.55569466381,2.22222222222,0.60944692682\n" +
"20061115,2.30088495575,0.630766388737,0.843170320405,0.375484163785\n" +
"20061116,1.57894736842,0.522144132232,2.19594594595,0.602321544724\n" +
"20061118,2.45183887916,0.647198426991,1.69491525424,0.531417655826\n" +
"20061119,3.52733686067,0.774700921683,1.85185185185,0.55316023504\n" +
"20061120,2.97723292469,0.711254751484,2.6981450253,0.665374048085\n" +
"20061121,2.29681978799,0.629665059963,2.01680672269,0.576301104352\n" +
"20061122,3.01418439716,0.719945245328,2.5466893039,0.649125445325\n" +
"20061123,3.78378378378,0.809917534069,2.6936026936,0.664269394219\n" +
"20061124,3.18584070796,0.738851643987,2.01005025126,0.57439025002\n" +
"20061125,2.83185840708,0.697868332879,3.066439523,0.711598843969\n" +
"20061126,3.01953818828,0.7212041046,2.53378378378,0.645878720149\n" +
"20061127,2.81195079086,0.693033387099,1.51006711409,0.499540743312\n" +
"20061128,2.97723292469,0.711254751484,2.54237288136,0.648039583782\n" +
"20061129,1.41093474427,0.495309102312,3.02013422819,0.701020603129";
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://dygraphs.com/dygraph-combined-dev.js"></script>
    <script type="text/javascript" src="http://dygraphs.com/extras/synchronizer.js"></script>

    <script type="text/javascript" src="data.js"></script>
    <style>
      body { margin-top: 20px; margin-left: 20px; }
      .chart { width: 450px; height: 220px; }
      .chart-container { overflow: hidden; }
      #div1 { float: left; }
      #div2 { float: left; }
      #div3 { float: left; clear: left; }
      #div4 { float: left; }
    </style>
  </head>
  <body>
    <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>