Tracer ligne chart.js

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Je suis en train de développer une petit station météo web, qui vient exploiter des valeurs mesurées via une Arduino.

j'essai actuellement de tracer des graphiques avec chart.js pour visualiser l'évolution de la temperature, les points s'affichent sur le graphique à la bonne date mais ne sont pas reliés avec un trait, et quand je met le paramètre "fill" à vrai le dessous de la courbe (non tracée) ne change pas de couleur...

J'ai déjà utilisé plusieurs fois chart.js et je n'ai jamais eu ce problème, j'ai beau retourner le problème dans tous les sens, je ne voit pas d'où vient de souci... je vous met un screenshot du problème et des extraits du code javascript et PHP.

Si quelqu'un a une idée sur comment corriger ce problème (qui vient forcement d'une boulette que j'ai dû écrire...:p)...

(C'est normal que un certain nombre de valeurs sont à 0, j'ai juste mis des valeurs au hasard dans la base pour faire des essais)

Pièce jointe 418101

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<script>
var jour = [];
var temperaturematin = [];
</script>
 
while ( $NbJour2 <= $NbJour1 + 1)
{
    $DateDebut2 = $DateDebut1 ->format('Y-m-d');
    echo $DateDebut2;
    echo "<br>";
 
    $Requete1 = "SELECT MAX(`temperature`) FROM temperature WHERE (`date` = '".$DateDebut2."') and (`heure` between '08:00:00' and '12:00:00')";
    $Retour1 = $bdd->query($Requete1);
    $Resultat1 = $Retour1->fetch();
    $TemperatureMatin1 = $Resultat1['MAX(`temperature`)'];
    if ( $TemperatureMatin1 == '' )
    {
        $TemperatureMatin1 = 0;
    }
 
    echo $TemperatureMatin1;
 
    echo
     "
     <script>
     if ( nombrejour == 0)
     {
     jour[jour.length + 1] =  '".$DateDebut2."' ;
     temperaturematin[temperaturematin.length + 1] =   \"".$TemperatureMatin1." \" ;
     nombrejour = nombrejour + 1;
     }
     else if ( nombrejour >= 1)
     {
     jour[jour.length + 1] =  '".$DateDebut2."' ;
     temperaturematin[temperaturematin.length + 1] =   \"".$TemperatureMatin1." \" ;
     nombrejour = nombrejour + 1;
     }
     </script>
    ";
    $DateDebut1 ->add(new DateInterval('P1D'));
    $NbJour2 = $NbJour2 + 1;
}
<script>
 
 
 
new Chart(document.getElementById("graphique"), {
  type: 'line',
  data: {
    labels: jour,
    datasets: [{
        data: temperaturematin,
        label: "Temperature matin",
        borderColor: "#3e95cd",
        fill: true,
      },
    ]
  },
  options: {
 
    responsive: true,
    maintainAspectRatio: false,
 
    scales: {
                yAxes : [{
                    ticks : {
 
                        min : 0
                    }
                }]
            }
 
  }
});
 
 
</script>

Je vous remercie par avance,

A vous lire

08/10/2018, 19h13
NoSmoking

Bonjour,
rien dans le code que tu nous montres, je parle surtout des options, ne laisse voir un quelconque dysfonctionnement.

Outre le fait que nous n'ayons pas les données réelles je ne vois pas pourquoi la liaison entre les points ne se fait pas. J'ai testé un fichier minimum avec les options que tu présente et je vois bien la liaison.

Si tu pouvais mettre un exemple minimum en ligne qui reproduise le soucis cela serait le top !

2 pièce(s) jointe(s)

Réponse

Bonjour NoSmoking,

Merci de t'intéresser à mon problème.

Je n'ai pas encore de serveur pour héberger l'application (je suis en train de faire un choix d'hébergeur...)

Je viens de faire une autre capture d'écran, ce qui est bizarre c'est que chart.js reconnait bien la valeur 10 comme un numérique mais ne relie pas les points...

Pièce jointe 418221

Sur une autre page où j'ai mis les valeurs dans le tableau de données à la main (dans le paramètre data) cela fonctionne parfaitement.

Pièce jointe 418222

Je viens de corriger deux petites coquilles :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 echo " <script> if ( nombrejour == 0) { jour[jour.length + 1] = '".$DateDebut2."' ; temperaturematin[temperaturematin.length + 1] = \"".$TemperatureMatin1." \" ; nombrejour = nombrejour + 1; } else if ( nombrejour >= 1) { jour[jour.length + 1] = '".$DateDebut2."' ; temperaturematin[temperaturematin.length + 1] = \"".$TemperatureMatin1." \" ; nombrejour = nombrejour + 1; } </script> ";
j'ai supprimé ce qui est en gras...

Bonne soirée,
Maxime

08/10/2018, 21h32
NoSmoking

Tu as visiblement un soucis avec le format de tes données, je n'ai pas réussi à le reproduire.
Il faudrait que tu regardes le code HTML généré (CTRL + U) il y aura peut être une indication.

Oui, a priori le problème doit venir d'un de mes tableaux "temperature matin" et/ou "jour"...

Ci-dessous le HTML généré, je ne voit rien d'anormal à priori, peut-être que tes yeux certainement plus expert que les miens en javascript verront quelque chose..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
 
<script>
 
var temperaturematin = [];
var nombrejour = 0;
var jour = [];
 
 
	 <script> 
	 if ( nombrejour == 0)
	 {
	 jour[jour.length] =  '2018-09-23' ;
	 temperaturematin[temperaturematin.length] =   0 ;
	 nombrejour = nombrejour + 1;
	 }
	 else if ( nombrejour >= 1)
	 {
	 jour[jour.length + 1] =  '2018-09-23' ;
	 temperaturematin[temperaturematin.length + 1] =  0 ;
	 nombrejour = nombrejour + 1;
	 }
	 </script>
 
	 <script> 
	 if ( nombrejour == 0)
	 {
	 jour[jour.length] =  '2018-09-24' ;
	 temperaturematin[temperaturematin.length] =   10 ;
	 nombrejour = nombrejour + 1;
	 }
	 else if ( nombrejour >= 1)
	 {
	 jour[jour.length + 1] =  '2018-09-24' ;
	 temperaturematin[temperaturematin.length + 1] =  10 ;
	 nombrejour = nombrejour + 1;
	 }
	 </script>

09/10/2018, 10h44
NoSmoking

C'est plutôt ce que donne ton tableau de données qu'il aurait été intéressant d'avoir.
09/10/2018, 21h57
dommax54

1 pièce(s) jointe(s)
Bonsoir,

J'ai finalement trouvé d'où venait le souci.

Le problème venait de la façon de remplir les tableaux. En utilisant la méthode Array.push() ça fonctionne parfaitement

J'ai cependant du mal à saisir la différence..

La correction :
Code:

1 2 3 4 5 6 7 8 9 10 11 echo " <script> jour.push('".$DateDebut2."'); temperaturematin.push(".$TemperatureMatin1.") </script> ";
Pièce jointe 418514

Merci encore de votre aide !

Au plaisir,
Maxime

Citation:

Le problème venait de la façon de remplir les tableaux.

tu mélanges allégrement tout dans ton code PHP, il serait plus sain que tu initialises tes tableaux en PHP et que tu ne fasses qu'un écho de ceux-ci dans la partie script
Code:

1 2 3 4 5 6 7 8 9 while( ... ) $jours[] = ... ; $temperatures[] = ... ; } echo "<script>" echo "var tabJours = ", json_encode($jours), "\n"; echo "var tabTemperatures = ", json_encode($temperatures), "\n"; // côté client ici tes données seront directement exploitables echo "</script>"