Creazione di grafici a barre raggruppate

Il grafico a barre raggruppate viene utilizzato per visualizzare i valori tra più categorie contemporaneamente. I gruppi di dati possono essere tracciati sotto forma di barre raggruppate con larghezze uguali e altezze variabili che rappresentano la grandezza della quantità. I diagrammi a barre raggruppati possono essere utilizzati per visualizzare il tasso di variazione di una quantità per più categorie rispetto agli obiettivi predefiniti in base alla cifra statistica.

Informazioni su questa attività

L'anatomia di un grafico a barre raggruppato è la seguente:
Esempio di grafico a barre raggruppato
Titolo scheda
Un'etichetta o un'intestazione univoca assegnata alla scheda.
Descrizione comandi della scheda
Un suggerimento fornisce ulteriori dettagli sui dati visualizzati sulla scheda.
Soglia
Una linea sul grafico al di sopra o al di sotto della quale sono valori significativi.
Titolo asse Y
Un'etichetta assegnata all'asse verticale del grafico.
Titolo asse X
Un'etichetta assegnata all'asse orizzontale del grafico.
Legenda
L'etichetta del gruppo di dati.
Link di piè di pagina
Un campo selezionabile o un collegamento con un'etichetta. Ad esempio, View all.
È possibile utilizzare il builder Scheda per creare un grafico a barre raggruppato.

Procedura

  1. Dal menu di navigazione, fare clic su Programma di creazione schede.
    Selezionando Libreria schede > Schede personali vengono visualizzate le schede dell'organizzazione, se presenti. La scheda Esempi visualizza gli esempi che possono essere copiati e modificati.
  2. Per creare una scheda, nella scheda Schede personali , selezionare Nuova scheda.
    Viene visualizzata la pagina Programma di creazione schede .
  3. Nella scheda Generale , immettere i seguenti dati.
    1. espandere Metadati e quindi aggiungere i campi seguenti:
      • Nome scheda
      • ID scheda
      • Descrizione
    2. Espandere Proprietà e selezionare Type e Variant.
      Ad esempio, immettere Grafico e la variante Barra raggruppata.
  4. Nella scheda Dati , aggiungere dati alla scheda.
    1. Espandere Query e fare clic su Aggiungi per aggiungere una query o gruppi di query per popolare i dati della scheda.
    2. Nella scheda Interrogazione , scrivere una query simile alla query in esempio. Per ulteriori informazioni, consultare Aggiunta di query alle carte.
    3. Nel campo QUERY VARIABLES , definisci le variabili in formato JSON utilizzando un formato simile al codice nell' esempio.
    4. Eseguire la query.
    5. Verifica che i dati siano restituiti per la query in modo simile ai dati forniti nell'esempio .
    6. Nella scheda Trasforma , scrivere un codice simile all' esempio oppure utilizzare la trasformazione predefinita per la visualizzazione sulla scheda.
    7. Fare clic su Fine.
      I dati restituiti dalla query vengono visualizzati nel grafico.
    8. Espandere Gruppi di dati e selezionare Configura.
    9. Selezionare i campi richiesti e fare clic su Fine.
    10. Facoltativo: nel gruppo di dati selezionato, fare clic sull'icona Menu di overflow , quindi fare clic su Modifica per aggiungere un'etichetta e sovrascrivere il colore della barra predefinita.
  5. Nella scheda Stile , aggiungere lo stile alla scheda.
    1. Espandere Dimensioni e modificare la larghezza e l'altezza della scheda.
    2. espandere Intestazione e nel campo Titolo scheda , aggiungere il titolo da visualizzare sulla scheda.
    3. Facoltativo: per mostrare la descrizione della scheda in un suggerimento dell'icona con il titolo, impostare Descrizione su on.
    4. Espandere Assi e fare clic su Configura
    5. Sulla scheda Asse X , selezionare Axis key e il tipo di scala dall'elenco disponibile.
    6. Impostare la visibilità inferiore o superiore su attivo e aggiungere i titoli dell'asse.
    7. Fare clic su Aggiungi soglia asse X per definire una linea tratteggiata sull'asse X del grafico.
    8. Facoltativo: aggiungere un'etichetta di soglia, un valore e sovrascrivere il colore predefinito.
      L'etichetta della soglia viene visualizzata sulla linea tratteggiata con il valore definito quando si passa con il mouse su di essa.
    9. Nella scheda Asse Y , selezionare il tipo di scala e la chiave dell'asse dall'elenco disponibile.
    10. Impostare la visibilità destra o sinistra su attivo e aggiungere i titoli degli assi.
    11. Fare clic su Aggiungi soglia dell'asse Y per definire una linea tratteggiata sull'asse Y del grafico.
    12. Facoltativo: aggiungere un'etichetta di soglia, un valore e sovrascrivere il colore predefinito.
      L'etichetta della soglia viene visualizzata sulla linea tratteggiata con il valore definito quando si passa con il mouse su di essa.
    13. Facoltativo: Fare clic su Scambia dati asse per modificare la visualizzazione del grafico.
    14. espandere Legenda e selezionare posizione e allineamento.
      La selezione determina la posizione della leggenda relativa alla visualizzazione dei dati.
    15. espandere Funzionamento e impostare Filtro legenda su attivo per filtrare la visibilità dei gruppi di dati facendo clic sugli elementi della legenda
    16. Impostare Interazioni suggerimento su on per esporre valori precisi dei punti dati.
    17. Espandere Piè di pagina e impostare Link piè di pagina su e assegnare un'etichetta e immettere un ID pagina.

      È possibile aggiungere un ID pagina nel campo o selezionare una pagina dalla libreria. Per selezionare una pagina, fare clic su Seleziona da libaray. In alternativa, è possibile aggiungere un collegamento esterno al piè di pagina. Quando si fa clic, questo link si apre in una nuova scheda.

      Nota: alcune pagine sono contrassegnate conThis page requires context.Avvertenza. Ciò significa che queste pagine richiedono variabili di contesto per eseguire correttamente il rendering del contenuto sulla pagina e queste variabili mancano nel contesto della pagina. Per aggiungere le variabili di contesto della pagina, consultare Configurazione delle variabili di contesto della pagina.

      Una volta selezionata la pagina, è possibile aggiungere variabili modello per rendere dinamico il contenuto della pagina. Ciò significa che è possibile utilizzare la stessa pagina più volte con contenuto personalizzato in base alle variabili.

  6. Fare clic su Salva.

Esempio

La seguente query richiama la linea limite scaduta dal fornitore. La query include la variabile tenantId .

Per un grafico a barre raggruppato, è possibile visualizzare qualsiasi attributo restituito da una query.

query pastDueOrderlineBySupplier($tenantId: String!) {
  pastDueOrderLineBySupplierChar: businessObjects(
    simpleFilter: {type: OrderLine, tenantId: $tenantId}
    hint: {viewId: "graph"}
    advancedFilter: {AND: [{GREATER_THAN: [{SELECT: "order.plannedDeliveryDelay", type: FLOAT}, {VALUE: "0.0", type: FLOAT}]}, {EQUALS: [{SELECT: "order.orderType", type: STRING}, {VALUE: "INBOUND", type: STRING}]}]}
    aggregationParams: {paginationParams: {first: 50, sort: [{fieldPath: "totalOrderLinesBySupplier.sum", order: DESC}]}, dimension: {fieldPath: "order.vendor.name", type: STRING}, reduce: {expression: {fieldPath: "value", operator: SUM, type: INT}, output: {resultAlias: "totalOrderLinesBySupplier", type: INT}}}
  ) {
    totalCount
    aggregationResults {
      dimensionValues {
        name
        value
      }
      values {
        name
        numValue
      }
    }
    edges {
      cursor
      object {
        ... on OrderLine {
          valueCurrency
        }
      }
    }
  }
}

Il seguente codice è un esempio di come definire le variabili da utilizzare nella query:

{
  "tenantId": "{{ tenantId }}"
}

Il seguente codice è un esempio dei dati restituiti dalla query:

{
  "data": {
    "pastDueOrderLineBySupplierChar": {
      "totalCount": 289,
      "aggregationResults": [
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 167457072,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "McGrey Electrical",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 604160,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "Total Source Extrusion Corporation",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 226800,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "F & M Metals",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 153200,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "LightLens Industries",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 107920,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "Alumi-lux Metal Products",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 59605,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "Gemini Design Technology",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 39040,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "Amos Wire Products Inc",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 28160,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "SilverOptics",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 13392,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "SJN Fuels",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 9518,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        },
        {
          "dimensionValues": [
            {
              "name": "order.vendor.name",
              "value": "Interalloy Corporation",
              "__typename": "NameValuePair"
            }
          ],
          "values": [
            {
              "name": "totalOrderLinesBySupplier",
              "numValue": 744,
              "__typename": "NameValueNumValuePair"
            }
          ],
          "__typename": "AggregationResult"
        }
      ],
      "edges": [
        {
          "cursor": "NDgzMzA0NA==",
          "object": {
            "valueCurrency": "USD",
            "__typename": "OrderLine"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NDgzMzE3NA==",
          "object": {
            "valueCurrency": "USD",
            "__typename": "OrderLine"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NDgzNDQ2Nw==",
          "object": {
            "valueCurrency": "USD",
            "__typename": "OrderLine"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NDgzNDQyNw==",
          "object": {
            "valueCurrency": "USD",
            "__typename": "OrderLine"
          },
          "__typename": "BusinessObjectEdge"
        },
        {
          "cursor": "NDgzNDM5OQ==",
          "object": {
            "valueCurrency": "USD",
            "__typename": "OrderLine"
          },
          "__typename": "BusinessObjectEdge"
        }
      ],
      "__typename": "BusinessObjectsCursor"
    }
  },
  "loading": false,
  "networkStatus": 7
}

Il seguente codice è un esempio della trasformazione applicata ai dati. L'attributo visualizzato deve corrispondere a quanto restituito dai dati. Questo attributo viene scelto nella sezione dei gruppi di dati. Qualsiasi calcolo può essere eseguito sui dati restituiti.

{
	"errors": "{{ #? this.errors }}",
	"totalCount": "{{ this.data.pastDueOrderLineBySupplierChar.totalCount }}",
	"pageInfo": {},
	"results": {
		"{{ #each this.data.pastDueOrderLineBySupplierChar.aggregationResults }}": {
			"group": "{{this.dimensionValues[0].value}}",
			"value": "{{this.values[0].numValue}}",
			"key": "Past due orderline"
		}
	}
}

Cosa fare successivamente

Aggiungere la scheda a un dashboard utilizzando il builder Dashboard.