Flot Charts - Drag / Zoom two or more charts at the same time using flot.navigate plugin

Question

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

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.

http://jsfiddle.net/mashinista/cPNNJ/

<div id="placeholder1" style="width: 600px; height: 300px; padding: 0px; position: relative; cursor: auto;"></div>

$(function () {

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
    }
};


var plot = $.plot(placeholder, data, options);
var plot = $.plot(placeholder1, data2, options);


});

Answer 1

I modified your jsfiddle: http://jsfiddle.net/cPNNJ/4/

I created an array of plot objects. Each $.plot() is stored in the array. Next, an event handler needs to be created for the plothover and plotzoom events.

When the event handler is called, the code will loop through the plot objects in the plot array and set the x and y axis min and max values to the passed plot objects x and y axis min and max values.

$(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();
        }
    });

});