Discussion :

[dguil]

Bonjour,

Je débute et mon vocabulaire est peut être approximatif.

Je souhaite créer un graphique multi-séries (à 5 séries).

Les données de deux des séries proviennent d'une requête SQL, les données des trois autres séries sont issus d'une fonction mathématique.
Pour information, voici la fonction : y = (1*2.7) / (1+(x/100)*2.7)
Dans cette fonction, il y a un paramètre (appelé 'ps') que j'ai délibérément fixé à 2.7. Parfois j'ai besoin de changer la valeur de ps (2.5, 2.6 ...), c'est là que je rencontre mon problème ou plutôt que je ne sais pas vers où m'orienter.

Lorsque je crée le graphique, je n'ai aucun problème. Il a la forme que je souhaite. Voici le code que j'utilise pour tracer une des trois série correspondant à l'équation présentée ci-avant :

Code js :

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
17
18
{
                  label: 'Saturation 100%',
                  yAxisID: 'first-y-axis',
                  borderColor: 'white',
                  radius: 0,
                  borderWidth: 1,
                  lineTension: 0,
                  data: [                  
                        <?php
                        $i = number_format($wMin,0)-4;
                        for($i; $i < number_format($wMax,0)+4; ++$i)
                        {
                          $j = (1*2.7)/(1+(($i/100)*2.7));
                          echo ('{x: '.$i.', y: '.$j.'},');
                        }     
                        ?>
                        ]
                  },

Afin de permettre à l'utilisateur de modifier la forme de cette courbe en changeant la valeur de ps (le 2.7 qui est présent dans le code ci-avant) j'ai créé un input dans le code html. Au changement de la valeur de ce champ je récupère le contenu avec le code suivant :

Code js :

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

1
2
3
$('input#ps').change(function(){
var ps=document.getElementById("ps").value
alert('ps = '+ps);

Le message affiché par 'alert' correspond bien à la nouvelle valeur de ps rentrée par l'utilisateur dans l'input.

Mon problème apparait maintenant, comment modifier le contenu du code après : data: [ Code à modifier ] pour utiliser la valeur nouvelle valeur de ps ?

J'ai créé une nouvelle variable : contenant le code qui défini chaque point du graphique (x et y résultant de l'équation mathématique présentée avant) mais cela ne fonctionne pas.
Exemple :

Code js :

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

var donneGraph = '{x: 0, y: 1.6},{x: 50, y: 1.6}';

Puis j'ai inséré cette variable de cette façon :

Code js :

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

data: [ donneGraph ]

Mais cela ne fonctionne pas.

Avez-vous une solution ou une idée vers où je devrais chercher ?

En dernier recours j'ai la possibilité de stocker 'ps' dans une variable php et de recharger toute ma page en remplaçant le 2.7 inscrit en dur par une variable.

[Showie]

Salut,

Essai comme ceci

Code :

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

1
2
3
 
var donneGraph = [{x: 0, y: 1.6},{x: 50, y: 1.6}];
data: donneGraph

[dguil]

Merci Showie, ce sont les quote qui étaient l'erreur.

Modification du message :

Pour poser ma question j'avais simplifié la définition de la variable donneGraph en lui attribuant un contenu fixe. Dans les faits je dois construire ce contenu car il est fonction de l'équation que je cite dans mon premier poste.

Pour construire le contenu de cet variable j'utilise le code suivant (à terme je vais mettre une boucle car ce sera basé sur une autre équation mathématique)

Code js :

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

1
2
3
4
5
6
7
8
9
10
 
        var x=31
        var donneGraph = '[';
        var y = (1*ps)/(1+((x/100)*ps));
        donneGraph = donneGraph+'{x: '+x+', y: '+y+'},';
 
        x=36;
        y = (1*ps)/(1+((x/100)*ps));
        donneGraph = donneGraph+'{x: '+x+', y: '+y+'}';
        donneGraph = donneGraph+']';

Avec ce code je retombe à la case départ sauf qu'entre temps Showie m'a éclairé. Ci-dessous j'ai affiché le contenu de la variable avec le code ci-dessus qui construit le contenu de la variable et après le '-' le contenu de la variable avec la correction apportée par Showie.



Je comprends qu'il s'agit d'un problème de format de la variable qui avec mon code l'interprète comme String.
Je ne vois pas comment construire la variable autrement car je concatène des caractères et des variables.

[NoSmoking]

Bonjour,
ta variable donneGraph est un Array d'objet, il te faut utiliser les méthodes liées aux tableaux en JS.

En gros cela peut donner :

Code :

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

1
2
3
4
5
6
7
8
9
var donneGraph = [];
donneGraph.push({
  x: 10,
  y: 50
});
donneGraph.push({
  x: 24,
  y: 125
});

[dguil]

Merci NoSmoking, cela fonctionne bien.

Le graphique s'adapte automatiquement à la valeur de 'ps' quand l'utilisateur la change.