Produire des graphes en Javascript

Dans le cadre du développement de mon framework (JOY) il me parait indispensable d’aller assez loin en terme de restitution. Ca tombe plutot bien car HTML version 5 couplé avec javascript permet dorénavant de proposer ce type de fonctionnalité, et ce de manière assez séduisante. Fini donc les flash et autre outils bien trop lourds. Bien sur, si on fait quelques recherche on va trouver de tout, du gratuit au payant, en passant par des librairies plus ou moins packagées. Cet article passe en revue quelques une de ces librairies.

Plusieurs librairies, un seul choix ?

Avant de me lancer dans mon bench de librairies, quels sont mes critères :

• Simplicité d’utilisation
• Gratuité & autonomie (je considère par là que mon framework doit être indépendant et ne pas référencer de librairies sur un autre serveur).
• Légèreté
• Mode Responsive supporté (pour les applis mobile)
• Diversité des graphes proposés (barre, ligne, radar, polaire, gauge, etc.)
• Qualité graphique & ergonomie de base (aspect dynamique des graphes, echelles, etc.)

Voilà qui va me permettre de filtrer d’ores et déjà pas mal de librairies. Il existe d’ailleurs sur internet pas mal de page qui proposent des comparatifs sur ces types de librairies. Globalement on va toujours retomber sur les mêmes : C3; D3; Raphael, Dracula, Chart.js, etc.

Ce qui ne rend la tâche de choix aisé c’est vraiment la couverture de chacune ce ces solutions qui n’est pas la même que son concurrent. Le choix s’avère donc difficile. Personnellement et après les avoirs essayé j’ai beaucoup hésité entre D3 et chart.js mais j’avoue que mon coeur a balancé vers chart.js qui pour moi respecte le mieux les critères que j’ai précédemment énuméré. Maintenant je trouve qu’il manque par exemple la gauge mais bon c’est pas très grave j’y palierai d’une autre manière 😉

C’est donc choisi : je vais utiliser chart.js (Licence MIT) qui combine 6 graphes, un mode responsive et pleins d’autres fonctionnalités.

chart.js

Après téléchargement de la librairie javascript (un seul fichier) sur le site je recommande d’aller directement sur la page de documentation qui est non seulement très synthétique mais surtout très bien faite pour utiliser très rapidement la solution. Par ailleurs une fois téléchargé le Zip, ce dernier contient non seulement des exemples basics d’utilisation mais aussi pas mal d’exemple d’utilisation plus poussée (avec des barres de progression, des echelles, etc.).

Un autre avantage non négligeable c’est que les données qui vont constituer le carburant de nos graphique est nativement au format json. Celà me permettra de fournir des services au travers de mon framework qui se « brancheront » directement et naturellement à l’API de chart.js

Qu’est-ce que ça donne ?

J’ai donc créé un fichier joy-chart.js qui proposera des fonctions préconstruite pour afficher des graphes. Dans ce fichier j’aurais par exemple pour afficher un graphique à barre :

function displayBar(canvasID, title, content) {
var ctx = document.getElementById(canvasID).getContext("2d");
myChart = new Chart(ctx, {
type: 'bar',
data: content,
options: {
elements: {  rectangle: { borderWidth: 2, borderSkipped: 'bottom' } },
responsive: true,
legend: { position: 'bottom' },
title: { display: true, text: title }
}
});
return myChart;
}

Les graphiques sont affichés dans des proposé par HTML5. Voici un exemple d’appel :

displayBar('div_graph1', 'Global scoring by Glossary', content);

div_graph1 est l’id d’un tag CANVAS :

Le rendu est plutot pas mal pour si peu de lignes de code n’est-ce pas ?

Vous avez remarqué j’ai aussi mis un graphe de type polaire.

Voici la fonction d’appel :

function displayChartPolar(canvasID, title, content) {
var ctx = document.getElementById(canvasID).getContext("2d");
var config = {
data: content,
options: {
responsive: true,
legend: { position: 'bottom' },
title: { display: true, text: title },
scale: {
ticks: { beginAtZero: true },
reverse: false
},
animateRotate:true,
segmentShowStroke : true,
scaleShowLine : true
}
};
return Chart.PolarArea(ctx, config);
}

Le code est légèrement plus complexe, mais à peine De la même manière on va créer des fonctions pour afficher des radars, des graphes en lignes, en bulles, etc.

Téléchargez le fichier sur Github