Discussion :

[tengalice49]

J'ai de nouveau une question concernant chart.js, est-il possible de mettre plusieurs donnees dans un graphique a l'aide d'un foreach?

J'aimerais faire quelque chose comme cela:

Code php :

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
 <?php foreach($data['data'] as $reg){
 
 
        $date = date(DATE_RFC2822, $reg['time']);
        $heure = substr($date, 17,2);
        $heure .= '.';
        $heure .= substr($date, 20,2);    //ecrit l'heure par exemple: 11.13 signifie qu'il est 11 heures 13 minutes
        echo $date;
 
        $alt_str = substr($data, 12, 4);
        $alt_int = hexdec($alt_str);
        echo $alt_int; //valeur de l'altitude
 ?>
<div class="graph">
	<h2>Elevation graph</h2>
	<div>
		<canvas id="myChart"></canvas>
		<script type="text/javascript">
		var ctx = document.getElementById('myChart').getContext('2d');
		var myChart = new Chart(ctx, {
		  type: 'line',
		  data: {
		    labels: [<?php echo $heure;	?>], //ici j'aimerais que ca entre toutes les valeurs "d'heures" contenues dans le tableau
		    datasets: [{
		      label: 'Elevation',
		      data: [<?php echo $alt_int;  ?>], //pareil ici pour les valeurs d'altitude
		      backgroundColor: "rgba(153,255,51,0.4)"
		    }]
		  }
		});
		</script>
	</div>
</div>

J'ai reduit un peu le code pour n'afficher que les infos essentielles mais en gros je souhaite realiser un graphique de l'altitude en fontion du temps.
J'ai 100 valeurs d’altitude et de temps qui sont rafraichie regulierement et donc je ne peux pas les rentrer "a la main". Il faut que ca soit automatique.
Le probleme c'est qu'en faisant comme sur le code ci-dessus, je n'obtiens qu'une seule valeur, le foreach ne remplit pas les valeurs comme il le ferait pour un tableau, des idees?

[tengalice49]

J'ai resolu ce probleme en declarant les choses comme ceci (si jamais qqn a ce probleme):

Code php :

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

1
2
3
4
5
<?php
     $coords[] = ['lat' => $lat_result, 'long' => $long_result];
     $graph[] = ['time' => $heure, 'alt' => $alt_int];
     }
    ?>

Code html :

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
<div class="graph">
	<h2>Elevation graph</h2>
	<div>
		<canvas id="myChart"></canvas>
		<script type="text/javascript">
                var ctx = document.getElementById('myChart').getContext('2d');
                var myChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                    labels: [
                        <?php
                        foreach($graph as $graph_elevation){
                                $graph_elevation['time'] .= ',';
                                echo $graph_elevation['time'];
                        }       
                ?>],
                    datasets: [{
                        label: 'Elevation',
                        data: [
                        <?php
                                foreach($graph as $graph_elevation){
                                        $graph_elevation['alt'] .= ',';
                                        echo $graph_elevation['alt'];
                        }       
                ?>],
                    backgroundColor: "rgba(72,141,208,0.4)"
                    
                    }]
                  }
                });
                </script>
	</div>
</div>

Mais cela m'apporte un nouveau soucis, en regardant bien l'axe des abscisses on s'apercoit que les donnees sont dans le mauvais ordre! Comment faire pour "inverser" cela? Je suppose qu'il existe une fonction PHP qui permet de changer le sens de lecture d'un tableau mais je ne la trouve pas :/

[NoSmoking]

Il aurait mieux valu ouvrir une autre discussion pour nous faire part de ton soucis, ceci étant Fait

Comment faire pour "inverser" cela?

• PHP : array_reverse
• JS : Array.prototype.reverse()

[tengalice49]

Salut,

Oui effectivement desole :/

Je n'ai pas reussi avec array_reverse en PHP, je vais essayer en JS, merci.

[tengalice49]

Voici ce que j'ai ecris:

Code php :

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
var myChart = new Chart(ctx, {
			type: 'line',
		  	data: {
		    labels: [
			<?php
        		foreach($graph as $graph_elevation){
        			$graph_elevation['time'] .= ',';
        			$reverse_graph_elevation = array_reverse($graph_elevation['time']);
        			echo $reverse_graph_elevation;
        		}	
        	?>],
		    datasets: [{
		    	label: 'Elevation',
		    	data: [
		    	<?php
	        		foreach($graph as $graph_elevation){
	        			$graph_elevation['alt'] .= ',';
	        			echo $graph_elevation['alt'];
        		}	
        	?>],
		    backgroundColor: "rgba(72,141,208,0.4)"
 
		    }]
		  }
		});

La partie data (le 2e foreach) s'affiche bien (car elle n'est pas inversee pour le moment) mais la partie labels ne retourne rien:


Je suppose que j'ai mal utilise le array_reverse() mais du coup je ne vois pas comment faire autrement

[NoSmoking]

Pourquoi ne pas utiliser la même boucle pour initialiser tes données, par exemple

Code php :

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

1
2
3
4
5
6
<?php
foreach($graph as $elem){
  $tab_time[] = $elem['time'];
  $tab_alt [] = $elem['alt'];              
}	
?>

il te suffit ensuite d'utiliser les tableaux au bon endroit.

Le mieux serait quand même mieux que tu récupères les données triées dans le bon ordre.