Quand on développe une application qui doit présenter beaucoup d’information aux utilisateurs, le réflexe est souvent d’utiliser des tableaux remplis de lignes de données. C’est un modèle utile pour bien des gens: on peut facilement copier les données dans un tableur et les manipuler ensuite. Mais c’est un peu terne à regarder et assez peu attrayant.
En fait, pour évaluer rapidement l’état de vos données, l’usage de graphiques est bien plus approprié. Les graphiques sont des composantes puissantes, qui agrègent vos données en représentations utiles. Par exemple, un ensemble de valeurs qui forment un total s’assimile plus facilement dans un diagramme circulaire.
Je travaille actuellement sur notre solution RAC/M Identity, qui est essentiellement une application d’analyse de données. Voici un exemple de deux façons de présenter l’information, telles qu’elles existent dans notre produit:
1. Des statistiques présentées en tableaux, ce qui convient à bien des gens
2. Une représentation graphique de la même information
Ce que l’on constate en comparant ces images, c’est que la seconde présente une masse d’information plus attrayante. Dans mon milieu de travail, la haute direction manifeste un intérêt marqué pour cette seconde façon de montrer les statistiques, et nos clients exigent de plus en plus de telles représentations de leurs données critiques.
Solutions explorées
Pour produire ces graphiques, j’ai récemment travaillé avec deux bibliothèques gratuites offrant les fonctions nécessaires: Morris.js et C3.js.
- Complexité: simple
- Types de graphiques offerts: aires, barres, anneau et lignes
- Compatibilité: cette bibliothèque repose sur jQuery et Raphael et fonctionne dans tous les navigateurs.
J’ai utilisé cette bibliothèque pour l’application d’un client précis, destinée à un système embarqué. L’exigence était que les graphiques fonctionnent dans n’importe quel navigateur. L’intégration a été très simple: il suffit de référencer jQuery, Raphael et Morris dans l’en-tête HTML, et c’est parti. Le site de Morris fournit toutes les références nécessaires, avec des exemples.
- Complexité: moyenne
- Types de graphiques offerts: aires, barres, anneau, jauge, lignes, secteurs et escalier
- Compatibilité: cette bibliothèque repose sur D3 et exige donc des navigateurs modernes prenant en charge le SVG.
C’est la bibliothèque que j’utilise actuellement dans RAC/M Identity pour les graphiques de la deuxième image ci-dessus. Très puissante, elle prend en charge des données facilement rechargeables lorsqu’elles changent, par exemple à la suite d’appels Ajax.
Mise en œuvre concrète
Dans cette dernière partie, nous verrons techniquement comment intégrer C3.js à un projet, avec un exemple très simple.
Après avoir téléchargé C3.js (les sources JavaScript et CSS) et la bibliothèque D3.js, il faut les référencer dans l’en-tête de votre document HTML:
1. Initialisation de l’en-tête HTML
<link type="text/css" rel="stylesheet" media="all" href="/css/c3/c3.min.css">
<script type="text/javascript" src="/javascript/c3/d3.v3.min.js"></script>
<script type="text/javascript" src="/gui/javascript/c3/c3.min.js"></script>2. Définition du graphique en JavaScript
Pour initialiser un graphique, il faut écrire un peu de JavaScript. Les blocs de code suivants produisent le graphique en anneau visible dans l’image plus haut, nommé « Identity Matching ».
// Identity matching pie charts
var chartIM = c3.generate({Ceci lie votre graphique à un élément HTML. Dans mon cas, je l’ai lié à un div nommé charts3-c3
bindto: '#charts3-c3',
data: {Voici ma source de données initiale. J’ai laissé les valeurs à 0 parce que je veux une animation au chargement du panneau.
columns: [
['Matched', 0],
['Unmatched', 0]
],« type: donut » définit ce graphique comme un graphique en anneau,
type : 'donut',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
}
});C’est ici que j’insère les statistiques réelles du graphique. C’est ce qui produit l’animation où l’anneau se remplit en boucle.
setTimeout(function () {
chartIM.load({
columns: [
['Matched', 28542],
['Unmatched', 22000]
]
});
}, 500);Voici tout le code ci-dessus, sans les commentaires:
var chartIM = c3.generate({
bindto: '#charts3-c3',
data: {
columns: [
['Matched', 0],
['Unmatched', 0]
],
type : 'donut',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
}
});
setTimeout(function () {
chartIM.load({
columns: [
['Matched', 28542],
['Unmatched', 22000]
]
});
}, 500);
En chargeant votre fichier source dans un navigateur, avec le code ci-dessus, vous obtiendrez à l’écran, dans le div identifié par charts3-c3, un graphique qui ressemble à ceci:
3. Mise à jour dynamique des données Mieux encore: faire en sorte que vos données se mettent à jour régulièrement. Pour cela, vous pouvez par exemple lancer un appel Ajax qui interroge vos données à intervalles réguliers. Au retour de l’appel, rafraîchissez le graphique avec ces nouvelles données grâce à la fonction load.
Exemple:
...
// Ajax return call that initialize newMatchedData abd bew UnmatchedData
var newMatchedData = ...;
var newUnmatchedData= ...;
chartIM.load({
columns: [
['Matched', newMatchedData],
['Unmatched', newUnmatchedData]
]
});
...Le graphique changera ainsi de façon dynamique.
Conclusion
Pour répondre à la question de départ: intégrer des graphiques dans un site ou une application Web n’est vraiment pas difficile aujourd’hui, avec les différentes bibliothèques qui existent, et cela ne devrait certainement pas être négligé dans votre processus de conception.
Cela hausse réellement votre projet d’un cran!