Création de graphique, ajouter des paramètres

Version imprimable

Bonjour à tous,

J'utilise le code suivant afin d'afficher un diagramme. Cela marche 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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()
	{
		// Create and populate the data table.
		var data = new google.visualization.DataTable();
		var raw_data = [['Etudiants'
		<?php 
                        for($i=0;$i<21;$i++ )
                        {
                                if( isset($this -> statsNotes['global']['QCM'][$i]) )
                                {
                                        echo ','.$this -> statsNotes['global']['QCM'][$i] ;
                                }
                                else {
                                        echo ',0' ;
                                }
                        }
                ?>
		]];
		var notes = [0, 1, 2, 3, 4, 5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
 
		data.addColumn('string', 'Year') ;
		for (var i = 0; i  < raw_data.length; ++i) {
			data.addColumn('number', raw_data[i][0]);    
		}
 
		data.addRows(notes.length);
 
		for (var j = 0; j < notes.length; ++j) {    
			data.setValue(j, 0, notes[j].toString());    
		}
		for (var i = 0; i  < raw_data.length; ++i) {
			for (var j = 1; j  < raw_data[i].length; ++j) {
				data.setValue(j-1, i+1, raw_data[i][j]);    
			}
		}  
		// Create and draw the visualization.
		new google.visualization.ColumnChart(document.getElementById('chart_div')).
		draw(data,{title:"", legend: 'none', width:900, height:400, hAxis: {title: ""}} );
}
</script>
<div id="chart_div"></div>

J'ai cependant cherché à modifier le code pour ajouter des paramètres, j'ai donc fait les modifications suivantes, mais cela ne fonctionne pas... Je dois avoir un soucis de syntaxe, quelqu'un serait-il susceptible de m'aider ?

Code:

1
2
3
4
5
6
7
8
google.setOnLoadCallback(drawChart('param');
 
	function drawChart(divId)
	{
 
[...]
 
new google.visualization.ColumnChart(document.getElementById(divId)).

Merci par avance,

Bonjour, décidément on en parle beaucoup en se moment, il s'agit d'un problème de closure, c'est sur objet appel externe et domready

la solution est ci dessous
Code:

1 2 3 4 5 6 7 8 google.setOnLoadCallback( (function( param){ drawChart( param); })('Paramètre passé à la fonction anonyme!') ); function drawChart( param) { alert( param); }

05/10/2011, 09h22
albedo0
Merci pour ta réponse NoSmoking, néanmoins je n'ai pas réussi à la faire fonctionner...

Dès que je remplace :

Code:

google.setOnLoadCallback(drawChart);

par :
Code:

1 2 3 4 5 google.setOnLoadCallback( (function( param){ drawChart( param); })('Paramètre passé à la fonction anonyme!') );
le graphique ne s'affiche plus avant même que je ne me mette à jouer avec les paramètres... Je n'ai peut être juste rien compris. Il est vrai je suis pas super à l'aise avec JS et notamment avec le DOM...

D'ailleurs dans la mesure où je souhaite mettre plusieurs paramètres, ça risque d'être compliqué... ;-)

effectivement, setOnLoadCallback, ne supporte apparemment qu'une adresse de fonction.

Dans ce cas il faut revenir au plus simple qui est le passage par une fonction tampon, exemple pris sur le site de l'API

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
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      // definition de la fonction que l'on va mettre dans setOnLoadCallback
      function initGraph(){
        var where = 'chart_div';
        drawChart( where);
      }
      // on reference initGraph fonction definie ci dessus
      google.setOnLoadCallback( initGraph);
      // la fonction avec prise en compte des parametres
      function drawChart( where) {
        var oDest = document.getElementById( where);
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(5);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 11);
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 2);
        data.setValue(2, 0, 'Commute');
        data.setValue(2, 1, 2);
        data.setValue(3, 0, 'Watch TV');
        data.setValue(3, 1, 2);
        data.setValue(4, 0, 'Sleep');
        data.setValue(4, 1, 7);
 
        var chart = new google.visualization.PieChart( oDest);
        chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

l'autre façon de procéder est de mettre l'appel à ta fonction en fin de document, dans ce cas il n'est plus besoin de setOnLoadCallback

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
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      // la fonction avec prise en compte des parametres
      function drawChart( where) {
        var oDest = document.getElementById( where);
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(5);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 11);
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 2);
        data.setValue(2, 0, 'Commute');
        data.setValue(2, 1, 2);
        data.setValue(3, 0, 'Watch TV');
        data.setValue(3, 1, 2);
        data.setValue(4, 0, 'Sleep');
        data.setValue(4, 1, 7);
 
        var chart = new google.visualization.PieChart( oDest);
        chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
    <script type="text/javascript">
        var where = 'chart_div';
        drawChart( where);
    </script>
  </body>
</html>

06/10/2011, 09h36
albedo0

Tout ça me semble très clair ! Merci beaucoup, je vais tester ça !

-> Et en plus ça marche !