Conseils & Astuces ArcGIS Online - N°160

// On indique les champs nécessaires dans cette expression Arcade
Expects($feature,"*")

// On crée deux tableaux contenant les attributs à utiliser pour la pyramide des âges F et H
// L'ordre des champs est importan, ce sera celui du diagramme
var array_fields_F = ['P18_F75P','P18_F6074','P18_F4559','P18_F3044','P18_F1529','P18_F0014' ]
var array_fields_H = ['P18_H75P','P18_H6074','P18_H4559','P18_H3044','P18_H1529','P18_H0014' ]

// On initialise un tableau et on le remplit avec les valeurs de population pour les femmes
var array_data_F = []
for (var field_name in array_fields_F){
  Push(array_data_F, -1 * $feature[array_fields_F[field_name]])
}
// On initialise un tableau et on le remplit avec les valeurs de population pour les hommes
var array_data_H = []
for (var field_name in array_fields_H){
  Push(array_data_H, $feature[array_fields_H[field_name]])
}

// On définit les paramètres du diagramme pour générer l'image à partir de l'API QuickChart
// Ces paramètres sont basés sur le modèle de diagramme suivant : https://tinyurl.com/y674wv7x
var params_chart = {
  type: 'horizontalBar',
  data: {
    labels: ['75 et +','60-74 ans','45-59 ans','30-44 ans','15-29 ans','0-14 ans'],
    datasets: [
      {
        label: 'Femme',
        backgroundColor: 'rgb(255, 99, 132)',
        data: array_data_F,
      },
      {
        label: 'Homme',
        backgroundColor: 'rgb(54, 162, 235)',
        data: array_data_H,
      },
    ],
  },
  options: {
    legend: {
      display: true,
      position: 'bottom',
      align: 'center',
      fontSize: 16
    },
    title: {
      display: true,
      text: 'Pyramide des âges (2018)',
      fontSize: 17
    },
    scales: {
      xAxes: [
        {
          stacked: true,
        },
      ],
      yAxes: [
        {
          stacked: true,
        },
      ],
    },
  },
}

// Construction de l'url complète permettant de générer l'image de la pyramide des âges
var site_url="https://quickchart.io/chart"
var chart_url=site_url + "?c=" + URLEncode(Text(params_chart)) 

// On renvoit la chaine HTML fin alisée pour le contenu de la fenêtre contextuelle
return { 
  type : 'text', 
  text : `<img src='${chart_url}' />`
}