Insérer des diagrammes, des tables et des métriques

Créez des visualisations de données utilisant des diagrammes, des tables et des résumés statistiques. Ces types de visualisations sont utiles pour afficher les données statistiques principales et les tendances sur les sites et les pages. Les propriétaires de site et les membres du groupe de modification peuvent créer les visualisations de données en utilisant des jeux de données privés et publics. Seules les personnes avec lesquelles les données sont partagées sont en mesure de voir un diagramme ou des statistiques après qu’elles se soient connectées à un site ou une page.

Créer une table

Utilisez la fiche Text (Texte) pour organiser les informations dans une table.

Conseil :

Pour créer une table avec HTML, sélectionnez </> Edit in HTML (Mettre à jour en HTML) sur la fiche Text (Texte).

Pour créer une table, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Dans le volet Customize (Personnaliser), sélectionnez Layout (Mise en page).
3. Faites glisser une fiche Text (Texte) dans une ligne existante.
4. Sélectionnez l’option de table.
5. Sélectionnez le nombre de cellules que vous désirez par ligne et par colonne, puis cliquez pour insérer la table.
6. Pour ajouter ou supprimer des lignes ou des colonnes, sélectionnez une cellule et choisissez le bouton d’insertion ou de suppression des lignes ou des colonnes. Sélectionnez le bouton de suppression pour supprimer entièrement la table.

   Conseil :

   Pour ajouter un en-tête à la table, sélectionnez la ligne supérieure de la table, puis le bouton Toggle table header (Activer/désactiver l’en-tête de la table). Les en-têtes facilitent l’exploration du contenu des tables par les personnes recourant aux technologies d’assistance.

7. Sélectionnez Save layout (Enregistrer une mise en page).

Afficher une synthèse des métriques

Utilisez la fiche Summary statistic (Résumé statistique) pour afficher les indicateurs clés de performance et bien plus encore. Vous pouvez configurer une fiche pour utiliser une valeur dynamique ou statique. Les valeurs dynamiques sont générées par une requête de jeu de données et sont automatiquement mises à jour au fur et à mesure de la mise à jour du jeu de données. Les valeurs statiques sont saisies et mises à jour manuellement. Seules les personnes avec qui les statistiques de synthèse ont été partagées pourront consulter les statistiques.

Pour afficher une synthèse des métriques, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Dans le volet Customize (Personnaliser), sélectionnez Layout (Mise en page).
3. Faites glisser une fiche Summary statistic (Résumé statistique) sur une ligne existante.
4. Pour Type, sélectionnez Dynamic (Dynamique) ou Static (Statique).
5. Pour les fiches Dynamic (Dynamique), choisissez Select content (Sélectionner le contenu), sélectionnez un jeu de données et choisissez Add (Ajouter). Sélectionnez Layer / table (Couche / Table) et pour Attribute (Attribut), choisissez un champ dans le jeu de données.
6. Pour Aggregation (Agrégation), choisissez le type d’opération à effectuer sur le champ sélectionné.
   • Pour les champs de texte et de date, choisissez entre décompte, minimum ou maximum.
   • Pour les champs numériques, choisissez entre décompte, minimum, maximum, somme, moyenne, écart type moyen ou variance.
7. Pour ajouter un filtre (facultatif), activez Attribute filters (Filtres attributaires). Sélectionnez un attribut, un type de filtre et des paramètres (en fonction du type de champ). Pour supprimer un filtre, sélectionnez le bouton More actions (Plus d’actions) .
8. Pour les fiches Static (Statique), saisissez une Display value (Valeur d’affichage).
9. Activez Formatting (Mise en forme), le cas échéant. Entrez les unités à afficher et choisissez leur emplacement.
10. Sous Advanced configuration (Configuration avancée) (Dynamic (Dynamique) uniquement), définissez une période Server timeout (Délai d’attente du serveur), le cas échéant (pour accorder un temps de réponse plus long aux services plus importants ou plus lents).
11. Sous Details (Détails), entrez un titre dans Title (Titre), un sous-titre dans Subtitle (Sous-titre) et un texte de fin dans Trailing text (Texte de fin), le cas échéant. Pour fournir un lien vers le jeu de données de statistique, activez Display source link (Afficher le lien source) (Dynamic (Dynamique) uniquement). Sur le site en direct, ce lien permet d’accéder à la page de détails de l’élément en tant que page de prévisualisation.

    Conseil :

    Si vous affichez le texte de fin, veiller à faire en sorte que sa couleur contraste avec la couleur d’arrière-plan de la ligne.

12. Sous Appearance (Apparence), sélectionnez le type d’alignement et la couleur du texte de la statistique.
13. Sous Sharing (Partage), vous pouvez activer le partage (les utilisateurs peuvent copier et partager un lien direct vers cette fiche sur cette page). Lorsque le partage est activé, vous pouvez définir le bouton Share (Partager) pour ne le présenter que lorsqu’il est survolé par le curseur ou pour qu’il soit toujours visible.
14. Sélectionnez Enregistrer.

Afficher un diagramme linéaire, à barres, à secteurs ou de nuage de points

Utilisez la fiche Chart (Diagramme) pour créer et afficher différents types de diagramme. Utilisez Bar chart (Diagramme à barres) pour synthétiser et comparer les données catégorielles. Utilisez Line chart (Diagramme linéaire) pour visualiser l’évolution sur une plage continue : temporelle ou de distance. Utilisez Pie chart (Diagramme à secteurs) pour illustrer le lien entre chaque pièce individuelle et un ensemble, si les données ne comportent que quelques catégories. Utilisez Scatterplot (Nuage de points) pour afficher la relation entre deux variables numériques ; affichez une variable sur l’axe x et l’autre variable sur l’axe y.

Pour afficher un de ces diagrammes, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Dans le volet Customize (Personnaliser), sélectionnez Layout (Mise en page).
3. Faites glisser une fiche Chart (Diagramme) sur une ligne existante.
4. Sélectionnez une valeur pour Chart type (Type de diagramme) (Bar chart (Diagramme à barres) est sélectionné par défaut).
5. Sélectionnez Find an item (Rechercher un élément).
6. Sélectionnez un élément parmi les services de données disponibles et sélectionnez une couche ou table (si besoin).
7. Sélectionnez Enregistrer.
8. Dans Choose Category Attribute (Choisir un attribut de catégorie), sélectionnez l’élément de diagramme principal parmi vos données.

   Les champs de type numérique et chaîne peuvent être utilisés dans les diagrammes. Par défaut, lorsque vous sélectionnez un attribut de catégorie, le diagramme généré sera un comptage de cet attribut.

9. Si vous le souhaitez, dans Choose Value Attribute (Choisir un attribut de valeur), vous pouvez sélectionner un champ numérique à utiliser comme métrique de valeur pour votre attribut de catégorie. L’opération statistique par défaut de ce champ est Sum (Somme). Vous pouvez modifier l’opération à l’aide du menu déroulant sous Choose Value Attribute (Choisir un attribut de valeur). L’attribut de valeur prend en charge les valeurs suivantes : Minimum, Maximum, Sum (Somme), Average (Moyenne) et Count (Total). Si vous sélectionnez Count (Total), l’attribut de valeur est désélectionné (aucun champ supplémentaire n’est requis pour comptabiliser l’attribut de catégorie).

   Les champs de type numérique et chaîne peuvent être utilisés dans les diagrammes. Par défaut, lorsque vous sélectionnez un attribut de catégorie, le diagramme généré sera un comptage de cet attribut.

10. Ouvrez le menu Options pour personnaliser l’affichage de votre diagramme avec les paramètres suivants :
    • Sort (Tri) permet de choisir le mode d’affichage des données attributaires. Sélectionnez un attribut et cliquez sur le bouton de tri en regard de l’attribut pour afficher les données dans l’ordre croissant ou décroissant.
    • Height (px) (Hauteur [px]) permet de définir une valeur de hauteur (pixels) pour le diagramme.
    • Chart title (Titre du diagramme) permet d’afficher un titre pour le diagramme. Si vous affichez un titre, saisissez son nom et choisissez un alignement.
    • Pour Primary Chart Color (Couleur du diagramme principal), entrez un code couleur ou utilisez le sélecteur de couleurs pour choisir une couleur.
    • Pour Bar chart (Diagramme à barres), saisissez un texte dans Category label (Étiquette de catégorie) et Value label (Étiquette de valeur).
    • Pour Line chart (Diagramme linéaire), saisissez un texte dans Category label (Étiquette de catégorie) pour chaque point et dans Value Label (Étiquette de valeur) pour la métrique (affichée dans l’info-bulle).
    • Pour Pie chart (Diagramme à secteurs), saisissez un texte dans Category label (Étiquette de catégorie) pour chaque secteur et dans Value label (Étiquette de valeur) pour la métrique (affichée dans l’info-bulle).
    • Pour Scatterplots (Nuages de points), saisissez les valeurs X Axis Label (Étiquette de l’axe X) et Y Axis Label (Étiquette de l’axe Y) à afficher dans le diagramme.
11. Dans Server connection timeout (seconds) (Délai d’expiration de la connexion au serveur [secondes]), définissez une valeur plus élevée (pour les grands services) afin de donner au service davantage de temps pour répondre.
12. Sélectionnez Save layout (Enregistrer une mise en page).

Afficher un diagramme JSON

Utilisez la fiche Chart (Diagramme) et créez un diagramme personnalisé avec JSON à l'aide d'une spécification de diagramme spécifique.

Pour afficher un diagramme JSON, procédez comme suit :

1. Ouvrez un site ou une page en mode de mise à jour.
2. Dans le volet Customize (Personnaliser), sélectionnez Layout (Mise en page).
3. Faites glisser une fiche Chart (Diagramme) sur une ligne existante.
4. Sélectionnez le diagramme JSON.
5. Entrez votre JSON dans le champ JSON Chart Specification (Spécifications de diagramme JSON).
6. Vous avez également la possibilité, dans la section Options, d’activer ou de désactiver les paramètres Chart Title (Titre du diagramme) et Height (Hauteur) (en pixels), ainsi que de les personnaliser.
7. Dans Server connection timeout (seconds) (Délai d’expiration de la connexion au serveur [secondes]), définissez une valeur plus élevée (pour les grands services) afin de donner au service davantage de temps pour répondre.
8. Sélectionnez Save layout (Enregistrer une mise en page).

Jeux de données

Le tableau des jeux de données indique l'URL du service d'entités de ArcGIS et les paramètres de requête. Pour en savoir plus sur les paramètres de requête, consultez la documentation de l'API REST.

{ "datasets": [ { "url": "SampleArcGISFeatureService_URL", "name" : "Number_of_SUM",
"query": { "groupByFieldsForStatistics": "Zip", "outStatistics": [{
"statisticType": "sum", "onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM" }] } } ]
}

Série

Le tableau Series (Série) permet de préciser les appariements entre les champs de la réponse du service et les aspects visuels du diagramme (axes x,y, couleur et taille des diagrammes de nuages de points et rayon des diagrammes à secteurs).

{ "series": [ { "source": "Number_of_SUM", "category": { "field": "Type", "label": "Facility
Use" }, "value": { "field":"Number_of_SUM","label":"Total Students" }} ] }

Débrayages

La propriété de remplacement permet de préciser les effets visuels, comme la couleur ou le positionnement, pour l’ensemble du diagramme.

"overrides": {
      "legend": {
          "enabled": true
      },
      "backgroundColor": "#E6E6FA",
      "backgroundAlpha": 1
  }
}

Spécifications

La propriété des spécifications vous permet d’entrer une spécification Cedar complète pour obtenir un diagramme entièrement personnalisé. Voir des exemples des spécifications d'un diagramme existant.

Exemple de diagramme à barres

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Number_of_SUM",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": {"field": "Number_of_SUM", "label": "Number of Students"},
      "source": "Number_of_SUM"
    }
  ]
}

Exemple de diagramme à barres horizontales

{
  "type": "bar-horizontal",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Number_of_SUM",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": {"field": "Number_of_SUM", "label": "Number of Students"},
      "source": "Number_of_SUM"
    }
  ],
  "overrides": {
    "categoryAxis": {
      "labelRotation": -45
    }
  }
}

Exemple de diagramme à barres groupées

Remarque :

Chaque série est appariée à un groupe.

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

Exemple de diagramme de nuage de points

{
  "type": "scatter",
  "datasets": [ {
    "url": "https://services1.arcgis.com/bqfNVPUK3HOnCFmA/arcgis/rest/services/Demographics_(Median_Household_Income)/FeatureServer/0"
  }],
  "series": [
    {
      "category": {"field": "TotalPop2015", "label": "Population"},
      "value": {"field": "MedianHHIncome2015", "label": "Median Median Household Income"}
    }
  ]
}

Exemple de diagramme à bulles, nuage de point

{
  "type": "scatter",
  "datasets": [
    {
      "url":"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0"
    }
  ],
  "series": [
    {
        "category": {"field": "Number_of", "label": "Number of Teachers"},
        "value": {"field": "F_of_teach", "label": "Fraction of Teachers"},
        "size": {"field": "Not_Taught", "label": "Number not Taught"}
      }
  ]
}

Exemple de diagramme chronologique

Remarque :

La catégorie doit être un champ date heure.

 {
  "type": "timeline",
  "datasets": [
    {
      "url": "https://services.arcgis.com/bkrWlSKcjUDFDtgw/arcgis/rest/services/DC_Crashes/FeatureServer/0",
      "query": {
        "where": "REPORTDATE > '2008-10-01' AND REPORTDATE < '2008-11-01'",
        "orderByFields": "REPORTDATE ASC",
        "sqlFormat": "standard"
      }
    }
  ],
  "series": [
    {
      "category": {
        "field": "REPORTDATE",
        "label": "Date"
      },
      "value": {
        "field": "MAJORINJURIES",
        "label": "Major Injuries"
      }
    }
  ]
}