Insertion données dans graphe

Version imprimable

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:

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?

1 pièce(s) jointe(s)

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

Code:

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

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
<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 :/
Pièce jointe 395309

11/07/2018, 14h14
NoSmoking
~~Il aurait mieux valu ouvrir une autre discussion pour nous faire part de ton soucis, ceci étant~~ Fait

Citation:

Comment faire pour "inverser" cela?
- PHP : array_reverse
- JS : Array.prototype.reverse()
11/07/2018, 14h17
tengalice49

Salut,

Oui effectivement desole :/

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

1 pièce(s) jointe(s)

Voici ce que j'ai ecris:

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
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:
Pièce jointe 395681

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

12/07/2018, 17h09
NoSmoking
Pourquoi ne pas utiliser la même boucle pour initialiser tes données, par exemple
Code:

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.