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 TypeSalesAdministrationITCustomer supportDevelopmentMarketing
Allocated budget4200300020000350005000018000
Actual spending50001400028000260004200021000

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:

Screenshot che mostra un esempio di utilizzo del 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.