Aggiungiamo una novità al repertorio dei grafici Echarts (sviluppati in JavaScript con la libreria open source Apache ECharts): il grafico Radar.
Questo nuovo strumento consente di rappresentare efficacemente la distribuzione dei valori di due o più variabili numeriche che hanno la medesima origine.
Esploriamo insieme le sue funzionalità e cosa fare per visualizzarlo all’interno delle schede.
Quando utilizzare il grafico radar?
Questo grafico è anche conosciuto come “diagramma di Kiviat” oppure “grafico a ragnatela” e viene utilizzato per confrontare dati su variabili multiple che condividono la stessa origine.
Immaginiamo di dover ottenere informazioni circa il costo di un progetto confrontando il budget allocato e le spese effettive. Inoltre, vogliamo rappresentare come i costi vengono suddivisi tra spese di marketing, vendite, amministrazione, IT, supporto clienti e sviluppo.
La matrice dei dati a disposizione assume questa forma:
Budget Type | Sales | Administration | IT | Customer support | Development | Marketing |
Allocated budget | 4200 | 3000 | 20000 | 35000 | 50000 | 18000 |
Actual spending | 5000 | 14000 | 28000 | 26000 | 42000 | 21000 |
Potremmo scegliere di rappresentare i dati usando un grafico a barre multiserie:

Questa rappresentazione, però, si limita a sottolineare la differenza nella suddivisione delle spese tra i due gruppi, più che mettere a confronto i due tipi di budget.
Proviamo a rappresentare gli stessi dati usando un grafico radar:

Con questa visualizzazione risulta evidente non solo la suddivisione delle spese tra aree di lavoro, ma anche la differenza che sussiste nella suddivisione tra il budget allocato e le spese effettive.
Formato dati e script di scheda
Come per tutti i tipi di grafico che appartengono al componente EXA, la struttura dati richiesta è un xml di matrice. Per disegnare il grafico all’interno di una scheda sarà sufficiente creare una subsezione CHA, indicando come attributo di setup Typ="Radar"
per visualizzare i dati in un grafico radar.
Come in altri tipi di grafico, è possibile personalizzare:
- colori;
- dimensioni;
- colonne utilizzate come asse e serie;
- titolo;
- legenda.
Per ulteriori informazioni sull’utilizzo dei grafici ed esempi di script, consulta lo showcase di smeup e la UPP dedicata ai grafici: LOCEXA, in cui troverai una sezione dedicata al grafico radar.