flot, changer l'axe Y

Version imprimable

26/09/2012, 12h58
esperal

flot, changer l'axe Y
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:

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:

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é :cry:
Autre essai infructueux, utiliser setupGrid(); :
Code:

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

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:

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

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

Code:

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:

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:

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.