[NEW V16] Intégration de Bibliothèques de composants JavaScript

La dernière version BiBOARD V16 sortie cet été met en lumière de nombreuses fonctionnalités à forte valeur-ajoutée. Pour ce premier article, Aurélie Thepaut revient pour nous sur l’intérêt d’intégrer une nouvelle bibliothèque de composants JavaScript dans la V16.

Pourquoi avoir décidé de mettre l’accent dans cette nouvelle version V16 sur la bibliothèque de composants ?
L’intégration de ces bibliothèques de composants offre de nombreux avantages et permet de répondre à des besoins et problématiques spécifiques pour chacun de nos clients :

Apporter une réelle plus-value à nos clients en associant l’intelligence de BiBOARD et de sa V16 aux composants graphiques derniers cris.

• Une intégration simplifiée des composants graphiques dernières tendances dans les rapports et tableaux de bord.
• L’amélioration de l’impact et de la compréhension des messages auprès des métiers.
• Les rapports sont simples, et les informations importantes faciles à trouver et à analyser.
• De belles jauges esthétiques à forte valeur ajoutée pour la compréhension des données.
• Une adaptation des restitutions selon les tendances et problématiques/compréhension des marchés.
• Une data visualisation adaptée aux besoins fonctionnels quel que soient les métiers et domaines.

Quels sont les composants JavaScript disponibles dans ces bibliothèques ?
Les principaux composants de ces bibliothèques permettent à chacun de répondre à des besoins clients spécifiques. En priorité nous proposons d’intégrer  les composants suivants dans la V16.1.3 : D3JS, Google Charts, High Charts, Am Charts, JQuery.
Quels sont leur valeur-ajoutée ?

D3.JS

Le D3.js (ou D3 pour Data-Driven Documents) est une bibliothèque graphique JavaScript qui permet l’affichage de données numériques sous une forme graphique et dynamique. Il s’agit d’un outil important pour la conformation aux normes W3C qui utilise les technologies courantes SVG, JavaScript et CSS pour la visualisation de données. Contrairement aux autres bibliothèques, celle-ci permet un plus ample contrôle du résultat visuel final. (1)
Exemple de restitution :

Google Charts

Sous forme d’API Google Charts permet de réaliser ses propres graphiques de manière très simple, de la même façon que les API Google map ou Google Search ce service est gratuit. L’avantage est qu’ils sont dynamiques et l’utilisateur passe en paramètres ses valeurs et le graphique s’adapte automatiquement. Le système fonctionne via une URL personnalisée à placer dans la source d’une balise image.
Exemple de restitution :

High Charts

Très simple d’utilisation, Highcharts  repose sur le principe du « Plug&Play ». Il suffit d’ajouter le script Javascript et la feuille de style pour commencer à apercevoir la puissance de l’outil. Le paramétrage de manière illimité de Highcharts s’effectue à l’aide d’un objet JSON. Les paramètres sont nombreux et permettent de configurer tout ce qui peut être utile dans un graphique : le type de graph, la légende, les échelles, les labels, les axes … Enfin, on peut aussi ajouter des évènements comme onClick, onMouseOver …
Exemple de restitution :

Am Charts

AmCharts est une bibliothèque JavaScript graphique avancée et indépendante qui convient à n’importe quel besoin de visualisation de données. Elle propose différents types de graphiques à intégrer dans vos pages Web : en colonnes, linéaires, par zone, en étape, comme un radar, le camembert, les bulles, les jauges, etc. Avec son côté « responsive », cette bibliothèque convient tout aussi bien pour les affichages sur desktop que sur écrans tactiles.
C’est grâce à un éditeur visuel que l’utilisateur constitue ses graphiques. C’est un gain de temps non négligeable qui limite le nombre d’erreurs et permet de créer, sauvegarder et partager ses graphiques.
Les graphiques sont restitués avec la technologie SVG (Scalable Vector Graphics). Elle est prise en charge par tous les navigateurs web : FireFox, Chrome, Safari, Opera et IE9+, ainsi que sur les systèmes iOS et Android.
Exemple de restitution :

JQuery

jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML des pages web3.
La bibliothèque contient notamment les fonctionnalités suivantes :

• Parcours et modification du DOM (y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath) ;
• Événements ;
• Effets visuels et animations ;
• Manipulations des feuilles de style en cascade (ajout/suppression des classes, d’attributs…) ;
• Ajax ;
• Plugins ;
• Utilitaires (version du navigateur web…).

Depuis sa création et notamment à cause de la complexification croissante des interfaces Web, la syntaxe jQuery est aujourd’hui devenue incontournable et la base de l’apprentissage des technologies Web. Il est à l’heure actuelle le Framework Front-End le plus utilisé au monde (plus de la moitié des sites Internet en ligne intègrent jQuery).
(1)     Sources : Wikipedia