Utilizzo dei grafici nelle comunicazioni interattive using-charts-in-interactive-communications

Utilizzando i grafici di una comunicazione interattiva, è possibile condensare grandi quantità di informazioni in un formato visivo facile da analizzare e comprendere

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:

Aggiunta e configurazione di grafici in una comunicazione interattiva add-and-configure-chart-in-an-interactive-communication

Per aggiungere un grafico a una comunicazione interattiva, completa i passaggi seguenti:

Esempio 1: Output grafico in stampa e web chartoutputprintweb

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 estratto conto della carta di credito generato 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.

A questo scopo, devi specificare:

Figura: Grafico a colonne nell’output di stampa di una comunicazione interattiva

A. Asse Y: importo recuperato dalla proprietà del modello dati del modulo e dalla proprietà Titolo impostata su Importo ($) B. Direzione etichetta dell'asse X impostata su Inclinazione a sinistra C. Asse X: descrizione delle spese recuperata dalla proprietà del modello dati del modulo e dalla proprietà Titolo impostata su Spesa

Figura: Grafico ad anello nell'output web di una comunicazione interattiva

A. La proprietà Raggio interno della ciambella è impostata B. Mostra proprietà legenda selezionata e la proprietà Posizione legenda è impostata su Destra C. La descrizione comandi visualizza i dettagli dell'elemento al passaggio del mouse. La descrizione comandi è impostata su ${x}: $

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

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.

Figura: Grafico a linee senza funzione con tre transazioni "Bed and Breakfast"

Funzione Sum sum-function

È 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 delle tre transazioni Bed and Breakfast ($99,45, $78 e $12) e mostrare una sola transazione ($189,45).

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

Funzione di frequenza frequency-function

La funzione Frequenza restituisce il numero di valori sull'asse X o Y per un valore specificato sull'altro asse. Con l'applicazione della funzione Frequenza sull'asse y (Importo/ImportoTransazione), il grafico mostra che ci sono state tre occorrenze di transazioni Bed and Breakfast e una occorrenza del resto dei tipi di transazioni.

Proprietà di base nei grafici basicpropertiescharts

Nella scheda Base è possibile configurare le seguenti proprietà:

Nome Identificatore per l'elemento grafico. Il nome non è visibile sul grafico, ma è utile quando si fa riferimento all’elemento da altri componenti, script ed espressioni SOM.

Titolo (solo canale di stampa) Specifica il titolo del grafico.

Tipo di grafico Specifica il tipo di grafico che si desidera generare. Le opzioni disponibili sono Torta, Colonna, Anello, Barre (solo canale web), Linea, Linea e Punto, Punto e Area. Per ulteriori informazioni, vedi l'esempio 1: Output grafico in stampa e web.

Asse X > Titolo Specifica il titolo dell'asse x.

Asse X > Oggetto modello dati * Specificare il nome dell'elemento di raccolta del modello dati modulo da tracciare sull'asse x.

Asse X > Funzione Specifica la funzione statistica/personalizzata da utilizzare per il calcolo dei valori sull'asse x. Per ulteriori informazioni sulle funzioni, vedere Uso delle funzioni nel grafico e Esempio 2: Applicazione delle funzioni di somma e media in un grafico a linee.

Asse X > Direzione etichetta Direzione dell'etichetta sul grafico nel canale di stampa. Se scegliete la direzione dell'etichetta come Rotazione personalizzata, viene visualizzato il campo Angolo di rotazione personalizzato (gradi). Nel campo Angolo di rotazione personalizzato (gradi) è possibile scegliere l’angolo di rotazione in passaggi di 15 gradi.

Asse Y > Titolo Specifica il titolo dell'asse y.

Asse Y > Oggetto modello dati * Specifica l'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.

Asse Y > Funzione Specifica la funzione statistica/personalizzata da utilizzare per il calcolo dei valori sull'asse y. Per ulteriori informazioni sulle funzioni, vedere Uso delle funzioni nel grafico e Esempio 2: Applicazione delle funzioni di somma e media in un grafico a linee.

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.

Altezza (solo canale di stampa) Altezza del grafico in pixel.

Larghezza (solo canale di stampa) Larghezza del grafico in pixel.

Tooltip (solo canale Web) Specifica il 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 dinamicamente con i valori corrispondenti sull'asse x e sull'asse y e visualizzate nella descrizione comando.

Per disattivare 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.

Classe CSS (solo canale web) Specifica il nome di una classe CSS nel campo della classe CSS da applicare allo stile personalizzato al grafico.

Interruzione di pagina obbligatoria prima (solo canale di stampa) Selezionare questa opzione per aggiungere un’interruzione di pagina obbligatoria prima del grafico e posizionare il grafico sopra una nuova pagina.

Interruzione di pagina obbligatoria dopo (solo canale di stampa) 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.

Rientro (solo canale di stampa) Specifica il rientro del grafico a sinistra della pagina.

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

Usa funzioni nel grafico usefunction

È 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.

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

Funzioni predefinite default-functions

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.

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

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

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

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

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

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

Modalità Restituisce il valore con la maggior parte delle occorrenze sull'asse X o Y per un valore specificato sull'altro asse

Funzioni personalizzate nel canale web custom-functions-in-web-channel

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. Ad 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:

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