Discussion :

[zaboug]

Bonjour à tous,

je suis en train de développer une appli Web avec le framework wicket et je tente d'y intégrer des graphiques issus de l'API de Google : Google Visualization API.

Pour ce faire, j'ai suivi le tuto d'Alex Parvulescu qui montre comment faire une intégration Wicket, Google Visualization API et google Doc.
J'ai testé, ça marche bien. Mais dans mon appli, je n'utiliserai pas google doc, et quand je modifie la fonction javascript pour ne plus utiliser la datasource googleDoc, bah ça coince...

voici la fonction javascript qui fonctionne bien (ie. qui affiche un graph dans le div) :

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
Wicket.visualizations = {}
 
function WicketVisualization(id, url) {
	Wicket.visualizations[id] = this;
	//wicket component id
	this.id = id;
	// url based query based on the chart rendering, this is standart for all the chart types
	this.query = new google.visualization.Query(url);
	// a bunch of hardcoded chart options
	this.options = { width : 800, height : 600, title : 'Test titre' };
 
	this.doDraw = function() {
		var self = this;
		var handleQueryResponse = function(response) {
			if (response.isError()) {
				alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
				return;
			}
			var data = response.getDataTable();
 
			var container = document.getElementById(self.id);
			// if you plan to support other chart types, you need to change the following
			new google.visualization.LineChart(container).draw(data, self.options);
		}
		// Send the query with a callback function.
		this.query.send(handleQueryResponse);
	}
}

Et voici comment j'ai modifié cette fonction pour ne plus utiliser google Doc :

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
Wicket.visualizations = {}
 
function WicketVisualizationWithoutURL(id){
	Wicket.visualizations[id] = this;
	//wicket component id
	this.id = id;
	this.data = new google.visualization.DataTable();
	this.data.addColumn('string', 'Topping');
	this.data.addColumn('number', 'Slices');
	this.data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1], 
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);
 
	this.options = { width : 300, height : 200, lineSize : 4, pointSize : 6 };
 
	this.doDraw = function(){
		var self = this;
 
	    // a bunch of hardcoded chart options
		var container = document.getElementById(self.id);
		new google.visualization.LineChart(container).draw(self.data, self.options);
	}
}

Et là, ça ne fonctionne pas : il n'y a aucun graph qui s'affiche. Cela dit, j'ai aucune erreur non plus...

Je suis vraiment pas experte en Javascript, alors toute aide serait la bienvenue pour m'aider à comprendre ce qui va de travers

Merci d'avance !

[zaboug]

y'a visiblement pas foule sur ce sujet, mais si quelqu'un qui passe a ne serait ce qu'une idée pour faire avancer le schmilblik ça serait chouette car j'en suis toujours au point mort dans la résolution du problème

[NoSmoking]

Bonjour,
je ne saisie pas pourquoi ne pas tu ne le faire en direct attendu que tu ne fais pas de requête.

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
function drawChart(id){
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);
  var options = { width : 300, height : 200, lineSize : 4, pointSize : 6 };
  // a bunch of hardcoded chart options
  var container = document.getElementById( id);
  new google.visualization.LineChart(container).draw( data, options);
}

[zaboug]

euh bah parce que je savais pas que c'était à cause de la requête que c'était fait indirectement
En fait j'ai chopé les code sur un tuto, et j'avais pas bien saisi toutes ses subtilités. Avec ton code et une petite modif dans le code Java qu'il y a derrière (framework Wicket oblige), ça marche maintenant très bien.

Merci du coup de pouce