Como salvar (preservar) o estado de zoom dos gráficos de flot na atualização com Ajax

Question

Eu tenho um aplicativo simples que pesquisa no banco de dados para dados a cada minuto. Quando novos dados são buscados, estou atualizando o gráfico usando AJAX. No entanto, sempre que atualizo o gráfico (re-planeje-o com novos valores adicionados aos dados da plotagem), o estado atual do zoom é perdido. Antes de atualizar o gráfico, quero preservar a mais recente posição de zoom. Depois de atualizar o gráfico, quero ampliar o gráfico para sua posição salva. Isso é importante porque a zoomia a cada minuto é irritante. Isso é possível?

Answer 1

Aqui está a resposta de Joshua Varner 1

Quando você obtém seus novos dados antes de fazer o enredo, obtenha o zoom atual e adicione -os às opções na atualização.

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

Eu tentei esta resposta de Ozan e não consegui obter o bloco para copiar o zoom para funcionar, então eu apenas usei plot.getOptions () e usei isso para desenhar o gráfico. Assim:

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

Dessa forma, você pode alterar dinamicamente sua visualização e a atualização automática será atualizada sem alterar sua visualização.

Answer 3

Você deve obter as informações sobre o estado dos eixos atuais, mesclar suas opções iniciais e fornecer -as ao novo gráfico.

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