Un didacticiel sur les FusionCharts d'exploration en profondeur dans jQuery

Publié: 2022-03-11

La visualisation des données facilite leur lecture

Lorsqu'il s'agit d'analyser des données, la plupart des entreprises s'appuient sur MS Excel ou Google Sheets. Bien qu'il s'agisse d'outils puissants, il est difficile de remarquer les tendances, et encore moins de donner un sens à de grandes rangées de données de feuille de calcul. Traiter les données présentées de cette manière n'est pas très intéressant, mais une fois que vous ajoutez la visualisation à ces données, les choses deviennent plus faciles à gérer, et c'est le sujet du tutoriel d'aujourd'hui - créer des graphiques interactifs à l'aide de jQuery.

Traiter les données d'un tableur est ennuyeux.

Il est difficile de remarquer des tendances à partir de lignes de données de feuille de calcul, mais une fois que vous avez ajouté la visualisation...

Tweeter

J'utiliserai la bibliothèque de graphiques JavaScript de FusionCharts pour ce projet car elle offre une grande bibliothèque de plus de 90 graphiques, est compatible avec tous les navigateurs et est assez facile à utiliser. Il propose également un plugin dédié pour jQuery qui nous facilitera la tâche.

Je vais commencer par créer un graphique de base à l'aide de la bibliothèque JavaScript principale de FusionCharts et de son plug-in de graphiques jQuery, puis j'y ajouterai la fonction d'exploration. L'exploration vers le bas vous permet de passer d'un graphique à un autre en cliquant sur un tracé de données.

Le terme « graphique de données » est contextuel ; il fait référence à une colonne dans un graphique à colonnes, à des lignes dans un graphique linéaire, à des tranches de tarte dans un graphique à secteurs. En cliquant sur un tracé de données du graphique parent, un graphique enfant s'affiche, affichant les données relatives un niveau plus bas.

Cliquer sur un tracé de données sur le graphique parent fera apparaître un graphique enfant.

Présentation des FusionCharts

Avant de commencer le didacticiel, couvrons l'anatomie de base de FusionCharts. Chaque graphique est composé de ces éléments clés :

Légende : le titre sur le graphique. Il explique ce qui est tracé.
Sous-légende : Le texte sous la légende spécifiant des informations supplémentaires sur le graphique, indique souvent une période à partir de laquelle les données ont été collectées.
Légende : affiche un symbole pour chaque tracé de données sur le graphique. Un tracé particulier peut être activé ou désactivé en cliquant sur son icône de légende respective.
Tracé de données : il s'agit de représentations de données sur le graphique. Un tracé de données peut être une colonne dans un histogramme, des lignes dans un graphique en courbes ou des secteurs dans un graphique à secteurs.
Info-bulle : texte qui apparaît lorsque vous survolez un tracé de données, utilisé pour transmettre des informations supplémentaires sur ce tracé de données particulier.

Créer un graphique détaillé

Avant de commencer, voici une capture d'écran du graphique que nous allons créer dans ce didacticiel. Vous pouvez voir le JSFiddle ici ou accéder au code source complet du projet sur mon référentiel GitHub.

Un aperçu du projet jquery final de ce tutoriel.

J'ai divisé le processus de création d'un graphique détaillé en cinq étapes, alors commençons.

Étape 1 : Inclure les fichiers JavaScript et créer le conteneur de graphiques

Tout d'abord, nous devons inclure tous les fichiers JS dont notre projet dépend en utilisant la <script> . Si la page n'existe pas déjà, veuillez créer un document HTML vierge et inclure les fichiers ci-dessous dans la section <head> . Nous avons maintenant besoin des quatre fichiers suivants :

jQuery minifié
Bibliothèque JS principale de FusionCharts (comprend à la fois fusioncharts.js et fusioncharts.charts.js )
Plug-in jQuery de FusionCharts

Notre section <head> ressemblera maintenant à ceci :

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

Maintenant que toutes les dépendances sont incluses, il est temps de créer le conteneur <div> pour le graphique et de l'intégrer dans notre page avec le code HTML suivant :

 <div>drill-down chart will load here</div>

Maintenant, nous pouvons le sélectionner en utilisant le sélecteur $ de jQuery dans le code :

 $("#drill-down-chart")

Remarque : Si vous avez plusieurs graphiques sur votre page, vous aurez besoin d'un conteneur distinct pour chaque graphique avec un id unique .

La visualisation des données facilite la lecture.

Étape 2 : Obtenir et structurer les données

FusionCharts accepte les données aux formats JSON et XML, mais j'ai choisi d'utiliser JSON car il est devenu le format standard pour l'échange de données entre les applications Web. Le tableau de données JSON pour un graphique de base contient un objet pour chaque tracé de données, et à l'intérieur de chaque objet de tracé de données, nous définissons son étiquette et sa valeur respectives. Cette structure ressemble à :

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

Au fur et à mesure que nous traçons notre graphique détaillé, son JSON devient plus complexe. Le lien entre les graphiques parent et enfant nécessite une paire key - value supplémentaire à l'intérieur de chaque objet du tableau de données. La nouvelle clé (sans surprise, appelée link ) contiendra l'identifiant du graphique enfant que vous obtiendrez lorsque vous cliquerez sur son tracé de données parent. Le format de définition de l' id du graphique enfant est newchart-dataFormat-childId . Puisque nous utilisons JSON, nous savons que tout ce que nous lions ressemblera à newchart-json-childId . Voici comment nous le définissons pour notre graphique :

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

Étape 3 : Insertion des données du graphique

Une fois que vous avez les données prêtes, il est temps d'insérer le graphique sur votre page en utilisant la méthode insertFusionCharts fournie par le plugin jQuery :

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

Décomposons l'extrait de code ci-dessus :

type définit le type de graphique parent que nous traçons. Dans ce cas, column2d . Chaque graphique de la bibliothèque FusionCharts possède un alias unique. Vous pouvez trouver l'alias du graphique que vous souhaitez tracer sur la page de liste des graphiques de FusionCharts.
id définit l'identifiant unique du graphique, à ne pas confondre avec l'identifiant de l'élément <div> contenant notre graphique. L' id d'un graphique est utilisé pour sélectionner un graphique pour appliquer des gestionnaires d'événements et des méthodes d'appel. Nous en ferons usage à l'étape 5.
width et height définissent la dimension du graphique en pixels ou en pourcentage. Une largeur de 100 % indique au graphique d'occuper toute la largeur du conteneur.
Nous définissons le format des données à l'aide de l'attribut dataFormat . Nous utilisons JSON pour notre exemple, mais il existe également d'autres formats de données acceptables, tels qu'une URL XML. Pour en savoir plus sur les formats de données, consultez la page de documentation officielle de FusionCharts.
dataSource contient le contenu réel du graphique et l'objet chart à l'intérieur contient les options de configuration du graphique, telles que caption et subcaption. Le tableau data devrait vous sembler familier puisque nous l'avons créé à l'étape 2 (il contient les données à tracer) et linkedData contient le contenu du graphique enfant (le graphique que vous obtenez après avoir cliqué sur un tracé de données sur le graphique parent).

En relation : embauchez les 3 % d'architectes Big Data indépendants les plus performants.

Étape 4 : Création du tableau de données liées pour les graphiques enfants

Maintenant que nous avons défini le graphique parent, il est temps de créer un graphique enfant pour chaque tracé de données, un processus très similaire à la création du graphique parent. Le tableau linkedData , créé dans la méthode 'insertFusionCharts', définira un objet distinct pour chaque graphique enfant. Voici à quoi ressemblent les données du premier graphique enfant :

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id est l'identifiant du graphique enfant individuel que nous avons défini à l'étape 2. linkedChart est similaire à dataSource de l'étape 3 en ce sens qu'il contient le contenu réel de ce graphique. Il existe de nombreux autres attributs qui vont à l'intérieur de l'objet graphique, que je couvre en détail dans la section ultérieure, "Améliorer la conception avec les attributs de graphique".

Étape 5 : Configuration détaillée personnalisée

Divers types de graphiques

Jusqu'à présent, dans notre exemple de code, les graphiques parent et enfant partagent le même type de graphique. Si vous souhaitez accéder à un type de graphique différent (de la colonne au secteur, par exemple), vous le faites en liant l'événement fusionchartsrendered .

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Dans le code ci-dessus, l'événement fusionchartsrendered appellera la méthode configureLink , qui définit le type de tous les graphiques enfants ainsi que toutes les options de bouton de superposition. Vous pouvez également spécifier des types de graphique distincts pour chaque graphique enfant. Il existe de nombreuses options disponibles dans la méthode configureLink , il peut donc être utile de consulter sa documentation de référence sur l'API à partir de FusionCharts.

Rendu des graphiques dans différentes divisions

Une autre chose intéressante que vous pouvez faire est de rendre le graphique enfant dans un conteneur différent plutôt que le même que son parent. Pour cela, définissez un conteneur HTML <div> séparé après le conteneur de graphique parent et transmettez son identifiant à l'attribut renderAt comme indiqué ci-dessous :

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

La valeur donnée à l'attribut renderAt spécifie l'id du <div> dans lequel le graphique enfant sera rendu ( chart-container2 ).

Amélioration de la conception avec les attributs de graphique

En suivant ce tutoriel, vous obtiendrez un tableau fonctionnel, mais ce sera un peu moche si vous en restez là. Pour une présentation plus attrayante, vous devrez utiliser des "attributs de graphique" cosmétiques. Les attributs de graphique sont définis à l'intérieur de l'objet chart et utilisés pour personnaliser les options de rendu. Vous trouverez peut-être utile de vous référer au graphique explicatif FusionCharts lors de l'examen de ces principaux attributs configurables :

paletteColors définit la couleur des tracés de données. Si vous donnez une seule couleur ici, toutes les colonnes seront de cette couleur. Si vous donnez plusieurs couleurs, la première colonne prendra la première valeur, la deuxième colonne prendra la deuxième valeur, et ainsi de suite.
plotSpacePercent contrôle l'espace entre les colonnes. La valeur par défaut est 20 (la valeur est un entier, mais l'unité est un pourcentage) et la plage autorisée est de 0 à 80. Une valeur de zéro fera que les colonnes se regroupent et collent les unes aux autres.
baseFont définit la famille de polices du graphique. Vous pouvez utiliser n'importe quelle police que vous aimez ; J'ai utilisé Open Sans de Google dans mon graphique. Incluez simplement le fichier de police externe dans votre page HTML afin de l'utiliser dans votre graphique.
plotToolText vous permet de personnaliser les info-bulles. En utilisant des macros telles que $label et * $dataValue , vous pouvez afficher des informations spécifiques sur un tracé de données particulier à l'intérieur d'un <div> , puis styliser ce <div> à l'aide de CSS en ligne. Voici ce que j'ai fait dans notre exemple :

 "plotToolText": "<div>$label: $dataValue</div>"

theme vous permet de définir vos attributs de graphique dans un fichier différent et de les appliquer une fois ici au lieu d'encombrer votre objet graphique avec de nombreux attributs de graphique. Vous pouvez trouver le fichier de thème pour ce didacticiel - toptal.js - dans le dossier JS du référentiel GitHub du projet.

C'est tout ce que je vais couvrir, mais il y a plus d'une centaine d'attributs pour un graphique, donc si vous souhaitez explorer davantage, veuillez visiter la page des attributs de graphique de FusionCharts et recherchez votre type de graphique particulier.

Plus de ressources FusionCharts et jQuery

Bien que j'ai couvert les éléments les plus importants de la création d'un graphique détaillé à l'aide de jQuery, il y a de fortes chances que vous ayez besoin d'aide lorsque vous essayez de le faire vous-même. Pour ce moment, voici quelques ressources supplémentaires :

Plugin de graphiques jQuery : pour vous inspirer, visitez la page officielle du plug-in de graphiques jQuery pour voir des exemples en direct.
Documentation : Si vous ne parvenez pas à comprendre quelque chose, la documentation est le premier endroit où vous devriez chercher. Voici des liens pratiques pour le plug-in jQuery et le graphique détaillé (également appelés graphiques liés).
Démos : chaque bibliothèque de graphiques propose des échantillons en direct pour montrer ses capacités, et FusionCharts n'est pas différent. Rendez-vous sur sa galerie de démonstration de plus de 800 échantillons en direct, avec le code source complet si vous avez besoin d'idées. Il y a de fortes chances que tout ce que vous essayez de faire soit déjà disponible. Pas besoin de repartir de zéro ; bifurquez simplement le violon et continuez à partir de là!
Plus d'extensions : si vous n'utilisez pas le JavaScript vanille ou jQuery, vous pouvez explorer d'autres plugins et wrappers proposés par FusionCharts sur cette page. Ils ont des plugins dédiés pour une variété de bibliothèques et de frameworks tels que Angular, React, Java, ASP.NET, etc.

PS: Je vais traîner dans la section des commentaires ci-dessous, alors n'hésitez pas à poster toutes les questions que vous pourriez avoir sur mon article. Je suis heureux de vous aider !

Connexe : Exploration de données pour l'analyse prédictive des réseaux sociaux