Article original : The best data visualization and web reporting tools for your BI solution
Par Veronika Rovnik
Rendre le complexe simple avec une analyse intelligente des données
Il est difficile de surestimer la valeur des analyses perspicaces de nos jours. Tous les processus métiers sont devenus pilotés par les données : marketing, comptabilité, ressources humaines, service client, finance.
Et pour convaincre les décideurs, vous devez transmettre correctement le sens des données. Une technique possible consiste à composer un rapport analytique web. Une autre partie essentielle est la visualisation de données puissante qui vous aide à comprendre les tendances commerciales de votre entreprise.
J'ai fait quelques recherches, et je vais maintenant vous donner un aperçu complet de quatre outils populaires pour le reporting web et l'analyse de données. Les deux premiers sont gratuits, les deux suivants sont plus avancés. Ces outils seront utiles à la fois pour les développeurs et les analystes de données.
Outils gratuits
Les options suivantes offrent des opportunités pour le reporting web de base.
PivotTable.js
PivotTable.js est un tableau croisé dynamique JavaScript open-source. Il vise à fournir la fonctionnalité pour l'analyse de données et nécessite une bonne connaissance de JavaScript pour atteindre son plein potentiel.
Fonctionnalités intégrées de reporting web :
Prise en charge des sources de données .csv et JSON
- Agrégation, filtrage, tri et groupement sont disponibles. Il y a 22 fonctions qui incluent des fonctions pour la recherche statistique.
- Vous pouvez déplacer les champs des colonnes vers les lignes, et vice versa, à l'aide de la fonctionnalité glisser-déposer.
- Formatage personnalisé des cellules
- Rendu TSV pour l'exportation au format TSV
- Capacité à définir plusieurs agrégateurs
Une option de rendu de carte thermique
Fonctionnalités de personnalisation de la vue :
Les rendus compatibles mobile pour les appareils tactiles sont disponibles.
- Les cellules de la grille peuvent être colorées.
- Il existe une disposition similaire à Excel disponible : chaque hiérarchie est affichée dans une colonne ou une ligne séparée.
- Le formatage personnalisé est possible ainsi que la création d'une échelle de couleurs de carte thermique personnalisée.
Localisation linguistique : le tableau croisé dynamique est disponible en anglais et français, et il est possible d'écrire votre propre "pack de langue" en JavaScript.
Intégration et compatibilité :
Il existe une version React avec des graphiques Plotly intégrés.
Il est compatible avec Python/Jupyter et R/RStudio.
Limites :
Gère jusqu'à 100 000 lignes
- Malheureusement, les sous-totaux ne peuvent être rendus que via un plugin supplémentaire.
- Les rendus intégrés pour l'exportation vers CSV et Excel ne sont pas disponibles.
Pour sauvegarder la configuration du rapport, vous devez implémenter cette fonctionnalité vous-même. PivotTable.js offre une liberté de personnalisation, cependant.
Création de graphiques :
Vous pouvez utiliser les rendus pour l'intégration avec C3 Charts, D3.js, Plotly et Google Charts. Il est possible d'utiliser Highcharts avec le tableau croisé dynamique à l'aide d'un plugin tiers.
En savoir plus :
Démos sur JSFiddle :
WebDataRocks
WebDataRocks est un tableau croisé dynamique web intégrable écrit en JavaScript. C'est un composant léger. Vous pouvez l'utiliser dans une application web et construire un rapport interactif basé sur vos données. Il peut être visualisé sur des appareils mobiles et des clients de bureau. Il est adapté aux utilisateurs finaux moins techniques, mais offre des options de personnalisation avancées pour les développeurs.
Fonctionnalités intégrées de reporting web :
Prise en charge des sources de données JSON et .csv locales et distantes
- La fonctionnalité principale est accessible via la partie supplémentaire spéciale du tableau croisé dynamique — la Barre d'outils.
- Agrégation, filtrage multiple, tri et groupement sont faciles avec l'interface utilisateur. Il y a 13 fonctions d'agrégation et la possibilité de créer une valeur calculée personnalisée.
- Configuration des champs via la Liste des champs et déplacement de ceux-ci des colonnes vers les lignes et vice versa à l'aide de la fonctionnalité glisser-déposer
- Création de hiérarchies multi-niveaux
- Chaque cellule de la grille peut être explorée en détail.
Partage de vos résultats avec vos collègues : vous pouvez sauvegarder le rapport et l'exporter aux formats PDF, Excel et HTML, ou l'imprimer.
Fonctionnalités de personnalisation de la vue :
L'apparence de l'outil de reporting peut être modifiée. Il y a quatre thèmes prédéfinis qui peuvent être à votre goût, et la possibilité de créer votre propre thème.
- Vous pouvez utiliser une fonctionnalité de formatage conditionnel pour mettre en évidence les cellules les plus importantes du tableau croisé dynamique en fonction de valeurs particulières.
- Formatage des nombres
- Si vous devez changer la disposition, vous pouvez choisir une forme classique, compacte ou plate du tableau croisé dynamique. Pour moi, la forme compacte a le style le plus laconique et soigné.
Localisation linguistique — vous pouvez choisir parmi les langues disponibles, ou traduire votre tableau croisé dynamique dans la langue souhaitée en utilisant un simple fichier JSON de modèle.
Intégration et compatibilité :
WebDataRocks peut être intégré dans des applications AngularJS, Angular et React.
Limites :
La taille maximale des données est de 1 Mo.
Création de graphiques :
Il est facile d'intégrer WebDataRocks avec Google Charts, Highcharts ou toute autre bibliothèque de graphiques. Des tutoriels sont disponibles dans la documentation.
En savoir plus :
Démos CodePen :
Solutions avancées
Passons à des outils qui sont des outils BI intégrés plus puissants et offrent une expérience de reporting web plus avancée.
Un essai gratuit de 30 jours est disponible pour tester les deux outils.
Flexmonster
Flexmonster Pivot Table & Charts est un composant de tableau croisé dynamique JavaScript. Il est bien adapté pour l'analyse approfondie des données tabulaires et multidimensionnelles, et la construction de rapports visuels basés sur celles-ci. Les principales différences avec les options gratuites sont le support des cubes OLAP et plus d'options d'intégration.
Fonctionnalités intégrées de reporting web :
Les formats de données pris en charge sont CSV, JSON, les données des bases de données SQL et NoSQL, et les cubes OLAP — tels que les cubes Microsoft Analysis Services et Pentaho Mondrian.
- Vous pouvez utiliser plusieurs agrégations pour résumer les données numériques. Il y a 16 fonctions d'agrégation disponibles et la possibilité de créer une valeur calculée.
- Tri et groupement des données
- Le filtrage peut être effectué par valeurs — pour afficher les enregistrements Top/Bottom N — noms de membres et/ou appliqué à l'ensemble du rapport.
- Vous pouvez ajouter de l'interactivité à votre tableau croisé dynamique en utilisant des gestionnaires d'événements.
- Le rapport final peut être sauvegardé dans un fichier JSON avec toutes les configurations et le formatage appliqués. Vous pouvez le charger plus tard pour un travail ultérieur.
Exporter le rapport en HMTL, Image, CSV, Excel ou PDF sans avoir besoin de connecter des plugins tiers.
Fonctionnalités de personnalisation de la vue
Il est possible de choisir l'un des cinq styles de thème ou d'en créer un personnalisé.
- La fonctionnalité de personnalisation de la grille permet la création de visualisations de carte thermique.
- Formatage conditionnel des cellules
- Formatage des nombres
- Les valeurs de date peuvent être affichées dans un format défini par l'utilisateur.
- La localisation du composant inclut sept langues. Vous pouvez traduire le tableau croisé dynamique vous-même à l'aide d'un fichier JSON de modèle.
Un design adapté aux mobiles
Intégration et compatibilité
Flexmonster peut être inclus dans une simple page web ou intégré dans des applications AngularJS, Angular ou React. Il existe également des tutoriels sur le site officiel pour l'intégration avec jQuery et Webpack.
L'analyse des données MongoDB est d'un intérêt particulier pour ceux qui ont d'énormes quantités de données stockées dans des documents. La connexion à MongoDB est prise en charge via Node.js.
Limites :
Gère jusqu'à 1 million de lignes, il n'y a donc pas de problème avec les grands ensembles de données.
- Création de graphiques :
Flexmonster dispose de graphiques croisés dynamiques comme partie intégrante du composant. Pour accéder à d'autres graphiques, vous pouvez utiliser des guides d'intégration avec Google Charts, Highcharts, FusionCharts ou toute autre bibliothèque de graphiques tierce. Toutes ces approches aident à créer des tableaux de bord interactifs.
En savoir plus :
Démos :
DhtmlxPivot
DhtmlxPivot est une grille croisée dynamique JavaScript pour la création de rapports analytiques. Il fait partie de la suite dhtmlx, mais peut être acheté séparément du bundle. Il offre une interface utilisateur moderne et une intégration avec différentes technologies côté serveur.
Fonctionnalités intégrées de reporting web :
Prend en charge la connexion aux sources de données JSON, .csv et XML. Les données peuvent être chargées à partir d'un tableau JavaScript et d'une table HTML.
- Il n'y a que quatre fonctions d'agrégation intégrées — max, min, sum et count. Des fonctions personnalisées peuvent être créées.
- Groupement, recherche et tri des données
- Filtrage utilisant l'interface utilisateur ou des filtres prédéfinis pour les chaînes, nombres et dates. Vous pouvez également définir des filtres globaux et régler le nombre de lignes à afficher par page sur la grille.
- Fonctionnalité de glisser-déposer
- Les cellules peuvent être éditées et remplies avec du contenu personnalisé
Module intégré pour exporter le rapport vers un fichier Excel avec toutes les configurations sauvegardées
Fonctionnalités de personnalisation de la vue :
La disposition peut être ajustée. Par exemple, vous pouvez changer la largeur des colonnes, la margé gauche, activer un mode "lecture seule" pour le tableau croisé dynamique.
- Formatage conditionnel et CSS personnalisé des cellules
- Design adapté aux mobiles également
La localisation de l'interface est possible via une méthode spéciale.
Intégration et compatibilité :
Prend en charge l'intégration avec de multiples technologies, telles que PHP, Java, .NET, Node.js, Ruby on Rails, ASP.NET, ColdFusion, et Typescript et d'autres technologies.
Limites :
Il n'y a pas d'information sur la taille des données sur le site officiel. Les tests ont montré que le tableau croisé dynamique rend jusqu'à 10 000 lignes.
- Création de graphiques :
Pour utiliser des graphiques dans vos rapports web, la meilleure option est d'utiliser dhtmlxChart. Si vous avez acheté la dhtmlxSuite, ils sont déjà inclus dans le bundle. Cependant, vous pouvez l'acheter séparément.
En savoir plus :
Résumé
À mon avis, un outil parfait contient un ensemble de fonctionnalités intégrées telles que :
- Chargement de données CSV, JSON et multidimensionnelles
- Prise en charge de l'agrégation via l'interface utilisateur
- La capacité d'afficher les données dans des graphiques et de s'intégrer avec toute technologie côté serveur et front-end
- L'exportation doit être facile également, sans avoir besoin d'inclure des modules tiers.
De plus, les outils doivent toujours évoluer pour répondre aux nouvelles demandes des utilisateurs finaux. C'est à vous de choisir celui qui convient à votre projet, et j'espère que cela aidera à améliorer la façon dont vous travaillez avec les données.