[PHP 5.3] Passer un tableau PHP en Javascript [Résolu]

damalaan · 28/11/2011, 13h49

Bonjour,

je tente d'utiliser l'api Google Chart interactive.

il faut donc que je récupère un tableau php : par exemple j'ai ça :

Code :

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

1
2
3
<?php
$tableau=array('Mushrooms'=>3, 'Onions'=>1, 'Olives'=>1, 'Olives'=>1, 'Pepperoni'=>2);
?>

il faut que je passe ce tableau en js pour obtenir un code comme celui ci :

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
<html>
  <head>
 
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
 
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
 
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
 
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
 
      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'serie1');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1], 
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);
      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':1000,
                     'height':600};
 
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
 
  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:1000; height:600"></div>
  </body>
</html>

ce code vient d'un exemple google, mais pour bien comprendre le truc je voudrais déjà passer mon tableau php au niveau du data.addRows (montableau)!!

j'ai donc tenté ce code mais en vain :

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
<?php
$tableau=array('Mushrooms'=>3, 'Onions'=>1, 'Olives'=>1, 'Olives'=>1, 'Pepperoni'=>2);
?>
 
<html>
  <head>
  <script type="text/javascript">
var tableau = <? php echo json_encode($tableau) ?>;
 
</script>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
 
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
 
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
 
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
 
      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'serie1');
	  data.addRows(tableau);
      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':1000,
                     'height':600};
 
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
 
  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:1000; height:600"></div>
  </body>
</html>

merci d'avance de vos bons conseil

stealth35 · 28/11/2011, 14h12

un coup de json_encode et c'est bon

damalaan · 28/11/2011, 14h30

Citation:

un coup de json_encode et c'est bon

c'est bien ce que j'ai essayé de faire mais il y a quelque chose qui ne fonctionne pas!!

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
<?php
$tableau=array('Mushrooms'=>3, 'Onions'=>1, 'Olives'=>1, 'Olives'=>1, 'Pepperoni'=>2);
?>
 
<html>
  <head>
  <script type="text/javascript">
var tableau = <? php echo json_encode($tableau) ?>;
 
</script>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
 
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
 
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
 
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
 
      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'serie1');
	  data.addRows(tableau);
      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':1000,
                     'height':600};
 
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
 
  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:1000; height:600"></div>
  </body>
</html>

stealth35 · 28/11/2011, 14h39

t'as un espace en trop entre le <? et le php

damalaan · 28/11/2011, 14h47

effectivement, c'est corrigé mais toujours rien!!! page blanche

stealth35 · 28/11/2011, 14h48

Citation:

Envoyé par elnipal

effectivement, c'est corrigé mais toujours rien!!! page blanche

montre la source HTML

damalaan · 28/11/2011, 15h01

voici le code de la page générée :

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
79
80
81
82
83
84
85
86
87
88
 
 
 
<html>
 
  <head>
 
  <script type="text/javascript">
 
var tableau = {"Mushrooms":3,"Onions":1,"Olives":1,"papaye":1,"Pepperoni":2};
 
 
 
</script>
 
    <!--Load the AJAX API-->
 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 
    <script type="text/javascript">
 
 
 
      // Load the Visualization API and the piechart package.
 
      google.load('visualization', '1.0', {'packages':['corechart']});
 
 
 
      // Set a callback to run when the Google Visualization API is loaded.
 
      google.setOnLoadCallback(drawChart);
 
 
 
      // Callback that creates and populates a data table, 
 
      // instantiates the pie chart, passes in the data and
 
      // draws it.
 
      function drawChart() {
 
 
 
      // Create the data table.
 
      var data = new google.visualization.DataTable();
 
      data.addColumn('string', 'Topping');
 
      data.addColumn('number', 'serie1');
 
	  data.addRows(tableau);
 
      // Set chart options
 
      var options = {'title':'How Much Pizza I Ate Last Night',
 
                     'width':1000,
 
                     'height':600};
 
 
 
      // Instantiate and draw our chart, passing in some options.
 
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
 
      chart.draw(data, options);
 
    }
 
    </script>
 
  </head>
 
 
 
  <body>
 
<!--Div that will hold the pie chart-->
 
    <div id="chart_div" style="width:1000; height:600"></div>
 
  </body>
 
</html>

a priori c'est le format du tableau qui coince :
avec le json_encode j'obtiens donc :

Code :

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

{"Mushrooms":3,"Onions":1,"Olives":1,"papaye":1,"Pepperoni":2}

alors qu'il me faut ça :

Code :

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

var tableau = [['Mushrooms', 3],['Onions', 1],['Olives', 1],['Zucchini', 1],['Pepperoni', 2]];

avec ce dernier code en faisant ensuite

Code :

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

data.addRows(tableau);

ça fonctionne

stealth35 · 28/11/2011, 15h07

c'est pas le même type de tableau que tu montres
en PHP ca donne :

Code :

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

1
2
3
4
5
6
7
$tableau=array(
    array('Mushrooms', 3), 
    array('Onions', 1), 
    array('Olives', 1), 
    array('Olives', 1), 
    array('Pepperoni', 2)
);

damalaan · 28/11/2011, 15h21

ok c'est bon, c'est un tableau de tableau!

le code qui fonctionne :

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
<?php
$tableau = array(
				array('Mushrooms',3),
				array('Onions',1),
				array('Olives',1),
				array('papaye',1),
				array('Pepperoni',2)
				);
 
echo json_encode($tableau);
?>
 
<html>
  <head>
  <script type="text/javascript">
var tableau = <?php echo json_encode($tableau) ?>;
 
</script>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
 
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
 
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
 
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
 
      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'serie1');
	  data.addRows(tableau);
      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':1000,
                     'height':600};
 
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
 
  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:1000; height:600"></div>
  </body>
</html>

merci bcp

28/11/2011, 14h12	#2
stealth35 Modérateur Inscription : septembre 2010 Messages : 7 219 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 7 219 Points : 8 598 Points : 8 598	un coup de json_encode et c'est bon __________________ http://blog.stealth35.com/
	00

28/11/2011, 14h39	#4
stealth35 Modérateur Inscription : septembre 2010 Messages : 7 219 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 7 219 Points : 8 598 Points : 8 598	t'as un espace en trop entre le <? et le php __________________ http://blog.stealth35.com/
	10

28/11/2011, 14h47	#5
damalaan Membre actif David Inscription : septembre 2007 Messages : 353 Détails du profil Informations personnelles : Nom : David Localisation : France Informations professionnelles : Secteur : Agroalimentaire - Agriculture Informations forums : Inscription : septembre 2007 Messages : 353 Points : 195 Points : 195	effectivement, c'est corrigé mais toujours rien!!! page blanche
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email