5

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


});
user3288556
  • 295
  • 1
  • 4
  • 9

2 Answers2

5

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

});
mechenbier
  • 3,037
  • 23
  • 31
  • 2
    Great answer. The only thing I would add is a check in your `for` loop to skip the plot the event is occurring on. It'll be re-drawn by plugin, no point it doing it again. Updated fiddle: http://jsfiddle.net/larsenmtl/cPNNJ/6/ – Mark Feb 09 '14 at 17:31
  • Thank you kindly for your answer prmech, this is exactly what I was looking for. Not sure if new question should be posted, but I am wondering if additional feature could be added to this. For example, once I drag charts to the right, I would like to have button with back / history functionality that would take me back to the previous charts display state. I am aware of reset functionality, but this feature would remember zooming / dragging actions and allow for recalling previous state(s) that user applied on the charts. – user3288556 Feb 09 '14 at 17:37
  • 1
    @user3288556, here is a quick example that implements a `history`: http://jsfiddle.net/larsenmtl/cPNNJ/9/. It works by recording the axis positions after the user has stopped moving the window for 500 milliseconds (using a `setInterval`). – Mark Feb 09 '14 at 23:46
  • Mark, this is excellent. Thank you very much for your time and effort. – user3288556 Feb 10 '14 at 02:30
0

Similar different approach is this

JSFillde

This sample synchronizes PANNING only.

prophet5
  • 439
  • 5
  • 18