intégration de Google Visualization API
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:
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:
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 :aie:
Merci d'avance !
