Utilizzo dei grafici nelle comunicazioni interattive

Un grafico o un grafico è una rappresentazione visiva dei dati. Condensa grandi quantità di informazioni in formato visivo facile da comprendere, consentendo ai destinatari della comunicazione interattiva di visualizzare, interpretare e analizzare meglio i dati complessi.

Durante la creazione di una comunicazione interattiva, è possibile aggiungere grafici per rappresentare visivamente dati bidimensionali dal modello di dati del modulo della comunicazione interattiva. Il componente Grafico consente di aggiungere e configurare i seguenti tipi di grafici: Torta, Colonna, Anello, Barre, Linea, Linea e Punto, Punto, Area e Quadrante.

Aggiungi e configura un grafico in una comunicazione interattiva

Esegui i seguenti passaggi per aggiungere e configurare un grafico in una comunicazione interattiva:

  1. Tocca Componenti dalla barra laterale della comunicazione interattiva.

  2. Trascina il componente Grafico in uno dei seguenti componenti:

    • Canale di stampa: Area di destinazione o campo immagine
    • Canale Web: Pannello o area di destinazione
  3. Tocca il componente grafico nell’editor delle comunicazioni interattive e seleziona Configura ( configura_icon) dalla barra degli strumenti del componente.

    Le proprietà del grafico vengono visualizzate nel riquadro a sinistra.

    Proprietà di base di un grafico a linee nel canale di stampa

    Proprietà di base di un grafico a linee nel canale di stampa

    Proprietà di base di un grafico a linee nel canale web

    Proprietà di base di un grafico a linee nel canale web

  4. Configura le proprietà del grafico in base al tipo di canale.

  5. (Solo canale di stampa) In Impostazioni agente, specificare se è obbligatorio per l'agente utilizzare questo grafico. Se l'opzione i t è obbligatoria per l'agente di utilizzare questo grafico non è selezionata, l'agente può toccare l'icona occhio del grafico nella scheda Contenuto dell'interfaccia utente dell'agente per mostrare o nascondere il grafico.

    Chart_agentproperties

  6. Tocca done_icon per salvare le proprietà del grafico.

    Tocca Anteprima per visualizzare l'aspetto e i dati associati al grafico. Tocca Modifica per riconfigurare le proprietà del grafico.

Configura le proprietà del grafico

Configura le seguenti proprietà durante la creazione di grafici per la stampa e i canali web:

Campo Descrizione Tipo canale
Nome Identificatore per l’elemento grafico. Il nome del grafico specificato in questo campo non è visibile nel grafico. Viene utilizzato quando si fa riferimento all’elemento di altri componenti, script ed espressioni SOM. Stampa e Web
Tipo di grafico Tipo di grafico da generare. Le opzioni disponibili sono Torta, Colonna, Anello, Barre, Linea, Linea e Punto, Punto e Area. Stampa e Web
Serie > Serie multiple Selezionare questa opzione per aggiungere più serie per gli elementi della raccolta di modelli di dati del modulo tracciati sull'asse X e sull'asse Y. Stampa e Web
Serie > Oggetto modello dati Nome dell’elemento di raccolta del modello dati del modulo per aggiungere più serie al grafico.
Scegliere una proprietà dell'oggetto modello dati modulo padre per le proprietà tracciate sull'asse X e sull'asse Y per formare una serie significativa. L'oggetto modello dati associato deve essere di tipo Number, String o Date.
Stampa e Web
Mostra impilati Scegli di impilare i valori di ciascuna serie uno sopra l'altro. Stampa e Web
Asse X > Titolo Titolo per l’asse X. Stampa e Web
Asse X > Oggetto modello dati

Nome dell'elemento di raccolta del modello dati modulo da tracciare sull'asse X.

Scegliere due proprietà di tipo raccolta/matrice dello stesso oggetto del modello dati padre significative l'una rispetto all'altra per eseguire il grafico sull'asse X e Y di un grafico. L'oggetto modello dati associato deve essere di tipo Number, String o Date.

Stampa e Web
Asse Y > Titolo Titolo per l’asse Y. Stampa e Web
Asse Y > Oggetto modello dati

Elemento di raccolta del modello dati modulo da tracciare sull’asse Y. Nel canale Stampa, l'oggetto modello dati per l'asse Y deve essere di tipo Numero.

Scegliere due proprietà di tipo raccolta/matrice dello stesso oggetto del modello dati padre significative l'una rispetto all'altra per eseguire il grafico sull'asse X e Y di un grafico.

Stampa e Web
Asse Y > Funzione Funzione statistica/personalizzata da utilizzare per l'elaborazione dei valori sull'asse y. Stampa e Web
Nascondi oggetto Selezionare questa opzione per nascondere il grafico nell'output finale. Stampa e Web
Titolo Titolo del grafico. Stampa
Altezza Altezza del grafico, in pixel. Stampa
Larghezza Larghezza del grafico, in pixel. È possibile controllare la larghezza del grafico nel canale web utilizzando il livello di stile o applicando un tema. Stampa
Interruzione di pagina obbligatoria prima Selezionare questa opzione per aggiungere un’interruzione di pagina obbligatoria prima del grafico e posizionare il grafico sopra una nuova pagina. Stampa
Interruzione di pagina obbligatoria dopo Selezionare questa opzione per aggiungere un’interruzione di pagina obbligatoria dopo il grafico e inserire il contenuto che segue il grafico nella parte superiore di una nuova pagina. Stampa
Rientro Rientro del grafico a sinistra della pagina. Stampa
Suggerimento

Formato in cui la descrizione comando viene visualizzata al passaggio del mouse su un punto dati del grafico nel canale Web. Il valore predefinito è ${x}(${y}). A seconda del tipo di grafico, quando si posiziona il mouse su un punto, una barra o una sezione del grafico, le variabili ${x}e ${y} vengono sostituite in modo dinamico con i valori corrispondenti sull'asse X e sull'asse Y e visualizzate nella descrizione comando.

Per disabilitare la descrizione comando, lasciare vuoto il campo Descrizione comando . Questa opzione non è applicabile ai grafici a linee e a superfici. Ad esempio, vedi Esempio 1: Output grafico in stampa e web.

Web
Configurazioni specifiche del grafico

Oltre alle configurazioni comuni, sono disponibili le seguenti configurazioni specifiche per il grafico:

  • Mostra legenda: Mostra una legenda per il grafico a torta o ad anello quando è attivato.
  • Posizione della legenda: Specifica la posizione della legenda rispetto al grafico. Le opzioni disponibili sono Destra, Sinistra, Superiore e Inferiore. Si consiglia di utilizzare la legenda sul lato destro nel canale di stampa.
  • Raggio interno: Disponibile per i grafici ad anello per specificare il raggio (in pixel) del cerchio interno nel grafico.
  • Colore linea: È disponibile per i grafici a linee, a linee e a punti e Area per specificare il colore della linea nel grafico.
  • Colore punto: Disponibile per i grafici a punti e a linee e punti per specificare il colore dei punti del grafico.
  • Colore area: Disponibile per i grafici Area per specificare il colore dell’area sotto la linea del grafico.
  • Punto di riferimento > Tipo di binding: Disponibile per i grafici quadranti per specificare il tipo di binding per il punto di riferimento. Utilizzare la proprietà dell'oggetto modello dati o testo statico per definire il valore del punto di riferimento.
  • Punto di riferimento > asse X: Disponibile per i grafici quadranti se si seleziona Statico dall’elenco a discesa Tipo di binding per specificare il valore dell’asse X per il punto di riferimento.
  • Punto di riferimento > Asse Y: Disponibile per i grafici quadranti se si seleziona Statico dall’elenco a discesa Tipo di binding per specificare il valore dell’asse Y per il punto di riferimento.
  • Punto di riferimento > Oggetto del modello dati per le serie: Disponibile per più grafici Quadranti serie se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di binding. Definisci le proprietà oggetto modello dati del modulo per identificare la serie per il punto di riferimento.
  • Punto di riferimento > Valore dell'oggetto del modello dati per le serie: Disponibile per più grafici Quadranti serie se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di binding. Utilizzare la proprietà dell'oggetto modello dati modulo per le serie e il valore definito in questo campo per identificare la serie per il punto di riferimento.
  • Punto di riferimento > Oggetto del modello dati per il punto di riferimento: Disponibile per i grafici quadranti se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di binding. Definire una proprietà dell’oggetto modello dati modulo di pari livello rispetto alle proprietà tracciate sull’asse X e sull’asse Y. Inoltre, per più serie, definire una proprietà dell'oggetto modello dati che sia un'entità figlio della proprietà dell'oggetto modello dati definita per la serie.
  • Punto di riferimento > Valore dell'oggetto del modello dati per il punto di riferimento: Disponibile per i grafici quadranti se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di binding. Utilizzare la proprietà dell'oggetto modello dati modulo per il punto di riferimento e il valore definito in questo campo per identificare il punto di riferimento per il grafico.
    Etichette quadranti > In alto a sinistra: disponibili per i grafici quadranti per specificare il nome del quadrante in alto a sinistra.
  • Etichette quadranti > In alto a destra: disponibili per i grafici quadranti per specificare il nome del quadrante in alto a destra.
  • Etichette quadranti > In basso a destra: Disponibile per i grafici Quadrante per specificare il nome del quadrante in basso a destra.
  • Etichette quadranti > In basso a sinistra: Disponibile per i grafici Quadrante per specificare il nome del quadrante in basso a sinistra.
Stampa e Web

Usa funzioni nel grafico

È possibile configurare un grafico in modo da utilizzare le funzioni statistiche per calcolare i valori dei dati di origine per il grafico. Applicando funzioni in un grafico, è possibile tracciare dati non forniti direttamente dal modello dati del modulo.

Funzioni nei grafici

Mentre il componente Grafico include alcune funzioni integrate, è possibile scrivere funzioni personalizzate e renderle disponibili per l'uso nella configurazione del grafico nel canale web.

Per impostazione predefinita, con il componente Grafico sono disponibili le seguenti funzioni:

Media (Media) Restituisce la media dei valori sull'asse X o Y di un valore specificato sull'altro asse.

​SumRestituisce la somma di tutti i valori sull'asse X o Y per un valore specificato sull'altro asse.

​MaximumRestituisce il valore massimo dei valori sull'asse X o Y per un valore specificato sull'altro asse.

​FrequenzaRestituisce il numero di valori sull'asse X o Y per un valore specificato sull'altro asse.

​RangeRestituisce la differenza tra il massimo e il minimo dei valori sull'asse X o Y per un valore specificato sull'altro asse.

​MedianRestituisce il valore che separa i valori più alti e più bassi nella metà dell'asse X o Y per un valore specificato sull'altro asse.

​MinimumRestituisce il minimo dei valori sull'asse X o Y per un valore specificato sull'altro asse.

​ModeRestituisce il valore con la maggior parte delle occorrenze sull'asse X o Y per un valore specificato sull'altro asse.

Per ulteriori informazioni, consulta Esempio 2: Applicazione delle funzioni Somma e Frequenza in un grafico a linee.

Funzioni personalizzate nel canale web

Oltre a utilizzare le funzioni predefinite nei grafici, è possibile scrivere funzioni personalizzate in JavaScript™ e renderle disponibili nell'elenco delle funzioni del componente Grafico per il canale web.

Una funzione prende una matrice o valori e un nome di categoria come input e restituisce un valore. Esempio:

Multiply(valueArray, category) {
 var val = 1;
 _.each(valueArray, function(value) {
 val = val * value;
 });
 return val;
}

Dopo aver scritto una funzione personalizzata, procedi come segue per renderla disponibile per l'uso nella configurazione del grafico:

  1. Aggiungi la funzione personalizzata nella libreria client associata alla comunicazione interattiva pertinente. Per ulteriori informazioni, consulta Configurazione dell’azione Invia e Utilizzo delle librerie lato client.

  2. Per visualizzare la funzione personalizzata nel menu a discesa Funzione, in CRXDe Lite, crea un nodo nt:unstructured nella cartella delle app con le seguenti proprietà:

    • Aggiungi la proprietà guideComponentType con il valore fd/af/reducer. (mandatory)

    • Aggiungi la proprietà value a un nome completo della funzione JavaScript™ personalizzata. (obbligatorio) e imposta il relativo valore sul nome della funzione personalizzata, ad esempio Moltiplica.

    • Aggiungi la proprietà jcr:description con il valore che desideri visualizzare come nome della funzione personalizzata visualizzata nel menu a discesa Funzione. Ad esempio, Moltiplica.

    • Aggiungi la proprietà qtip con un valore che sarà una breve descrizione della funzione personalizzata. Viene visualizzata come descrizione quando si passa il puntatore sul nome della funzione nell'elenco a discesa Funzione.

  3. Fai clic su Salva tutto per salvare la configurazione.

La funzione è ora disponibile per l'utilizzo nel grafico.

Esempio 1: Output grafico in stampa e web

Nella scheda Base è possibile definire il tipo di grafico, le proprietà del modello di dati del modulo di origine che contengono dati, le etichette da tracciare sull'asse X e sull'asse Y del grafico ed eventualmente la funzione statistica per calcolare i valori per il grafico.

Comprendiamo in dettaglio le informazioni minime richieste nelle proprietà di base, con l'aiuto di un'istruzione a schede generata utilizzando una comunicazione interattiva. Tenere presente che si desidera generare un grafico per rappresentare la quantità di spese diverse nell'istruzione. Utilizzare diversi tipi di grafici per la stampa e l'output Web della comunicazione interattiva.

Grafico a colonne per Stampa

A questo scopo, specifica le seguenti proprietà:

  • Nome : specifica il nome del grafico.
  • Tipo di grafico : seleziona ​Colonna dall’elenco a discesa.
  • Titolo - Specifica il tipo di spesa per l'asse X e l'importo della transazione per l'asse Y.
  • Oggetti modello dati : selezionare le proprietà dell'oggetto modello dati per creare binding dei dati per l'asse X (tipo di spesa) e l'asse Y (importo transazione).

Grafico a colonne nel canale di stampa di una comunicazione interattiva

Grafico a colonne nel canale di stampa di una comunicazione interattiva

Grafico a torta per web

A questo scopo, specifica le seguenti proprietà:

  • Nome : specifica il nome del grafico.
  • Tipo di grafico : seleziona ​Donutt dall’elenco a discesa.
  • Oggetti modello dati : selezionare le proprietà dell'oggetto modello dati per creare binding dei dati per l'asse X (tipo di spesa) e l'asse Y (importo transazione).
  • Raggio interno : specifica il valore Raggio interno come 150 per specificare il raggio (in pixel) del cerchio interno nel grafico.
  • Tooltip - Utilizza il formato predefinito ${x}(${y}) per visualizzare la descrizione comando. La descrizione comando viene visualizzata come: Tipo di spesa (Importo transazione). Esempio: Addebito per Bitcoin(10000).

Grafico ad anello nel canale web di una comunicazione interattiva

Grafico ad anello nel canale web di una comunicazione interattiva

Esempio 2: Applicazione delle funzioni Somma e Frequenza in un grafico a linee

Applicando funzioni in un grafico, è possibile tracciare dati non forniti direttamente dal modello dati del modulo. In questo esempio, utilizziamo un esempio di rendiconto della carta di credito per comprendere come le funzioni Somma e Frequenza possono essere applicate al grafico.

Grafico a linee senza funzione con due transazioni "Debit for AirBnB"

Grafico a linee senza funzione con due transazioni "Debit for AirBnB"

Funzione Somma

È possibile applicare la funzione sum per aggiungere valori di più istanze della stessa proprietà dati e visualizzarla una sola volta. Ad esempio, nel grafico seguente, la funzione Somma viene applicata sull'asse Y per sommare l'importo dei due Debiti per le transazioni AirBnB (2050 e 1050) e mostrare una sola transazione (3100).

La funzione Somma può rendere il grafico più utile quando si desidera raccogliere e visualizzare la somma per molte istanze della stessa proprietà dati.

Somma grafico a linee

Funzione di frequenza

La funzione Frequenza restituisce il numero di valori dell'asse Y per un valore specificato sull'altro asse. Con l'applicazione della funzione Frequenza sull'asse Y (Importo transazione), il grafico mostra che sono state rilevate due occorrenze di Debit per le transazioni AirBnB e una occorrenza dei restanti tipi di transazioni.

Frequenza grafico a linee

Esempio 3: Grafico quadrante multiserie in Web

Il grafico rappresenta l'importo per le transazioni eseguite in un determinato intervallo di date. Il grafico Quadrante consente di suddividere l'area del grafico in quattro sezioni etichettate. Il carrello utilizza un punto di riferimento statico per l'asse X e l'asse Y. Utilizzare la funzione serie multipla per separare i dati in base al nome della banca.

A questo scopo, specifica le seguenti proprietà:

  • Nome: specifica il nome del grafico.

  • Tipo di grafico: seleziona ​Quadrante dall’elenco a discesa.

  • Selezionare la casella di controllo Serie multiple.

  • Oggetto modello dati: Specificare la proprietà dell'oggetto modello dati per la serie. La proprietà dell'oggetto modello dati per il nome della banca è un elemento padre delle proprietà dell'oggetto modello dati tracciate nell'asse X e nell'asse Y.

  • Oggetti modello dati: selezionare le proprietà dell'oggetto modello dati per creare binding dei dati per l'asse X (Data transazione) e l'asse Y (Importo transazione).

  • Nella sezione Punto di riferimento, selezionare Statico come tipo di binding.

  • Specificare i valori per i punti di riferimento dell'asse X e dell'asse Y.

  • Specifica le etichette del quadrante per i quadranti In alto a sinistra, In alto a destra, In basso a destra e In basso a sinistra.

  • Selezionare la casella di controllo Mostra legende per visualizzare i codici colore per i nomi bancari.

Grafici a quadrante

In questa pagina