Ajoutez des graphiques dans vos applications cartographiques avec Chart.js

Bonjour, aujourd'hui je vais vous présenter un moyen simple pour intégrer des graphiques pour représenter vos données au sein d'une application cartographique réalisée avec l'API ArcGIS for JavaScript. Rendez-vous sur ce tutoriel  pour créer une carte Web en 5 minutes avec l'ArcGIS API for JavaScript et générer une apiKey pour utiliser les services d'ArcGIS Platform.

Pour cet exemple, nous utiliserons une bibliothèque tierce appelée Chart.js. Chart.js est une bibliothèque de graphiques JavaScript simple mais flexible qui facilite la création de graphiques simples pour vos données comme nous vous pouvons le voir en cliquant sur les départements dans l'application ci-dessus. Vous pouvez découvrir les différentes manières d'installer Chart.js via leur documentation d'installation.

Intégration de Chart.js dans votre application JavaScript

Une fois que vous avez terminé les étapes ci-dessus, nous pouvons maintenant utiliser Chart.js dans notre fichier JavaScript ...

require([ "esri/config","esri/Map", "esri/views/MapView", "esri/PopupTemplate", "esri/layers/FeatureLayer", "esri/widgets/Popup", "esri/tasks/support/Query", "https://cdn.jsdelivr.net/npm/chart.js@2.8.0","esri/widgets/Search"], function (esriConfig, Map, MapView, PopupTemplate, FeatureLayer, Popup, Query, Chart, Search)

Dans le tableau require, nous insérons le lien CDN vers la bibliothèque. Nous nommons ensuite le module Chart afin de pouvoir en créer une nouvelle instance plus tard dans notre code.

Interroger des données à partir d'une couche d'entités

Dans cet exemple, j'utilise une couche d'entités de communes contenant plusieurs indicateurs Insee à partir d'ArcGIS Online. Chaque fois que je clique sur une commune, je veux une fenêtre contextuelle pour afficher des informations sur les différentes catégories de CSP de la commune sur laquelle j'ai cliqué. Pour cela, nous pouvons utiliser une Query, qui nous permettra d'obtenir des informations de notre couche d'entités et d'interroger spatialement la couche pour n'afficher que les données sur lesquelles nous avons cliqué. Une fois la promesse résolue, nous allons appeler la popup de la vue et envoyer les données à setContentInfo. C'est une fonction qui créera le graphique pour nous. La fonction setContentInfo sera expliquée plus en détail dans la section suivante. Voici l'extrait de code qui montre cela.

// Create a query to get data from the feature layer var query = new Query(); query.returnGeometry = true; query.outFields = ["CSP_PopActive_Cadres_Actifs", "CSP_PopActive_Cadres_Chômeurs", "CSP_PopActive_Ouvriers_Actifs", "CSP_PopActive_Ouvriers_Chômeurs", "CSP_PopActive_Agriculteurs_Acti", "CSP_PopActive_Employés_Actifs", "COMMUNE_NOM_COM"]; query.where = "1=1"; query.num = 50;

Créer un graphique à l'aide de Chart.js

Nous pouvons maintenant inclure le module Chart que nous avons instancié il y a quelque temps. Dans le code précédent, nous avons défini le paramètre de contenu sur une fonction appelée setContentInfo et transmis les données. Dans l'extrait de code suivant, nous allons créer cette fonction et l'utiliser pour initialiser nos graphiques dans la fenêtre contextuelle. Pour commencer, nous allons créer un nouvel élément de canvas et lui donner l'identifiant de myChart.

var canvas = document.createElement('canvas'); canvas.id = "myChart";

Ensuite, nous allons configurer l'objet Structure de données avec nos propres données. Dans ce cas particulier, nous utilisons un graphique en anneau qui aurait une structure de données différente d'un graphique linéaire. Pour plus d'informations sur les différents types de graphiques que vous pouvez utiliser, consultez la documentation suivante sur le site Web Chart.js. Pour un graphique en anneau, l'objet ressemblerait à l'extrait de code suivant ci-dessous.

// Create a data object, this will include the data from the feature layer and other information like color or labels. var data = { datasets: [{ data: [results.CSP_PopActive_Cadres_Actifs, results.CSP_PopActive_Ouvriers_Actifs, results.CSP_PopActive_Employés_Actifs, results.CSP_PopActive_Agriculteurs_Acti], backgroundColor: ["#4286f4", "#41f4be", "#8b41f4", "#e241f4", "#f44185", "#f4cd41"] }], labels: [ 'Cadres actifs', 'Ouvriers actifs', 'Employes actifs', 'Agriculteurs actifs', ] };

Vous pouvez voir que dans le tableau de data, nous définissons les résultats que nous avons obtenus de notre couche d'entités. Chaque résultat représentera une partie du graphique en anneau, le backgroundColor est également défini pour chaque valeur de résultat. En outre, l'attribut labels est défini pour chaque élément du tableau de data.

Enfin, notre dernière étape consiste à créer un nouvel objet Chart avec les propriétés de data et de type. Ensuite, nous renvoyons l'objet Chart.

var myPieChart = new Chart(canvas, { type: 'doughnut', data: data });

return canvas;

Une fois que l'objet est de retour, nous devrions obtenir un graphique dans notre fenêtre contextuelle montrant des informations de CSP chaque fois que nous cliquons sur une commune. 

Conclusion

L'API ArcGIS for JavaScript facilite l'intégration de graphiques provenant de bibliothèques tierces telles que Chart.js. Il existe de nombreuses autres bibliothèques que vous pouvez intégrer dans votre application JavaScript comme celle-ci, ce qui vous permet de créer des cartes puissantes avec des fonctionnalités supplémentaires. N'hésitez pas à vous rendre sur la page GitHub pour consulter l'exemple complet.

Vous pouvez vous abonner à ce blog pour lire d'autres articles sur le développement Web d'applications cartographiques et découvrir comment  réaliser des applications Web cartographiques et dynamiques. N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.