How to save (save) the state of scaling fleet graphs when updating using AJAX

Question

I have a simple application that checks the database for data every minute. When new data is retrieved, I update the graph using ajax. However, whenever I update the graph (overwrite it with new values ​​added to the graph data), the current zoom state is lost. Before updating the graph, I want to keep the last zoom position. After updating the chart, I want to increase the chart to its saved position. This is important because re-scaling every minute causes annoyance. Is it possible?

Answer 1

Here is the answer of Joshua Warner 1

When you get your new data, before you start viewing the current zoom and add it to the update options.

// Get the current zoom
var zoom = plot.getAxes();

// Add the zoom to standard options
var zoomed = {};
$.extend(zoomed,options);
zoomed.xaxis.min = zoom.xaxis.min;
zoomed.xaxis.max = zoom.xaxis.max;
zoomed.yaxis.min = zoom.yaxis.min;
zoomed.yaxis.max = zoom.yaxis.max;

// draw/save the plot
plot = $.plot($("#graph"), d, zoomed);

Answer 2

I tried this answer from Ozan and I could not get the block to copy the scaling for work, so I just used plot.getOptions () and used this to draw a graph. Like this:

var oldOptions = plot.getOptions();
plot = $.plot($("#graph"), data, oldOptions);

This way you can dynamically change your view, and automatic updates will be updated without changing your view.

Answer 3

, .

// Deep copy of the options object so that we can keep it unchanged
// for when we don't want to preserve the zoom.
var copyOptions = $.extend(true, {}, options);

if (plot != null && preserveZoom) {
    // There might be more than one Y axis
    var zoomY = plot.getYAxes();

    for (var i = 0; i < zoomY.length; i++) {
        copyOptions.yaxes[i].min = zoomY[i].min;
        copyOptions.yaxes[i].max = zoomY[i].max;
    }

    // Considering only one X axis, in case of more than one
    // you should use the same method as for the Y axis.
    copyOptions.xaxis.min = plot.getXAxes()[0].min;
    copyOptions.xaxis.max = plot.getXAxes()[0].max;
}

plot = $.plot("#placeholder", data, copyOptions);