Comparaison de grapheurs Javascript libres pour les statistiques LinuxFr.org

Sommaire

(tiré d'une dépêche du 6 janvier 2013 qui ne vit jamais le jour)

État initial des statistiques LinuxFr.org

Les statistiques du site sont produites avec du code Ruby On Rails qui va lire en bases de données MySQL et Redis.

Les données à représenter sont de quatre types actuellement :

une série de pourcentages d'un même ensemble, pouvant se recouvrir (dans l'idéal, une représentation en diagramme de Venn, mais elle est généralement limitée à 4 séries de données) ;
un série de pourcentages d'un même ensemble sans recouvrement (dans l'idéal, une représentation en diagramme en camembert) ;
une série de plusieurs valeurs pour une comparaison ;
des séries de plusieurs valeurs non reliées pour montrer une variation temporelle (avec possibilité de ne pas afficher les valeurs nulles/absentes) ;
des séries de plusieurs valeurs s'ajoutant pour montrer une variation temporelle.

La partie graphe utilise des balises div avec une couleur de fond dont la largeur correspond à la valeur à représenter. Elle est donc en pur HTML statique (et les couleurs sont choisies via une feuille de style CSS). Tout est représenté sous forme de diagramme en barres horizontales.

Le besoin

une solution en Javascript un peu dynamique (permettant d'afficher temporairement des infos sans trop surcharger) ;
une solution sous une licence libre compatible avec le reste du code placé sous licence AGPL v3 ;
des diagrammes en barres horizontales ou verticales, additives ou non, avec légende, titre, affichage possible des valeurs ;
et probablement d'autres choses qui sembleront indispensables une fois qu'elles seront techniquement possibles, comme les 4 possibilités complémentaires que sont les courbes de tendances, les commentaire sur les données ou les pentes d'évolution et les projections.

Les diverses solutions évaluées

L'exhaustivité ne semble pas réellement possible dans le domaine des grapheurs Javascript où semble-t-il chaque développeur a décidé de refaire sa bibliothèque de graphes, parfois de zéro, parfois en se dérivant d'une autre solution existante. Un certain nombre de solutions a été essayé pour voir rapidement ce qu'il était possible de faire ou non, simplement, avec.

gRaphael

Sites : gRaphael & Raphael
Version : 0.51 (2012-08-12) & 2.1.2 (2013-08-26)
Licence : MIT
Taille : gRaphael 85 kio (27 kio minifié) + Raphael 2.1.2 (293 kio, 90 kio minifié)
Format : SVG
Essai d'utilisation

Remarques après utilisation :

titre extérieur au graphe, à placer soi-même en coordonnées (x,y)
affichage de la valeur au survol dans un diagramme en barres ou en camembert à faire soi-même en javascript (code disponible dans les exemples)
légende uniquement pour les diagrammes en camembert (en anglais piechart). Un contournement sale semble être de faire un piechart de rayon zéro pour profiter de sa légende.
pas d'hyperlien pour les diagrammes en barres, ni dans la légende des diagrammes en camembert. Pas de contournement trouvé.
pour les données de type 3, 4 ou 5, il est difficile d'afficher des données par année (ou mois) : soit on doit utiliser un barchart sans abscisse et aux couleurs multiples, soit on doit utiliser un linechart ce qui donne en abscisses des années décimales. Pas de contournement trouvé sauf à refaire l'axe soi-même.
possibilité de dotchart, une matrice de points de taille et couleur différentes
pas de diagrammes de Venn de base, mais un contributeur a fait un plugin pour cela.
pas d'exemple avec une grille en fond

nvd3 (basé sur D3)

Sites : nvd3 & D3
Licence : Apache v2 & BSD
Version : la dernière est la 1.1.14 bêta 25 (TODO 1.8.1 disponible) mais j'ai une régression sur le diagramme en camembert donc je reste sur une vénérable 0.0.1a qui sert aux exemples du site de l'auteur d'ailleurs ; D3 en version 3.3.1 (TODO 3.5.6)
Taille : nvd3 318 kio + d3 318 kio (184 kio + 143 kio minifiés)
Format : SVG
Essai d'utilisation

Remarques après utilisation :

absence de documentation d'API (et l'API semble plus riche que celle de gRaphael). Par contre la documentation d3 est disponible.
dans un diagramme en camembert, il faut filtrer soi-même les données négligeables (contrairement à gRaphael qui permet de les agréger sous « Autres »)
voir si on peut surcharger les fonctions affichent en anglais « x on y » ou « x at y » en infobulle
voir si on peut forcer ou empêcher l'empilement des barres dans les diagrammes en barre
esthétiquement, je trouve le résultat plus joli/mieux fini que gRaphael
pas de diagrammes de Venn

Morris (basé sur Raphael)

Site : Morris.js & Raphael
Licence : Simplified BSD
Version : 0.5.1 du 2014-06-15
Taille : Morris (64 kio, 35 kio minifié) + jQuery (238 kio, 91kio minifié) + Raphael (293 kio, 90 kio minifié)
Format : SVG
Essai d'utilisation

Remarques après utilisation :

API plutôt basique
pas de diagramme en camembert à la française mais en donut à l'américaine
pas de gestion des titres
fonte qui varie pour la légende lors du passage sur le donut et il faut filtrer soi-même les données négligeables (contrairement à gRaphael qui permet de les agréger sous « Autres »)
pas de gestion des hyperliens
pas de diagrammes de Venn

jqplot

Site : http://www.jqplot.com/
Licence : MIT et GPL v2
Version : 1.0.8r1250 du 2013-03-27
Taille : 7,5 Mio dans l'archive avec exemples, docs et JQuery inclus, dont 1,4 Mio de CSS+JS (529 kio minifié)
Format : Canvas
Essai d'utilisation

Remarques après utilisation :

documentation riche et nombreux exemples fournis
pas de diagramme de Venn
dans un diagramme en camembert, il faut filtrer soi-même les données négligeables (contrairement à gRaphael qui permet de les agréger sous « Autres »)
peu de fonctionnalités interactives dans les exemples, comme l'affichage sur un passage souris (TODO: voir http://www.jqplot.com/tests/zooming.php qui permet de faire du zoom, http://www.jqplot.com/tests/cursor-highlighter.php pour voir interactivement les données brutes, les plugins sont utilisables en même temps)

CanvasXpress

Site : CanvasXpress
Licence : LGPL 3.0
Taille : (je n'ai pas reçu la version complète promise en échange d'une adresse de courriel - de plusieurs même, à différents moments -, donc j'ai utilisé la version en ligne)
Format : Canvas
Essai d'utilisation

Remarques après utilisation :

les exemples sont plutôt complexes, plus proche d'une utilisation scientifique que d'un exemple basique
API visiblement très très riche
l'ordonnée par défaut sur les diagrammes en barres n'est pas zéro mais calculée par rapport au minimum

ChartJs

Site : Chart.js
Licence : MIT
Version : 1.0.1 beta-4 du 2014-08-14 (TODO: 1.0.2 sortie + une 2.0.0 alpha 3)
Taille : 105 kio, 18 kio minifiée
Format : Canvas
Essai d'utilisation

Remarques après utilisation :

documentation et exemples assez complets
pas de diagramme de Venn, mais le diagramme polararea est pratique pour notre besoin
les couleurs sont à choisir soi-même
les légendes sont à construire soi-même, via un patron passé en paramètre
il n'y a apparemment pas de possibilité d'avoir des barres cumulatives pour le type 5

Rickshaw (basé sur D3)

Site : Rickshaw & D3
Licence : MIT
Version : 1.5.1 du 2014-12-14
Canvas : SVG
Taille : 107 kio, 81 kio minifiée (+ la bibliothèque D3 de 377 kio, 74 kio minifiée)

Remarques :

pas de diagramme de Venn, ni de diagramme en camembert, c'est restreint aux données temporelles, donc ça ne convient pas pour notre besoin

reD3 (basé sur D3)

Site : reD3 & D3
Licence : APL v2
Version : 2014-03-23 (avec bibliothèque D3 version 3.1.10)
Taille : reD3 (28,3 kio, 15,1 kio minifiée) + D3 (292 kio, 136 kio minifiée)
Format : SVG
Pas d'essai : les exemples pauvres et l'absence de documentation ne m'ont pas donné envie de tester

Remarques :

absence de documentation d'API
pas de diagrammes de Venn de base
pas d'exemple avec une grille en fond
peu de fonctionnalités interactives dans les exemples, comme l'affichage sur un passage souris