Discussion :

[dommax54]

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)

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

[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 !

[dommax54]

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



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.




Je viens de corriger deux petites coquilles :

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

[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.

[dommax54]

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 :

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

[NoSmoking]

C'est plutôt ce que donne ton tableau de données qu'il aurait été intéressant d'avoir.