remplir un tableau avec une boucle while

Version imprimable

Bonsoir,
je voudrai générer un camembert en php. J'ai ce code que j'ai trouvé sur google.charts et qui fonctionne très bien:
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 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
les valeurs du tableau "data" vont être récupérée depuis une table SQL dans mon cas. Pour commencer , je voudrai alors faire en sorte que ce tableau soit remplie à l'aide d'une boucle while (puisque le nombre de lignes et variable).
j'ai cherché un peu sur google, mais quelque soit la modification que j'apporte au script, le navigateur me renvoie une page banche.

comment faire?
merci

02/05/2013, 16h06
N1bus

Il existe des super librairies pour ça dont JpGraph

Et il y a un tas d'exemples ici : http://jpgraph.net/doc/howto.php
02/05/2013, 16h14
supcomingenieur

merci mais je préfère travailler avec google charts. Les graphes sont magnifiques et puis si on a des codes tout prêt pourquoi se casser la tête avec une autre librairie

Existe-t-il au moins une autre librairie pour réaliser de tels graphiques, Jpgraph fait des graphes vraiment trop laid par rapport à google, je cherche des graphes un peu plus élégants.

Merci beaucoup.
02/05/2013, 17h07
Torgar
Parce que l'autre bibliothèque propose aussi des codes prêt à l'emploi ? Mais passons...

C'est pas compliqué ton histoire, il te suffit de générer ceci par du PHP :
Code:

1 2 3 4 5 6 7 8 var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]);
Comme tu l'as dit, il te faut une boucle while qui parcourt un jeu d'enregistrement. Je ne vois pas où tu butes :koi:

À la limite, si t'es disposé à le faire, montre nous ton code PHP qu'on voit ce qui cloche.

voici le code que j'ai fais, le problème c'est que je n'ai même pas de messages d'erreur, la page web est tout simplement blanche.

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
<?php
$cnx=mysql_connect("localhost","root","Orange2424");
$db=mysql_select_db("OrangeTunisie");
mysql_set_charset('utf8'); // encodage de saisie dans la base
?>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Mask_Length', 'Number'],
        $sql = 'select * from Mask_Statistics';
        $req = mysql_query($sql);
 
        while($data = mysql_fetch_assoc($req))
            {
              [$data[Mask_Length],  $data[Percentage]],
            } 
        ]);
 
        var options = {
          title: 'My Daily Activities'
        };
 
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

02/05/2013, 17h38
N1bus
il manque les balises <?php pour encadrer ta boucle php dans le Javascript
et à mon avis il faut déplacer ces instruction en bas de page :
Code:

1 2 3 4 <script type="text/javascript"> var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); </script>
Pour que le code JS soit executé car là il est dans le <head> mais la div n'apparait qu'après

Et comme ça ?

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
<?php
$cnx = mysql_connect("localhost","root","Orange2424");
$db = mysql_select_db("OrangeTunisie");
mysql_set_charset('utf8'); // encodage de saisie dans la base
?>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Mask_Length', 'Number'],
		<?php
        $sql = 'select * from Mask_Statistics';
        $req = mysql_query($sql);
 
        while($data = mysql_fetch_assoc($req)) {
            echo '[' . $data['Mask_Length'] . ',  ' . $data['Percentage'] . '],';
            } 
		?>
		]);
 
        var options = {
          title: 'My Daily Activities'
        };
 
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Au passage :
- y a pas de doctype
- faut laisser tomber les fonctions mysql_* au profit de PDO

02/05/2013, 17h48
supcomingenieur

non ca ne marche toujours pas!! j'ai fait quelques recherches et je ne crois pas que le fait d'inclure un code PHP dans la déclaration du tableau data soit toléré par google.
je crois qu'il faut faire un code où la récupération des données de la table sql soit séparée du code html puis on fait appel àux addColum et SetValue de google API.

voilà la source http://bohemiawebsites.com/Google-Pi...Using-PHP.html
02/05/2013, 17h57
Torgar

Citation:

Envoyé par supcomingenieur

j'ai fait quelques recherches et je ne crois pas que le fait d'inclure un code PHP dans la déclaration du tableau data soit toléré par google.

Gné ? :koi: 8O :cry: :? :calim2:
On inclus pas du code PHP dans la déclaration du tableau data. Le PHP est interprété côté serveur, donc PHP crée la page avec le tableau data alimenté avec les informations de la requête, puis envoie la page au navigateur qui lui interprète le JavaScript.

C'est à cette étape seulement que Google intervient (si je puis dire). Google sait même pas que tu as utilisé du PHP pour alimenter le tableau.

Pour ta page blanche, regarde les log, je ne cesserais de le répéter !!!

pour le fichier error.log voilà l'erreur retournée
Code:

1 2 [Thu May 02 16:53:18 2013] [error] [client 127.0.0.1] File does not exist: /var/www/jquery-1.6.2.min.js, referer: http://localhost/test.php [Thu May 02 16:53:18 2013] [error] [client 127.0.0.1] File does not exist: /var/www/jquery-1.6.2.min.js, referer: http://localhost/test.php
j'ai trouvé ce poste sur ce forum qui utilise aussi google charts.
d'après ce que j'ai compris la personne concernée a récupérée les données SQL dans un objet JSON puis a crée le graphe

voici le lien http://www.developpez.net/forums/d12...hart-php-json/

j'ai fais la même chose, la page n'est plus vide elle m'affiche le contenu de la table SQL !

02/05/2013, 18h07
Torgar

Il te manque l'inclusion de jQuery visiblement. Ce qui est d'autant plus bizarre.

C'est le code complet de ta page que tu nous montre là ?

voila mon code complet:
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 <?php mysql_connect ('localhost','root','Orange2424'); mysql_select_db ('OrangeTunisie'); $val2=mysql_query("select * from Mask_Statistics"); while($row2=mysql_fetch_array($val2)) { $rows[] = $row2; } print json_encode($rows); ?> <html> <head>  <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "index.php", dataType:"json", async: false }).responseText; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240}); } </script> </head> <body>  <div id="chart_div"></div> </body> </html>
voici la sortie de la page web

Code:

[{"0":"\/10","Mask_Length":"\/10","1":"8","Number":"8","2":"0,006 %","Percentage":"0,006 %"},{"0":"\/11","Mask_Length":"\/11","1":"37","Number":"37","2":"0,030 %","Percentage":"0,030 %"},{"0":"\/12","Mask_Length":"\/12","1":"115","Number":"115","2":"0,093 %","Percentage":"0,093 %"},{"0":"\/13","Mask_Length":"\/13","1":"205","Number":"205","2":"0,165 %","Percentage":"0,165 %"},{"0":"\/14","Mask_Length":"\/14","1":"286","Number":"286","2":"0,230 %","Percentage":"0,230 %"},{"0":"\/15","Mask_Length":"\/15","1":"557","Number":"557","2":"0,448 %","Percentage":"0,448 %"},{"0":"\/16","Mask_Length":"\/16","1":"2558","Number":"2558","2":"2,059 %","Percentage":"2,059 %"},{"0":"\/17","Mask_Length":"\/17","1":"2223","Number":"2223","2":"1,789 %","Percentage":"1,789 %"},{"0":"\/18","Mask_Length":"\/18","1":"3537","Number":"3537","2":"2,847 %","Percentage":"2,847 %"},{"0":"\/19","Mask_Length":"\/19","1":"6800","Number":"6800","2":"5,473 %","Percentage":"5,473 %"},{"0":"\/2","Mask_Length":"\/2","1":"1","Number":"1","2":"0,001 %","Percentage":"0,001 %"},{"0":"\/20","Mask_Length":"\/20","1":"11462","Number":"11462","2":"9,225 %","Percentage":"9,225 %"},{"0":"\/21","Mask_Length":"\/21","1":"11114","Number":"11114","2":"8,945 %","Percentage":"8,945 %"},{"0":"\/22","Mask_Length":"\/22","1":"12771","Number":"12771","2":"10,278 %","Percentage":"10,278 %"},{"0":"\/23","Mask_Length":"\/23","1":"12126","Number":"12126","2":"9,759 %","Percentage":"9,759 %"},{"0":"\/24","Mask_Length":"\/24","1":"60430","Number":"60430","2":"48,634 %","Percentage":"48,634 %"},{"0":"\/8","Mask_Length":"\/8","1":"14","Number":"14","2":"0,011 %","Percentage":"0,011 %"},{"0":"\/9","Mask_Length":"\/9","1":"10","Number":"10","2":"0,008 %","Percentage":"0,008 %"}]

voici le dernier contenu du fichier log

Code:

[Thu May 02 17:09:32 2013] [error] [client 127.0.0.1] script '/var/www/index.php' not found or unable to stat, referer: http://localhost/test.php

mon dossier /var/www ne contient plus de fichier index.php je l'ai supprimé j'ai juste le fichier test.php que je vous ai posté

03/05/2013, 09h54
Torgar

Ne va pas plus vite que la musique et fixe toi sur la méthode à utiliser.

Tu changes de méthode entre deux messages en prenant des codes un peu partout, c'est pas comme ça que ça marche et c'est pas comme ça que tu y arriveras !

Ici, tu utilises de l'ajax pour charger tes données, c'est peut-être pas utile dans ton cas et c'est pas ce qu'il y a de plus simple quand on débute dans la programmation Web.

Donc revient à la version initiale, refait un essai en essayant de comprendre ce que tu fais. Ensuite si ça fonctionne pas, tu pourras venir nous voir.

Mais il va falloir apprendre sinon tu progresseras pas !