Création de graphique, ajouter des paramètres

**albedo0** · 04/10/2011, 16h22

Bonjour à tous,

J'utilise le code suivant afin d'afficher un diagramme. Cela marche très bien.

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
<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 :

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

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,

**NoSmoking** · 04/10/2011, 19h25

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 :

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

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);
}

**albedo0** · 05/10/2011, 09h22

Merci pour ta réponse NoSmoking, néanmoins je n'ai pas réussi à la faire fonctionner...

Dès que je remplace :

Code :

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

google.setOnLoadCallback(drawChart);

par :

Code :

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

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é... ;-)

**NoSmoking** · 05/10/2011, 21h41

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 :

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
<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 :

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
<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>

**albedo0** · 06/10/2011, 09h36

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

-> Et en plus ça marche !

Création de graphique, ajouter des paramètres [Autres]

APIs Google

Discussions similaires

Partager

Partager