URL: https://linuxfr.org/suivi/comparaison-de-grapheurs-javascript-libres-pour-les-statistiques-linuxfr-org Title: Comparaison de grapheurs Javascript libres pour les statistiques LinuxFr.org Authors: Benoît Sibaud Date: 2016年12月31日T17:13:45+01:00 License: CC By-SA Tags: statistiques Score: 1 (tiré d'une dépêche du 6 janvier 2013 qui ne vit jamais le jour) ## État initial des statistiques LinuxFr.org ## Les [statistiques](https://linuxfr.org/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 : 1. une série de pourcentages d'un même ensemble, pouvant se recouvrir (dans l'idéal, une représentation en [diagramme de Venn](http://fr.wikipedia.org/wiki/Diagramme_de_Venn), mais elle est généralement limitée à 4 séries de données) ; 2. un série de pourcentages d'un même ensemble sans recouvrement (dans l'idéal, une représentation en diagramme en camembert) ; 3. une série de plusieurs valeurs pour une comparaison ; 4. des séries de plusieurs valeurs non reliées pour montrer une variation temporelle (avec possibilité de ne pas afficher les valeurs nulles/absentes) ; 5. 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](http://insideintercom.io/four-things-i-wish-every-chart-did/) 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](http://g.raphaeljs.com/) & [Raphael](http://raphaeljs.com/) * 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](http://oumph.free.fr/textes/graphes/raphael/raphael.html) 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](http://g.raphaeljs.com/dotchart.html), une matrice de points de taille et couleur différentes * pas de diagrammes de Venn de base, mais un contributeur [a fait un plugin](https://github.com/DmitryBaranovskiy/g.raphael/pull/89) pour cela. * pas d'exemple avec une grille en fond ### nvd3 (basé sur D3) ### * Sites : [nvd3](http://nvd3.org/) & [D3](http://d3js.org/) * 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](http://oumph.free.fr/textes/graphes/nvd3/nvd3.html) Remarques après utilisation : * absence de documentation d'API (et l'API semble plus riche que celle de gRaphael). Par contre la [documentation d3](https://github.com/mbostock/d3/wiki/API-Reference) 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](http://morrisjs.github.io/morris.js/) & [Raphael](http://raphaeljs.com/) * 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](http://oumph.free.fr/textes/graphes/morris/morris.html) 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](http://oumph.free.fr/textes/graphes/jqplot/jqplot.html) 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](http://www.canvasxpress.org/about.html) * 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](http://oumph.free.fr/textes/graphes/canvasxpress/canvasxpress.html) 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](http://www.chartjs.org/) * 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](http://oumph.free.fr/textes/graphes/chartjs/chartjs.html) 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](http://code.shutterstock.com/rickshaw/) & [D3](http://d3js.org/) * 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](http://xibbit.github.io/reD3/#/) & [D3](http://d3js.org/) * 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 ### Flot * Site : [Flot Charts](http://www.flotcharts.org/) * Licence : MIT * Taille : **TODO** * Format : Canvas * Essai : **TODO** Remarques après utilisation : **TODO** ### C3.js (basé sur D3) ### * Site : [C3.js](http://c3js.org) & [D3](http://d3js.org/) * Licence : [MIT](https://github.com/masayuki0812/c3/blob/master/LICENSE) * Version : **TODO** * Taille : **TODO** * Format : SVG * Essai : **TODO** Remarques après utilisation : **TODO** ### D3plus (basé sur D3) ### * Site : [D3plus](http://d3plus.org/) & [D3](http://d3js.org/) * Licence : [MIT](https://github.com/alexandersimoes/d3plus/blob/master/LICENSE) * Version : **TODO** * Taille : **TODO** * Format : SVG * Essai : **TODO** Remarques après utilisation : **TODO** ### Enterprise Charts ### * Site : [eCharts](https://github.com/ecomfe/echarts) * Licence : BSD * Version : **TODO** * Taille : **TODO** * Format : **TODO** * Essai : **TODO** Remarques après utilisation : **TODO** * les commentaires sont en chinois dans le code ### TauCharts (basé sur D3) ### * Site : [TauCharts](http://taucharts.com/) & [D3](http://d3js.org/) * Licence : APL v2 * Version : **TODO** * Taille : **TODO** * Format : **TODO** * Essai : **TODO** Remarques après utilisation : **TODO** ### Plottable.js (basé sur D3) ### * Site : [Plottable.js](http://plottablejs.org/) & [D3](http://d3js.org/) * Licence : MIT * Version : **TODO** * Taille : **TODO** * Format : **TODO** * Essai : **TODO** Remarques après utilisation : **TODO** http://www.rgraph.net/ ? ### PykCharts.js (basé sur D3) * Site : [PykCharts.js](http://pykcharts.com/) & [D3](http://d3js.org/) * Licence : BSD v3 * Version : **TODO** [code sur github](https://github.com/pykih/PykCharts.js) * Taille : **TODO** * Format : **TODO** * Essai : **TODO** Remarques après utilisation : **TODO** ## Et d'autres encore Beaucoup d'[alternatives ou compléments à D3.js sont listés en libre sur alternativeto.net](http://alternativeto.net/software/d3-js/?license=opensource) et il y a aussi un [comparatif des types de graphes disponibles pour tout un ensemble de grapheurs](http://alternativeto.net/software/d3-js/?license=opensource). Citons par exemple [datavisualization.ch](http://selection.datavisualization.ch/) et [Web Designer Aid](http://webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/) en proposent encore d'autres grapheurs Javascript (qui ne sont pas forcément tous libres, je n'ai pas vérifié). Pour la représentation graphique de tags en [nuage de tags](https://fr.wikipedia.org/wiki/Nuage_de_mots-cl%C3%A9s), il y a un paragraphe dédié sur la page [wiki pour les propositions de nuages de tags](https://linuxfr.org/wiki/tags#nuage-de-tags).

AltStyle によって変換されたページ (->オリジナル) /