Il tutorial precedente di questa serie era incentrato sulla creazione di grafici a linea e grafici a barre mediante Chart.js. Entrambi questi grafici hanno i loro usi e le opzioni di configurazione che erano state analizzate in dettaglio nel tutorial precedente.

In questo tutorial, imparerete due nuovi tipi di grafici che possono essere creati utilizzando Chart.js: grafici radar e grafici polari. Proprio come il precedente tutorial, inizieremo con una breve panoramica dei tipi di grafico e quindi sposteremo la discussione in maniera più dettagliata.

Creazione di grafici Radar

I grafici a linea e a barre sono utili quando si desidera confrontare solo una o due proprietà di un gran numero di oggetti — per esempio, la popolazione di tutti i paesi dell'Asia o il numero di diversi inquinanti nell'atmosfera.

Diciamo che si desidera confrontare la densità, opacità, viscosità, indice di rifrazione e punto di ebollizione di tre diversi liquidi. La creazione di un grafico a barre per questi dati sarà problematica perchè sarà necessario creare cinque colonne diverse per ogni liquido. Sarà anche difficile confrontare le proprietà corrispondenti dei liquidi.

In situazioni dove è necessario confrontare molte proprietà di pochi oggetti, la creazione di un grafico radar è il metodo più efficiente di visualizzazione e confronto di dati. Questi grafici sono anche conosciuto come grafici a ragnatela.

Da Wikipedia, un grafico a radar è un metodo grafico di visualizzazione dei dati multivariati sotto forma di un grafico bidimensionale di tre o più variabili quantitative rappresentata su assi a partire dallo stesso punto. Le posizioni relative e gli angoli degli assi sono in genere privi di informazioni utili.

Creiamo il nostro primo grafico a radar. I grafici a radar vengono creati impostando la chiave type in Chart.js su radar. Ecco un esempio molto semplice.

var radarChart = new Chart(marksCanvas, {
    type: 'radar',
    data: marksData,
    options: chartOptions
});

Tracciamo i voti di due studenti di una classe in cinque diverse materie. Ecco il codice per fornire i dati per la creazione del grafico.

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [{
    label: "Student A",
    backgroundColor: "rgba(200,0,0,0.2)",
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Student B",
    backgroundColor: "rgba(0,0,200,0.2)",
    data: [54, 65, 60, 70, 70, 75]
  }]
};

var radarChart = new Chart(marksCanvas, {
  type: 'radar',
  data: marksData
});

Il primo grafico che creiamo solitamente non ha alcun colore di sfondo impostato in modo specifico. Tuttavia, i grafici a radar possono avere un sacco di sovrapposizione, rendendo difficile identificare correttamente i punti di dati senza alcuna codifica colore.

Per questo motivo, è stato assegnato un colore per ogni set di dati utilizzando la chiave backgroundColor. La seguente demo mostra il risultato finale del nostro codice. Come potete vedere, ora è molto facile confrontare le prestazioni di entrambi gli studenti in materie diverse.

Oltre al colore di sfondo, è possibile anche modificare il colore del bordo e la larghezza del bordo per il grafico utilizzando i tasti borderColor e borderWidth. È anche possibile creare bordi tratteggiati anziché linee continue utilizzando la chiave borderDash. Questa chiave accetta un array come valore.

Il primo elemento dell'array determina la lunghezza dei trattini, e il secondo elemento determina lo spazio tra di loro. È anche possibile fornire un valore di offset per disegnare i trattini utilizzando la chiave borderDashOffset.

È inoltre possibile controllare il colore del bordo e la larghezza per punti tracciati utilizzando il pointBorderColor e pointBorderWidth. Allo stesso modo, è anche possibile impostare un colore di sfondo per i diversi punti utilizzando la chiave pointBackgroundColor. La dimensione dei punti tracciati può essere specificata utilizzando la chiave pointRadius. È possibile controllare la distanza alla quale i punti dovrebbero iniziare ad interagire con il mouse con la chiave pointHitRadius.

È anche possibile controllare l'aspetto dei punti tracciati al passaggio del mouse utilizzando la  chiave pointHoverBackgroundColor, pointHoverBorderColor e pointHoverBorderWidth. Una cosa che devi ricordare è che queste chiavi al passaggio del mouse non aspetteranno effettivamente il passaggio del mouse sopra l'elemento per essere attivate. Le modifiche avranno effetto, non appena si è all'interno del raggio impostato sopra.

Ci sono un sacco di forme disponibili per i punti tracciati. Questi sono circolari per impostazione predefinita. Tuttavia, è possibile modificare la forma a triangle, rect, rectRounded, rectRot, cross, crossRot, star, line e dash.

Usiamo tutte queste chiavi per ridisegnare il precedente grafico a radar. Ecco il codice per fornire opzioni di configurazione per i set di dati e le scale.

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [{
    label: "Student A",
    backgroundColor: "transparent",
    borderColor: "rgba(200,0,0,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "orange",
    pointBorderColor: "rgba(200,0,0,0.6)",
    pointHoverRadius: 10,
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Student B",
    backgroundColor: "transparent",
    borderColor: "rgba(0,0,200,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "cornflowerblue",
    pointBorderColor: "rgba(0,0,200,0.6)",
    pointHoverRadius: 10,
    data: [54, 65, 60, 70, 70, 75]
  }]
};

var chartOptions = {
  scale: {
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 100,
      stepSize: 20
    },
    pointLabels: {
      fontSize: 18
    }
  },
  legend: {
    position: 'left'
  }
};

All'interno dell'oggetto chartOptions, i valori min e max vengono utilizzati per impostare i valori minimi e massimi per la scala. La chiave stepSize può essere utilizzata per istruire Chart.js sul numero di passaggi che dovrebbe effettuare per andare da min a max. Ecco il risultato finale del codice precedente.

Creazione di grafici polari

I grafici polari sono simili ai grafici a torta. Le due differenze principali tra questi grafici sono che nei grafici polari tutti i settori hanno angoli uguali e il raggio di ciascun settore dipende dal valore tracciato. Questi grafici vengono utilizzati per tracciare i fenomeni ciclici. Ad esempio, è possibile utilizzarli per tracciare il numero di uccelli migratori di una data specie nella tua zona in ogni stagione dell'anno.

Il raggio di ciascun settore in questi grafici è proporzionale alla radice quadrata del numero di oggetti corrispondenti. Nel caso di uccelli migratori, il raggio sarà proporzionale alla radice quadrata del numero di uccelli nella tua zona.

È possibile creare grafici polari in Chart.js impostando la chiave type su polarArea. Ecco il codice di base che è necessario per creare un grafico polare.

var polarAreaChart = new Chart(birdsCanvas, {
    type: 'polarArea',
    data: birdsData,
    options: chartOptions
});

Ecco il codice per tracciare il numero di uccelli migratori in un grafico polare. Gli unici dati forniti a questo punto sono il numero di uccelli e il colore di sfondo per le diverse stagioni.

var birdsData = {
  labels: ["Spring","Summer","Fall","Winter"],
  datasets: [{
    data: [1200, 1700, 800, 200],
    backgroundColor: [
      "rgba(255, 0, 0, 0.5)",
      "rgba(100, 255, 0, 0.5)",
      "rgba(200, 50, 255, 0.5)",
      "rgba(0, 100, 255, 0.5)"
    ]
  }]
};

var polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData
});

Il codice precedente creerà il seguente grafico polare.

Il grafico polare fornisce le classiche opzioni per impostare il backgroundColor, borderWidth, borderColor, hoverBackgroundColor, hoverBorderWidth e hoverBorderColor. Ci sono anche alcune chiavi specifiche di grafico polare che è possibile utilizzare per personalizzare il loro aspetto.

Ad esempio, è possibile impostare l'angolo di partenza per il primo valore nel set di dati utilizzando la chiave startAngle. Allo stesso modo, la chiave lineArc che può essere trovata sotto scale consente di specificare se le linee disegnate dovrebbero essere circolari o meno impostando il valore su true o false rispettivamente.

I settori disegnati nel grafico polare sono ruotati e ridimensionati per impostazione predefinita. Tuttavia, è possibile impedire l'animazione di ridimensionamento impostando il valore della chiave animateScale su false. Allo stesso modo, l'animazione di rotazione può essere disattivata impostando il valore della chiave animateRotate su false. Entrambe queste chiavi sono disponibili in animation.

Il codice riportato di seguito modifica il valore di poche chiavi per rendere il grafico più accattivante visivamente.

var birdsData = {
  labels: ["Spring", "Summer", "Fall", "Winter"],
  datasets: [{
    data: [1200, 1700, 800, 200],
    backgroundColor: [
      "rgba(255, 0, 0, 0.6)",
      "rgba(0, 255,200, 0.6)",
      "rgba(200, 0, 200, 0.6)",
      "rgba(0, 255, 0, 0.6)"
    ],
    borderColor: "rgba(0, 0, 0, 0.8)"
  }]
};

var chartOptions = {
  startAngle: -Math.PI / 4,
  legend: {
    position: 'left'
  },
  animation: {
    animateRotate: false
  }
};

var polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData,
  options: chartOptions
});

Oltre a ruotare il grafico e disabilitare l'animazione di rotazione, abbiamo anche spostato la legenda a sinistra del grafico impostando il valore position su left. Questo lascia abbastanza spazio nella parte superiore del grafico per visualizzarla correttamente.

Considerazioni finali

In questo tutorial, hai imparato molto sulle applicazioni del radar e dei grafici polari. Dopo di che, hai imparato a creare grafici base e personalizzarli con varie opzioni di configurazione disponibili in Chart.js. Impareremo qualcosa sui grafici a torta e a bolle nella parte successiva della serie.

Se stai lavorando con il web, soprattutto sul front-end, è importante conoscere JavaScript. Naturalmente, non è senza curva di apprendimento, e ci sono un sacco di frameworks e librerie da tenerti occupato. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, controlla quello che abbiamo disponibile nel marketplace Envato.

Se hai domande su questo tutorial, per favore fammelo sapere nei commenti.