title tbd

desc tbd

by suhail

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.js"></script>
<script src="http://dygraphs.com/src/extras/synchronizer.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>
<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/src/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="legend1"> </div>
  <div id="div2" class="chart"></div>
  <div id="legend2"> </div>

  <div id="div3" class="chart"></div>
  <div id="legend3"> </div>

  <div id="div4" class="chart"></div>
  <div id="legend4"> </div>

</div>
<p>

CSS

.dygraph-legend>span {
  display: none;
}

.dygraph-legend>span.highlight {
  display: inline;
}

JavaScript

$(document).ready(function() {
   var gs = [];
   var blockRedraw = false;
   gs.push(
     new Dygraph(
       document.getElementById("div1"),
       NoisyData1, {
         labelsDiv: "legend1",
         fillGraph: true,
         hideOverlayOnMouseOut: false,
         legend: "follow",
         clickCallback: function(e, x, points) {
           console.log(e);
           console.log(x);
           console.log(points);
         },
         legendFormatter: legendFormatter
       }
     )
   );
   for (var i = 2; i <= 4; i++) {
     gs.push(
       new Dygraph(
         document.getElementById("div" + i),
         NoisyData, {
           labelsDiv: "legend" + i,
           fillGraph: true,
           hideOverlayOnMouseOut: false,
           legend: "follow",
           clickCallback: function(e, x, points) {
             console.log(e);
             console.log(x);
             console.log(points);
           },
           legendFormatter: legendFormatter
         }
       )
     );
   }
   var sync = Dygraph.synchronize(gs);
 });

 function NoisyData1() {
   return "" +
     "Date,A,B\n" +
     "20060928,3.01953818828,0.7212041046\n" +
     "20060929,3.01953818828,0.7212041046\n" +
     "20060930,3.01953818828,0.7212041046\n" +
     "20061001,3.01953818828,0.7212041046\n" +

     "20061003,2.44328097731,0.644967734352\n" +

     "20061005,3.28719723183,0.741636245748\n" +

     "20061007,5.32859680284,0.946589405904\n" +

     "20061009,2.26480836237,0.620990945917\n" +

     "20061011,2.7633851468,0.681234043829\n" +

     "20061013,1.77304964539,0.55569466381\n" +

     "20061015,2.65017667845,0.675144574777\n" +

     "20061017,2.25694444444,0.618859623032\n" +

     "20061019,2.44755244755,0.646081155692\n" +

     "20061021,3.94265232975,0.823839169829\n" +

     "20061023,4.33275563258,0.847570482324\n" +

     "20061025,1.40350877193,0.492720767725\n" +

     "20061027,2.30905861456,0.632980642182\n" +

     "20061029,2.66903914591,0.679883997626\n" +

  ...