Cómo ahorrar (mantener) el estado de zoom de gráficos Flot en Actualizar con AJAX

Question

Tengo una sencilla aplicación que la base de datos para los datos de las encuestas de cada minuto. Cuando nuevos datos se obtienen, estoy actualizando el gráfico usando ajax. Sin embargo, cada vez que actualiza el gráfico (repetición del diagrama con nuevos valores añadidos a los datos de trama) se pierde el estado actual de zoom. Antes de actualizar la gráfica, quiero preservar la última posición del zoom. Después de actualizar el gráfico, quiero enfocar el gráfico a su posición guardada. Esto es importante porque la re-zoom cada minuto es irritante. ¿Es esto posible?

Answer 1

Aquí está la respuesta por Joshua Varner 1

Al llegar a sus nuevos datos antes de volver parcela obtener el tamaño actual y añadirlo a las opciones de actualización.

// 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

Me trató esta respuesta de Ozan y no pude conseguir el bloque para copiar el zoom al trabajo, así que acabo de utilizar plot.getOptions () y utilicé que para dibujar el gráfico. De esta manera:

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

De esta forma puede cambiar dinámicamente su punto de vista y la actualización automática se actualizará sin cambiar su punto de vista.

Answer 3

Se debe obtener la información sobre el estado de los ejes actuales, fusionarlo con sus opciones iniciales y que ellos proporcionan a la nueva trama.

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