Blocco Grafico a linee/area
Una tendenza lungo una sequenza ordinata — settimane, mesi, fasi di un imbuto nel tempo — disegnata come una linea tracciata oppure, con l'interruttore filled attivo, un'area ombreggiata sotto di essa. Fino a 3 serie.
Come funziona
Il grafico viene renderizzato come una singola PNG generata sul server — nessuna libreria di grafici lato client, nessun JavaScript — con una tabella dei dati HTML sempre visibile proprio sotto, che ripete ogni numero disegnato nell'immagine. È lo stesso abbinamento non negoziabile a cui si attiene ogni grafico di questa famiglia, così la tendenza resta leggibile nei client solo testo, nelle caselle di posta che bloccano le immagini e con le immagini disattivate.
La struttura di inserimento è identica a quella del grafico a barre: una colonna Category (qui di solito un periodo di tempo — "Settimana 1", "Lun", "T1" — anche se può essere qualsiasi etichetta ordinata) più fino a tre colonne numeriche di serie. La Serie 1 è sempre attiva, prendendo in prestito il titolo del grafico come proprio nome quando non ne imposti uno. Le Serie 2 e 3 si attivano solo se ricevono un nome, così una colonna di valori parzialmente compilata senza etichetta di serie non compare mai come una linea fantasma senza nome. Ogni serie attiva disegna una propria linea tracciata con un proprio colore; una legenda appare solo quando sono attive 2 o più serie.
L'interruttore Filled trasforma il grafico a linee in un grafico ad area: la regione sotto ogni linea si ombreggia a bassa opacità fino all'asse. È un interruttore anziché un blocco separato, poiché il modello di dati sottostante, gli assi e la struttura delle categorie sono esattamente gli stessi in entrambi i casi — cambia solo il modo in cui la linea viene renderizzata. Con più serie riempite, le regioni sovrapposte restano visivamente distinguibili, perché ciascuna mantiene il proprio colore di serie a bassa opacità. Questo blocco rifiuta comunque gli assi doppi, quindi più serie riempite condividono sempre un'unica scala di valori.
I marcatori dei punti (piccoli cerchi pieni su ogni valore inserito) vengono disegnati sopra la linea per ogni categoria, fino a circa 20 categorie. Oltre quel punto i marcatori si diradano e smettono di essere disegnati singolarmente, poiché ad alta densità si sovrapporrebbero formando una macchia continua lungo la linea invece di leggersi come punti distinti. La linea tracciata stessa, l'asse dei valori condiviso e la tabella dei dati continuano tutti a mostrare la tendenza oltre quella soglia — nulla nella lettura del grafico dipende realmente dai marcatori.
Campi configurabili:
- Chart title — mostrato sopra l'immagine; è anche il nome di serie di riserva quando è attiva solo la Serie 1.
- Interruttore Filled (variante a grafico ad area).
- Data — l'elenco righe (Category + Series 1/2/3), lo stesso insieme di colonne usato dal grafico a barre.
- Series 1/2/3 name e Series 1/2/3 color.
- Background color, padding, border, border radius della card.
- Coppie indipendenti di colore/dimensione carattere per il titolo e per il testo di legenda/tabella.
Un grafico a linee può anche associare le proprie righe a una fonte dati connessa invece di digitarle. Un campo Group by trasforma ogni valore distinto in un punto lungo l'asse delle categorie, abbinato a fino a 3 campi di serie, ciascuno con il proprio aggregato. Un filtro facoltativo può fare riferimento ai tag di personalizzazione del destinatario per una vista della stessa tendenza specifica per destinatario. Vedi Associare i grafici a dati reali per i dettagli completi, inclusa la modalità sui risultati delle risposte di una campagna.
Esempi
Subject
Weekly signups are trending up
Un digest operativo settimanale può visualizzare il numero di ticket aperti sulle ultime 8 settimane come una singola linea, con i marcatori dei punti ancora visibili a quel conteggio, offrendo una lettura immediata su se la tendenza sta migliorando. Un riepilogo delle vendite potrebbe usare un grafico ad area riempita per il fatturato cumulativo lungo un trimestre, una serie per linea di prodotto (fino a 3). Il lettore vede sia la tendenza individuale sia, visivamente, l'ombreggiatura combinata che cresce settimana dopo settimana. Un report ricorrente sulle prestazioni può associarsi direttamente a una fonte dati filtrata per destinatario tramite un tag di personalizzazione — "l'utilizzo del tuo account questo mese" — così il grafico a linee di un progetto mostra una tendenza diversa a ogni destinatario dello stesso invio.
Come appare il fallback statico
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Open tickets</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Line chart: Week 1 (Open tickets 42); Week 2 (Open tickets 35); Week 3 (Open tickets 28)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<table style="width:100%;border-collapse:collapse;margin-top:4px">
<tr>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Open tickets</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Week 1</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">42</td>
</tr>
</table>
</div>
Il testo alternativo riassume ogni coppia categoria/valore di serie così la tendenza resta leggibile anche senza caricare l'immagine; la tabella sottostante è composta dagli stessi numeri come HTML semplice.