Conseils & Astuces ArcGIS Online - N°168
N° 168 - Utiliser Arcade et une API tiers pour synthétiser vos données dans des diagrammes radar dans vos fenêtres contextuelles
Dans mon précédent article, je vous montrais comment synthétiser, par quartier, les signalements réalisés par des citoyens avec l'application "Dans Ma Rue". Dans mon exemple, j'avais choisi de les représenter par type et par mois à l'aide d'un diagramme à barres empilées. Aujourd'hui, je propose de modifier la représentation en utilisant un diagramme de type "radar" qui convient bien à l'affichage d'effectif par mois, et ceci pour plusieurs catégories.
Etant donné que les diagrammes polaires ne sont pas des
éléments disponibles en standard dans les fenêtres contextuelles ArcGIS,
nous utiliserons donc une API tiers pour les générer. Voici donc comment
nous allons procéder :
-
Connectez-vous tout d'abord sur votre portail ArcGIS puis ouvrez la
carte web contenant la couche d'entités. Par défaut, la fenêtre
contextuelle présente la liste des différents attributs.
-
Dans la zone de configuration des fenêtres contextuelles la couche,
vous pouvez supprimer l'élément "Liste de champs" proposé par
défaut puis ajouter un élément de contenu Arcade. Ce dernier nous
permettra de réaliser les calculs statistiques nécessaires et
configurer un rendu personnalisé (en HTML) de nos informations.
-
Dans l'éditeur Arcade, vous effacerez les instructions déjà présentes
par l'expression Arcade ci-dessous :
// On définit les attributs du quartier que l'on souhaite récupérerExpects($feature, "*")// On récupère la couche des signalements depuis la cartevar signalements = FeatureSetByName($map, "Signalements Dans Ma Rue 2021")// On sélectionne les signalements qui intersectent le quartiervar Intersect_Signalements = Intersects (signalements,$feature)// On définit un tableau pour les couleurs des différents types de signalementvar array_colors=['rgb(255, 224, 64)','rgb(182, 129, 75)','rgb(156, 79, 156)','rgb(107, 101, 213)','rgb(32, 158, 205)','rgb(244, 130, 216)','rgb(234, 73, 82)','rgb(168, 201, 54)','rgb(250, 145, 33)','rgb(67, 177, 153)']// On définit un tableau pour les libellés des différents moisvar array_labels = ['Janvier','Fevrier','Mars','Avril','Mai','Juin', 'Juillet','Aout','Septembre','Octobre','Novembre','Décembre']// Récapitulation des signalements par type et par moisvar comptage_par_type_et_mois = GroupBy(Intersect_Signalements,[ 'TYPE_DECLARATION', 'MOIS_DECLARATION'],{name:'count', expression: '1',statistic:'COUNT'})// On crée un FeatureSet avec les différents types de signalementvar types_Signalements=Distinct(comptage_par_type_et_mois, 'TYPE_DECLARATION')// On trie le FeatureSet par ordre alphabétique pour une bonne correspondance avec les couleurstypes_Signalements = OrderBy(types_Signalements, 'TYPE_DECLARATION ASC')// Initialisation d'un tableau pour stocker les datasets à représenter dans le diagrammevar dataset_chart = []var i = 0// On boucle sur les différents types de signalementfor (var f in types_Signalements){var type = f.TYPE_DECLARATIONvar comptage_par_mois = Filter(comptage_par_type_et_mois,'TYPE_DECLARATION = @type')comptage_par_mois = OrderBy(comptage_par_mois, 'MOIS_DECLARATION ASC')// On initialise un tableau pour stocker les comptages par moisvar array_data=[]// On boucle sur chaque moisfor (var f in comptage_par_mois){Push(array_data, f.COUNT)}// On construit un dictionnaire qui décrit chaque dataset pour le diagrammevar dict = {// La couleur de remplissage des barres est celle des contours des barres// mais avec une opacité de 80%backgroundColor: Replace(Replace(array_colors[i],"rgb","rgba"),")",",0.45)"),borderColor: array_colors[i],data: array_data,label: type,borderWidth: 1.5,}Push(dataset_chart,dict)i++}// On construit les paramètres permettant de générer le diagramme avec l'API QuickChart// Pour cela on se base sur le modèle de diagramme radar : https://tinyurl.com/mr4c24m2var params_chart = {type: 'radar',data: {labels: array_labels,datasets: dataset_chart,},options: {legend: {display: true,position: 'bottom',align: 'start',fontsize: '7',},spanGaps: false,elements: {line: {tension: 0.000001,},},},}// On applique un encodage d'url correct pour les paramètres du diagrammevar param_url = URLEncode(Text(params_chart))// On construit l'url complète permettant de générer l'image du diagrammevar chart_url="https://quickchart.io/chart?width=600&height=600&c=" + param_url// On construit la chaîne HTML à renvoyervar HTML = `<div>${Count(Intersect_Signalements)} signalements effectués dans ce quartier pour 2021.Voici leur répartition saisonnalisée :<br/><br/><img src='${chart_url}' /></div>`// On renvoie la chaine HTML du contenu de la fenêtre contextuellereturn {type : 'text',text : HTML}On notera l'usage de l'API QuickChart qui permet de générer différents types de diagrammes à partir d'une url et une série de paramètres. Celle-ci est basée sur des librairies Open Source que vous pouvez installer sur votre propre serveur ou utiliser en ligne de manière gratuite (avec une limite sur le nombre de requêtes). Une version payante permet un accès illimité.
On notera également l'usage du caractère backtick ( ` et non ') pour utiliser des littéraux et construire la chaîne HTML souhaitée.
-
Vous pouvez maintenant cliquer sur le bouton "Terminé" pour
valider l'expression.
- La fenêtre contextuelle s'affiche désormais avec les informations sur les signalements par type et par mois pour le quartier cliqué, le tout sous la forme d'un diagramme à barres empilées avec la légende associée.
J'espère que cet exemple vous inspirera et que vous pourrez l'adapter
à vos cas d'usage.
Bonne route sur ArcGIS Online !
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS
Online, cliquez sur ce lien
0 commentaires :
Enregistrer un commentaire