De jolis graphiques avec C3.js dans votre projet Rails

C3.js est une bibliothèque sous licence MIT. Il s’agit d’une surcouche à D3.js (« Data-Driven Documents » sous BSD 3-Clause) permettant de créer les graphiques les plus communs en quelques minutes. En voici quelques exemples :

bar
donut
gauge
pie
timeseries

Le code est très simple :

La méthode la plus simple est d’ajouter les deux gems suivantes à votre Gemfile :

Il faut ensuite ajouter les lignes suivantes à app/assets/javascripts/applications.js :

Ainsi que dans app/assets/stylesheets/applications.css :

Vous pouvez personnaliser d3 dont hérite c3 pour les unités françaises courantes. Je vous conseille de placer le code suivant dans un fichier JS qui sera inclus dans toutes vos pages :

La liste des formats de dates est disponible dans la documentation d3.js.

Les graphiques sont interactifs et peuvent être dynamiques (onclick, onmouseover, etc). Il est également possible de les imprimer en PDF avec la gem wicked_pdf, qui nécessite la gem wkhtmltopdf-binary-edge (attention, wkhtmltopdf-binary est abandonnée et ne marchera pas). Petite astuce pour que le graphe s’affiche dans le pdf mettre un style inline dans la balise (souvent div) où le graphe doit s’afficher avec la largeur et la hauteur souhaitée ;).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.