Discussion :

[esperal]

Bonjour,
Je cherche à adapter l'axe Y d'un graphique utilisant la bibliothèque flot (vraiment super) en fonction de la sélection. J'ai essayé de modifier l'exemple http://people.iola.dk/olau/flot/examples/selection.html, en suivant les indications de flot.selection.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 }

donc j'ai modifié la fonction lors du clic sur le bouton "select year 1994" (le bouton zoom étant sélectionné) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#setSelection").click(function () {
        plot.setSelection({ xaxis: { from: 1994, to: 1995 }, yaxis: { from: 5, to: 20 } });
    });

mais cela ne marche pas, l'axe Y n'est pas modifié
Autre essai infructueux, utiliser setupGrid(); :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$("#setSelection").click(function () {
        plot.setSelection({ xaxis: { from: 1994, to: 1995 }, yaxis: { from: 5, to: 20 } });
        plot.setupGrid();
        plot.draw();
    });

Où sont mes erreurs ? Quelqu'un a-t-il une idée ?
Merci d'avance

[danielhagnoul]

Je ne connais pas bien ce plugin, mais deux remarques par rapport au code de la démonstration.

Je crois qu'il ne faut modifier qu'un axe à la fois et qu'il faut dire lequel dans l'option "selection".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    var options = {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        legend: { noColumns: 2 },
        xaxis: { tickDecimals: 0 },
        yaxis: { min: 0 },
        selection: { mode: "x" }
    };


    $("#setSelection").click(function () {
        plot.setSelection({ xaxis: { from: 1994, to: 1995 } });
    });
});

[esperal]

Merci, ta réponse m'a mis sur la bonne voie, il faut :
- choisir le mode "xy" dans selection

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var options = {
        series: {
            lines: { show: true },
            points: { show: true }
        },
        legend: { noColumns: 2 },
        xaxis: { tickDecimals: 0 },
        yaxis: { tickDecimals: 0 },
        selection: { mode: "xy" }
    };

- définir le graphique avec sur l'axe y le minimum et le maximum choisi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
plot = $.plot(placeholder, data,
                          $.extend(true, {}, options, {
                              xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
                              yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to}
                          }));

- et, s'il s'agit d'une sélection à partir du bouton, préciser le maximum et le minimum de l'axe Y :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$("#setSelection").click(function () {
        plot.setSelection({ xaxis: { from: 1994, to: 1995 }, yaxis: { from: 5, to: 20 } });
        plot.setupGrid();
        plot.draw();
    });

Il est donc possible de modifier (et zoomer) sur les 2 axes.