Comment sauver (préserver) l'état du zoom des graphiques sur Flot Mise à jour avec AJAX

Question

J'ai une application simple qui base de données de sondages pour les données à chaque minute. Lorsque de nouvelles données sont extraites, je mets à jour le graphique en utilisant ajax. Cependant, chaque fois que je mets à jour le graphique (re-parcelle avec de nouvelles valeurs ajoutées pour tracer des données) l'état actuel de zoom est perdu. Avant de mettre à jour le graphique, je veux préserver la dernière position de zoom. Après la mise à jour du graphique, je veux agrandir le graphique à sa position enregistrée. Ceci est important car re-zoom chaque minute est irritant. Est-ce possible?

Answer 1

Voici la réponse par Joshua Varner 1

Lorsque vous obtenez vos nouvelles données avant de vous re parcelle obtenir le zoom actuel et ajouter aux options sur la mise à jour.

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

J'ai essayé cette réponse de Ozan et je ne pouvais pas obtenir le bloc pour copier le zoom à travailler si je viens d'utiliser plot.getOptions () et utilisé que pour tracer le graphe. Comme ceci:

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

De cette façon, vous pouvez modifier dynamiquement votre point de vue et la mise à jour automatique se mettra à jour sans changer votre point de vue.

Answer 3

Vous devriez obtenir les informations sur l'état des axes actuels, fusionner avec vos options initiales et que les fournir à la nouvelle parcelle.

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