Un tableau avec grands totaux grâce à Google Charts

Baptiste Autin, le 8 mai 2015

La Datatable est la structure de base de la puissante API Google Visualization. Comme son nom l’indique, une Datatable permet de construire des tableaux de données, via un objet google.visualization.Table, mais elle peut également servir à générer des graphiques (avec Google Charts).

Malheureusement, par défaut, un objet google.visualization.Table ne permet pas d’afficher automatiquement des totaux, en ligne et en colonne, et je vous propose donc un script complet pour pallier cette absence.

Notre point de départ, ce seront de simples objets Javascript :

	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Nom');
	data.addColumn('number', 'Janvier');
	data.addColumn('number', 'Février');
	data.addColumn('number', 'Mars');
	data.addColumn('number', 'Avril');
	data.addColumn({type: 'number', label: 'Total'});

	data.addRow(['Jean', 5, 12, 18, 25, 60]);
	data.addRow(['Robert', 0, 1, 20, 2, 23]);
	data.addRow(['Maud', 11, 5, 7, 9, 32]);
	data.addRow(['Tom', 3, 1, 1, 4, 9]);

Après quelques opérations sur la Datatable data, on créé un objet google.visualization.Table, on appelle sa méthode draw() et voici ce que l’on obtient :


Pas mal, non ?

On trouvera ici le code source complet de cet exemple.

S’il est assez facile d’obtenir le total vertical (par une simple colonne de regroupement de type google.visualization.data.sum), le total horizontal est plus difficile à réaliser (il faut créer x colonnes d’agrégation, filtrer, et ajouter la ligne).

Notez que les colonnes sont triables, c’est une fonctionnalité élégante qu’offre la Datable par défaut.
Remarquez également que le tri sur la colonne Total doit être corrigé. En effet, il faut exclure du tri le total horizontal final, sous peine de voir ce grand total remonter en première ligne une fois sur deux : c’est l’objet du listener sur l’événement ‘sort’, un petit hack qui nous permet de rejeter systématiquement en bas du tableau le grand total.

Histogrammes dérivés

En guise de cadeau final, voici deux graphiques HTML5 obtenus très facilement à partir de la Datatable précédemment construite, toujours grâce à l’API Google Charts.
Le premier graphique s’obtient en instanciant un objet ColumnChart, puis en appelant sa méthode draw(), et en lui passant directement notre Datatable :

	var chart = new	google.visualization.ColumnChart(document.getElementById("chart_div"));
	data.removeColumn(data.getNumberOfColumns()-1);		// On enlève la colonne total !
	chart.draw(data, options);

Pour générer le second graphique (où lignes et colonnes ont permuté), il suffit de construire préalablement une Datatable inversée de la première en pivotant ses données.
Le code de cette petite opération de permutation est à retrouver dans le code source complet de notre exemple.

Laisser une réponse

«