Création de graphiques à courbes

Un graphique à courbes affiche des données dans des groupes de données qui peuvent être tracés à intervalles réguliers et qui sont connectés par des lignes. Vous pouvez utiliser des visualisations à courbes pour afficher les tendances dans le temps et comparer plusieurs jeux de données.

A propos de cette tâche

L'anatomie d'un graphique à courbes est la suivante:
Exemple de carte de graphique à courbes
Titre de la carte
Libellé ou en-tête unique affecté à la carte.
Infobulle de carte
Une infobulle fournit des détails supplémentaires sur les données affichées sur la carte.
Seuil
Courbe du graphique au-dessus ou en dessous de laquelle se trouvent des valeurs significatives.
Titre de l'axe des Y
Libellé affecté à l'axe vertical du graphique.
Titre de l'axe des X
Libellé affecté à l'axe horizontal du graphique.
Légende
Libellé du groupe de données.
Lien de pied de page
Zone cliquable ou lien avec un libellé. Par exemple, View all.
Vous pouvez utiliser le générateur de carte pour créer un graphique à courbes.

Procédure

  1. Dans le menu de navigation, cliquez sur Générateur de carte.
  2. Cliquez sur Nouvelle carte.

Dans l'onglet Général , définissez la carte:

  1. Affectez un nom à la carte.
    La carte est désignée par son nom dans la bibliothèque de cartes.
  2. Sélectionnez le type de carte.
    Sélectionnez Chart comme type de carte et Line comme variante.

Dans l'onglet Données , ajoutez des données à la carte:

  1. Ajoutez une requête GraphQL pour extraire les données.
    Cliquez sur Ajouter et écrivez une requête similaire à la requête dans l' exemple. Pour plus d'informations, voir Ajout de requêtes à des cartes.
  2. Définissez les variables que vous utilisez dans la requête.
    Dans la zone Variables de requête , définissez les variables au format JSON en utilisant un format similaire au code de l' exemple.
  3. Exécutez la requête.
  4. Vérifiez que des données sont renvoyées pour la requête, comme celles qui sont renvoyées dans l' exemple.
  5. Dans l'onglet Transformation , ajoutez du code pour transformer les données à des fins de visualisation dans un graphique à courbes.
    Utilisez un code similaire à l' exemple ou utilisez la transformation par défaut.
  6. Cliquez sur Terminé.
    Les données renvoyées par la requête sont affichées sur le graphique.
  7. Configurez les groupes de données pour le graphique à courbes.
    Dans l'exemple, le groupe de données, orderLineChart, est disponible. Sélectionnez les groupes de données à afficher sous forme de ligne sur le graphique.
  8. Facultatif: Remplacement du libellé et de la couleur.

Dans l'onglet Style , définissez le style de la carte:

  1. Dans Dimensions, augmentez la largeur et la hauteur de la carte.
  2. Dans Axes, définissez l'échelle de l'axe des X et le libellé utilisé. Vous pouvez définir un seuil pour l'axe des X.
  3. Dans Axes, définissez l'échelle de l'axe des Y et le libellé utilisé. Vous pouvez définir un seuil pour l'axe des Y.
  4. Dans Center, ajoutez un libellé de texte pour décrire le grand nombre.
  5. Dans Légende, activez la légende et définissez sa position dans l'interface utilisateur.
  6. Dans Comportement, configurez le comportement de l'interaction avec la légende et l'infobulle.
  7. Développez Pied de page et définissez le lien de pied de page sur on et affectez un libellé et entrez un ID de page.

    Vous pouvez ajouter un ID de page dans la zone ou sélectionner une page dans la bibliothèque. Pour sélectionner une page, cliquez sur Sélectionner dans libaray. Vous pouvez également ajouter un lien externe au pied de page. Lorsque vous cliquez dessus, ce lien s'ouvre dans un nouvel onglet.

    Remarque: Certaines pages sont marquées avecThis page requires context.avertissement. Cela signifie que ces pages nécessitent des variables contextuelles pour rendre le contenu correctement sur la page et que ces variables sont manquantes dans le contexte de la page. Pour ajouter des variables contextuelles de page, voir Configuration des variables contextuelles de page.

    Après avoir sélectionné la page, vous pouvez ajouter des variables de modèle pour rendre le contenu de la page dynamique. Cela signifie que vous pouvez utiliser la même page plusieurs fois avec du contenu personnalisé en fonction des variables.

  8. Cliquez sur Sauvegarder.

Exemple

La requête suivante extrait la quantité totale de commandes par date d'expédition planifiée. La requête inclut une variable tenantId .
query orders($tenantId: String) {
  orderLineChart: businessObjects(
    simpleFilter: {tenantId: $tenantId, type: Order}
    hint: {viewId: "orderflow"}
    cursorParams: {first: 10, sort: {fieldPath: "plannedShipDate", order: ASC}}
    aggregationParams: {dimension: {fieldPath: "plannedShipDate", type: STRING}, reduce: {expression: {fieldPath: "quantity", operator: SUM, type: INT}, output: {resultAlias: "buyers", type: INT}}}
  ) {
    totalCount
    pageInfo {
      endCursor
      hasNextPage
    }
    edges {
      object {
        id
        ... on Order {
          buyer {
            id
            name
          }
          quantity
          plannedShipDate
        }
      }
    }
    aggregationResultsTotalCount
    aggregationResults {
      dimensionValues {
        name
        value
      }
      values {
        name
        value
      }
    }
  }
}
Le code suivant est un exemple de définition des variables à utiliser dans la requête.
{
  "tenantId": "{{ tenantId }}"
}
Le code suivant est un exemple des données renvoyées par la requête. Dans l'exemple, le nombre total de commandes est renvoyé pour chaque date d'expédition planifiée.
{
  "data": {
    "orderLineChart": {
      "totalCount": 214,
      "pageInfo": {
        "endCursor": "ZGJmMTRhMzItYTk4OS00YzI1LTkzYTItNDM2MjZmOWI5OTdj",
        "hasNextPage": true,
        "__typename": "PageInfo"
      },
      "edges": [
        {
          "object": {
            "id": "edf9bcbf-7338-4f71-a4af-6b5dfc39b852",
            "buyer": {
              "id": "74cd668c-6a8a-42da-87d7-d7df9b1bcb62",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 124,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "e41ee68a-e8b7-4da6-a6df-e5588224a037",
            "buyer": {
              "id": "74cd668c-6a8a-42da-87d7-d7df9b1bcb62",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 320,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "e255eb2a-ecd9-4bb0-8bbc-497926bf0afb",
            "buyer": {
              "id": "74cd668c-6a8a-42da-87d7-d7df9b1bcb62",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 512,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "dca11046-74ae-4fab-b1d8-a83aee2b9a90",
            "buyer": {
              "id": "74cd668c-6a8a-42da-87d7-d7df9b1bcb62",
              "name": null,
              "__typename": "Organization"
            },
            "quantity": 512,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "object": {
            "id": "dbf14a32-a989-4c25-93a2-43626f9b997c",
            "buyer": {
              "id": "74cd668c-6a8a-42da-87d7-d7df9b1bcb62",
              "name": "LightTree",
              "__typename": "Organization"
            },
            "quantity": 512,
            "plannedShipDate": "2021-06-23T00:00:00.000Z",
            "__typename": "Order"
          },
          "__typename": "BusinessObjectEdge"
        }
      ],
      "aggregationResultsTotalCount": 10,
      "aggregationResults": [
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-06-23T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "24940.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-07-15T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "1113.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-07-06T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "1350.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-07-22T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "484.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-08-06T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "2478.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-07-24T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "176.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-08-10T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "1907.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-08-11T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "1495.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-06-25T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "956.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "plannedShipDate",
              "value": "2021-06-30T00:00:00.000Z",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "buyers.sum",
              "value": "732.0",
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        }
      ],
      "__typename": "BusinessObjectsCursor"
    }
  },
  "loading": false,
  "networkStatus": 7
}

Dans le code suivant, COMMON.SHIPMENT_STATUS.ON_TIME est ajouté en tant que groupe. Les expéditions à l'heure sont calculées dans la transformation en soustrayant les expéditions en retard du total des expéditions.



{
	"errors": "{{ #? this.errors }}",
	"totalCount": "{{ this.data.orderLineChart.aggregationResultsTotalCount }}",
	"pageInfo": "{}",
	"results": {
		"{{ #each this.data.orderLineChart.aggregationResults }}": {
			"group": "orderLineChart",
			"x-axis-key": "{{new Date(this.dimensionValues[0].value).toDateString()}}",
			"y-axis-key": "{{this.values[0].value}}",
			"tooltipsConfig": {
				"name": "{{this.dimensionValues[0].name}}"
			}
		}
	}
}

Dans une transformation, les données affichées sur chaque axe du graphique doivent correspondre aux données renvoyées par la requête. Cet attribut est choisi dans la section Groupes de données. Un calcul peut être effectué sur les données renvoyées. Dans l'exemple, orderLineChart est ajouté au groupe renvoyé par la requête.

Etape suivante

Ajoutez la carte à un tableau de bord à l'aide du générateur de tableau de bord.