Flot Selection to Control multiple charts

Question

I've been trying to modify the code from the flot examples (http://www.flotcharts.org/flot/examples/zooming/) so that I can replot a number of charts depending on the selection (i.e. changing xaxis.min and xaxis.max) and keep them all correlated.

I have no idea where to begin with regards to modifying the example, any suggestions or hints would be most welcome.

Thanks

Update modified code from zoom example help still required!

enter code here
$(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
    }*/
    selection: { mode: "x"}
};

plots.push($.plot(placeholder, data, options));
plots.push($.plot(placeholder1, data2, options));

placeholders.bind("plotselected", function (event, plot) {
    var axes = plot.getAxes();
    for(var i=0; i< plots.length; i++) {
        plots[i].getOptions().xaxes.min = axes.xaxis.from;
        plots[i].getOptions().xaxes.max = axes.xaxis.to;
        //plots[i].getOptions().yaxes[0].min = axes.yaxis.min;
        //plots[i].getOptions().yaxes[0].max = axes.yaxis.max;
        plots[i].setupGrid();
        plots[i].draw();
        plots[i].clearSelection();
    }
    });

    });