title: Flot Charts - Drag / Zoom two or more charts at the same time using flot.navigate plugin
body: <p>I have two or more flot charts displayed on the same page and use flot.navigate plugin for dragging and zooming. I can zoom and drag individual chart independent of other charts, but I would like to have other charts move or zoom together with the chart on which navigation action is applied. Some pages might have only two charts where some have five or six on the same page</p>
  
  <p>My fiddle has two charts displayed and one can zoom (mouse scroll) or drag only one chart. Any ideas or help with this is really appreciated. Thanks.</p>
  
  <p><a href="http://jsfiddle.net/mashinista/cPNNJ/">http://jsfiddle.net/mashinista/cPNNJ/</a> </p>
  
  
  
  <pre><code>&lt;div id="placeholder1" style="width: 600px; height: 300px; padding: 0px; position: relative; cursor: auto;"&gt;&lt;/div&gt;
  
  $(function () {
  
  var d1 = [];
  for (var i = 0; i &lt; Math.PI * 2; i += 0.25)
      d1.push([i, Math.sin(i)]);
  var data = [ d1 ];
  
  var d2 = [];
  for (var i = 0; i &lt; Math.PI * 2; i += 0.25)
      d2.push([i, Math.cos(i)]);
  var data2 = [ d2 ];
  
  
  
  var options = {
      series: { lines: { show: true }, shadowSize: 0 },
      xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
      yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
      zoom: {
          interactive: true
      },
      pan: {
          interactive: true
      }
  };
  
  
  var plot = $.plot(placeholder, data, options);
  var plot = $.plot(placeholder1, data2, options);
  
  
  });
  </code></pre>