L'API Google Visualization est une interface de programmation en langage JavaScript destinée à l'affichage de graphes, de rapports, de tableaux de bord, ainsi que de toute sorte de visualisations, dans des applications web.
Il est même possible d'exposer ses propres sources de données sur le web, compatibles avec Google Visualization ; c'est ce que cet article décrit, au travers d'un exemple simple d'application web affichant un camembert dans une page web, en s'appuyant sur le puissant framework Grails.
L'application Grails et le côté serveur
Notre base de travail est donc une application Grails comprenant un contrôleur, implémenté par la classe Groovy VisualizationController ; cette classe définit les actions test et data : la première action est tout simplement destinée à permettre l'affichage de la vue Grails test.gsp, tandis que la seconde renvoie les données nécessaires à l'affichage de notre camembert au format JSON. Ce sont ces données, accessibles au travers d'une URL de la forme <base_url>/visualisation/data, qui constituent notre source de données Google Visualization personnalisée.
Voici un extrait du code source (que vous pouvez obtenir en tant que pièce jointe à cet article) de la classe VisualizationController :
def test = { }
def data = {
def table = […]
def response = [version: '0.5', status: 'ok', table: table]
render response as JSON
}
}
Notez que dans le code ci-dessus, nous avons eu recours à la définition de la table de données avec une Map Groovy et que cette table doit suivre un format particulier décrit dans la spécification Groogle Visualization. La construction de cette table pourrait bien sûr solliciter les classes métiers Grails mis en œuvre dans l'application.
De plus, la conversion des données au format JSON est extrêmement simplifiée sous Grails !
La vue Grails affichant le graphe Google Visualization
Passons maintenant à la vue Grails test.gsp (voir la pièce jointe test.gsp associée à cet article) ; cette vue définit l'utilisation de la librairie JavaScript prototype car nous accédons aux données délivrées par l'action data du contrôleur Visualization au travers d'AJAX.
Juste après le chargement de la librairie Google Visualization, la fonction JavaScript initialize() s'exécute. En voici l'implémentation :
${remoteFunction(action: 'data', onSuccess: 'fOnSuccess(e);')}
}
remoteFunction est l'un des tags (ici dans sa forme d'appel de fonction) du support d'AJAX dans Grails permettant de réaliser un appel AJAX de manière asynchrone, vers une action de contrôleur. C'est bien l'action data du contrôleur Visualization qui est invoquée ; et en cas de succès, la fonction JavaScript fOnSuccess est appelée automatiquement avec la réponse du serveur.
Voyons maintenant comment la fonction fOnSuccess traite la réponse obtenue, instancie le graphe de type camembert, puis l'affiche dans l'élément DOM d'id chart_div présent dans la page web :
var response = e.responseText.evalJSON();
// TODO : Tester response.status
var dt = new google.visualization.DataTable(response.table, response.version);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(dt, {width: 400, height: 240, is3D: true});
}
Cet exemple a montré combien la combinaison du framework Grails avec l'API Google Visualization est aisée. Il est vrai que nous avons présenté un code simple qui devrait être complété par différents types de contrôle.
Nous gageons aussi que la galerie des visualisations de Google va continuer à s'étoffer, et qu'il est fort probable que la communauté Grails s'atèle à offrir une intégration plus forte avec Google Visualization !
| Fichier attaché | Taille |
|---|---|
| test.gsp.txt | 1.01 Ko |
| VisualizationController.groovy | 794 octets |