Drag / Zoom two Flot Charts

Use flot navigation plugin to drag / zoom two flot charts at the same time

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.navigate.min.js"></script>
<div id="placeholder" class="flot" style="width: 600px; height: 300px; padding: 0px; position: relative; cursor: auto;"></div>
    <div id="placeholder1" class="flot" style="width: 600px; height: 300px; padding: 0px; position: relative; cursor: auto;"></div>

JavaScript

$(function () {
    var plots = [];
    var placeholders = $(".flot");
    
    var d1 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.25)
        d1.push([i, Math.sin(i)]);
    var data = [ d1 ];
    
    var d2 = [];
    for (var i = 0; i < 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
        }
    };
     
    plots.push($.plot(placeholder, data, options));
    plots.push($.plot(placeholder1, data2, options));
    
    placeholders.bind("plotpan plotzoom", function (event, plot) {
        var axes = plot.getAxes();
        for(var i=0; i< plots.length; i++) {
            plots[i].getOptions().xaxes[0].min = axes.xaxis.min;
            plots[i].getOptions().xaxes[0].max = axes.xaxis.max;
            plots[i].getOptions().yaxes[0].min = axes.yaxis.min;
            plots[i].getOptions().yaxes[0].max = axes.yaxis.max;
            plots[i].setupGrid();
            plots[i].draw();
        }
    });

});