Come creare istogrammi e grafici HTML e JavaScript

Indice dei contenuti

Per comunicare informazioni in modo chiaro ed efficace spesso si fa uso di contenuti grafici di vario tipo, gli istogrammi e i grafici sono tra gli strumenti più utilizzati, poiché sono l’ideale per presentare dati in maniera comprensibile e coinvolgente.

Nel mondo digitale di oggi, l’accesso a informazioni visivamente accattivanti è essenziale per attirare l’attenzione dei lettori e fornire una panoramica rapida delle tendenze e dei pattern nascosti nei dati. Molti software permettono di creare presentazioni con grafici integrati, basti pensare a noto Microsoft Powerpoint, e fortunatamente, con l’aiuto delle tecnologie web come HTML e JavaScript, possiamo ricreare facilmente grafici e istogrammi interattivi che rendono migliore la comprensione dei dati.

In questo articolo spiegherò come utilizzare HTML e JavaScript per elaborare e visualizzare i set di dati in forma grafica. Mostrerò ogni passaggio del processo di creazione di istogrammi e grafici accattivanti, fornendo esempi pratici e semplici da seguire.

Nota: In questo articolo pubblicherò codice senza l’utilizzo di framework come chart.js, ma userò puro codice JavaScript. Questo ti consentirà integrare un codice più leggero e veloce e di avere un maggior controllo sui dati, tuttavia, richiede un minimo di competenze in più di JavaScript, anche se cercherò di spiegarlo nel modo più semplice possibile.

Grafici e istogrammi in puro JavaScript e HTML

In questo post spiegherò come creare due differenti tipi di grafici:

Un istogramma a colonne verticali, su un piano cartesiano con valori personalizzati e un’intestazione.
Un grafico a torta con valori percentuali e legenda delle categorie mostrate.

Entrambi i grafici mostrano tecniche diverse ma facilmente integrabili in una pagina web.

Struttura dei grafici

Entrambi i grafici mostrati nei successivi paragrafi condividono una struttura in HTML, utilizzando il tag canvas, in cui è possibile “disegnare” elementi di forme semplici o complesse con codice JavaScript.

L’uso di un canvas consente di gestire al meglio gli elementi dei grafici attraverso specifiche coordinate e aggiornare anche valori in tempo reale senza cambiare pagina web. Inoltre permette di definire oggetti di forma complessa come un grafico a torta, che con semplice HTML non sarebbe (quasi) possibile.

Istogramma a colonne

L’istogramma a colonne è uno dei grafici contenenti dati più utilizzati al mondo. Esso è disposto su un piano cartesiano semplice, dove i valori numerici vengono visualizzati sull’asse Y e i valori di riferimento sull’asse X. Le colonne rappresentano graficamente i valori, fornendo un riferimento visivo immediato.

Puoi visualizzare qui il codice interattivo di questo grafico.

Codice HTML

Qui in basso la struttura HTML contenente il canvas su cui andremo a disegnare gli elementi:

<!DOCTYPE html>
<html>

<head>
  <title>Istogramma a colonne</title>
</head>

<body>
  <canvas id="grafico" width="500" height="300"></canvas>
</body>

</html>

Codice JavaScript

Ora la parte più importante: lo script JS per la creazione dell’istogramma (sotto spiegherò in dettaglio il codice). Ricorda di inserire lo script all’interno del tag <script>...</script> per utilizzarlo in una pagina web.

// Dati di esempio per le date e i valori
var dates = ["01/07", "02/07", "03/07", "04/07", "05/07", "06/07", "07/07"];
var values = [20, 60, 40, 90, 150, 80, 110];

// Funzione per disegnare l'istogramma con date e valori personalizzati
function drawCanvas(dates, values) {
  var canvas = document.getElementById('grafico');
  var ctx = canvas.getContext('2d');

  // Pulisce il canvas
 da elementi esistenti
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var barWidth = 30;
  var startX = 70;
  var startY = canvas.height - 50;
  var fontSize = 12;

  // Trova il minimo e il massimo valore nell'array dei valori
  var minValue = Math.min(...values);
  var maxValue = Math.max(...values);

  // Calcola i numeri intermedi tra il minimo e il massimo per l'asse y
  var interval = (maxValue - minValue) / 4;
  var yValues = [];
  for (var i = 0; i <= 4; i++) {
    yValues.push(minValue + interval * i);
  }

  // Calcola il valore di partenza (includendo il valore minimo)
  var startValue = minValue - interval;
  yValues.unshift(startValue);

  // Disegna l'intestazione
  ctx.fillStyle = 'black';
  ctx.font = 'bold 16px Arial';
  ctx.textAlign = 'center';
  ctx.fillText('Andamento prezzo (€/kg)', canvas.width / 2, 30);

  // Disegna la griglia sullo sfondo
  ctx.strokeStyle = '#f0f0f0';
  ctx.lineWidth = 1;
  for (var i = 0; i <= 4; i++) {
    var y = startY - (yValues[i] - startValue) / (maxValue - startValue) * (canvas.height - 100);
    ctx.beginPath();
    ctx.moveTo(startX, y);
    ctx.lineTo(canvas.width - 30, y);
    ctx.stroke();
  }

  // Disegna i valori sull'asse y
  for (var i = 0; i < yValues.length; i++) {
    if (i > 0) {
      var y = startY - (yValues[i] - startValue) / (maxValue - startValue) * (canvas.height - 100);
      ctx.fillStyle = 'black';
      ctx.font = fontSize + 'px Arial';
      ctx.textAlign = 'right';
      ctx.fillText(yValues[i].toFixed(0), startX - 10, y + fontSize / 2);
    }
  }

  //codice creato da Byte-post.com
  // Disegna le barre dell'istogramma con date
  for (var i = 0; i < dates.length; i++) {
    var barHeight = (values[i] - startValue) / (maxValue - startValue) * (canvas.height - 100);
    ctx.fillStyle = 'blue';
    ctx.fillRect(startX, startY - barHeight, barWidth, barHeight);

    // Disegna la data sotto la colonna
    ctx.fillStyle = 'black';
    ctx.font = fontSize + 'px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(dates[i], startX + barWidth / 2, startY + fontSize + 5);

    startX += barWidth + 20;
  }
}

// Disegna l'istogramma iniziale all'avvio della pagina
window.onload = function () {
  drawCanvas(dates, values);
};

Spiegazione dei punti del codice:

Il canvas verrà generato al completo caricamento della pagina web, attraverso la funzione drawCanvas();
drawCanvas contiene parametri personalizzati di 2 set di dati:
- Primo set: valori dell’asse X (tipo stringa) sottoforma di array [1,2,3].
- Secondo set: valori sull’asse Y (tipo numerico) come array.
Per ogni valore verrà generata una colonna, l’altezza delle colonne è auto generata per adattare la dimensione totale del grafico (rapportando tutti i valori dell’array considerando il minimo e il massimo).
L’istogramma contiene un’intestazione (qui ad esempio ho scritto “Andamento prezzo“).

Nota: considera di cambiare la dimensione del canvas (dal codice HTML) nel caso di un elevato numero di colonne. Usa anche il codice CSS se lo ritieni necessario per cambiare la dimensione del canvas.

Grafico a torta

Il grafico a torta, noto anche come grafico circolare o diagramma a torta, è una forma comune di visualizzazione dei dati che rappresenta le proporzioni o le percentuali di una serie di categorie o variabili. La sua forma circolare lo rende particolarmente adatto per mostrare chiaramente la distribuzione dei dati in modo visivo e intuitivo.

L’intero cerchio del grafico rappresenta il totale delle informazioni da visualizzare, e ogni “fetta” del cerchio rappresenta una specifica categoria o valore. Le dimensioni delle fette sono proporzionali alle quantità o percentuali che rappresentano rispetto al totale.

Anche per questo grafico puoi visualizzare il codice interattivo su questo link di Codewith.it.

Codice HTML

Qui in basso il codice JavaScript, non molto diverso dal precedente.

<!DOCTYPE html>
<html>

<head>
  <title>Grafico a Torta</title>
</head>

<body>
  <canvas id="grafico" width="600" height="400"></canvas>
</body>

</html>

Codice JavaScript

Ora lo script per generare dei grafici circolari usando puro JavaScript.

// Dati di esempio per le categorie e i valori
var categories = ["Roma", "Milano", "Napoli", "Torino", "Palermo"];
var values = [200, 150, 120, 90, 75];
var colors = ["red", "#33ff57", "#5733ff", "#ff33aa", "#33aaff"];

// Funzione per disegnare il grafico a torta
function drawCanvas(categories, values, colors) {
  var canvas = document.getElementById('grafico');
  var ctx = canvas.getContext('2d');

  // Pulisce il canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = Math.min(centerX, centerY) - 10;

  var total = values.reduce((acc, val) => acc + val, 0);
  var startAngle = 0;
  var endAngle = 0;

  // Disegna l'intestazione
  ctx.fillStyle = 'black';
  ctx.font = 'bold 16px Arial';
  ctx.fillText('Città più popolate', 5, 15);

  for (var i = 0; i < values.length; i++) {
    endAngle = startAngle + (values[i] / total) * (2 * Math.PI);

    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.closePath();
    ctx.fillStyle = colors[i];
    ctx.fill();

    // Calcola l'angolo centrale per posizionare il testo della percentuale
    var midAngle = (startAngle + endAngle) / 2;
    var textX = centerX + (radius / 2) * Math.cos(midAngle);
    var textY = centerY + (radius / 2) * Math.sin(midAngle);

    // Disegna la percentuale all'interno della fetta
    var percentage = (values[i] / total) * 100;
    ctx.fillStyle = 'black';
    ctx.font = 'bold 12px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle'; // Imposta l'allineamento verticale al centro
    ctx.fillText(percentage.toFixed(1) + '%', textX, textY);

    startAngle = endAngle;
  }

  // Disegna la legenda
  var legendX = 0;
  var legendY = 25;
  var legendSize = 15;
  var legendSpacing = 25;

  for (var i = 0; i < categories.length; i++) {
    ctx.fillStyle = colors[i];
    ctx.fillRect(legendX, legendY + i * legendSpacing, legendSize, legendSize);

    ctx.fillStyle = 'black';
    ctx.font = '14px Arial';
    ctx.textAlign = 'left'; // Imposta l'allineamento orizzontale a sinistra
    ctx.textBaseline = 'middle'; // Imposta l'allineamento verticale al centro
    ctx.fillText(categories[i], legendX + legendSize + 5, legendY + i * legendSpacing + legendSize / 2);
  }
}

// Disegna il grafico a torta iniziale all'avvio della pagina
window.onload = function () {
  drawCanvas(categories, values, colors);
};

Spiegazione del codice:

La funzione che genera il contenuto del canvas è drawCanvas() e viene richiamata al termine del caricamento della pagina web.
drawCanvas() richiede tre parametri di tipo array:
- Categorie: tipo stringa. Indicano il nome delle categorie o dei valori da mostrare nella legenda.
- Valori: tipo numerico. I valori da mostrare nelle “fette” del grafico.
- Colori: valori di tipo HEX o RGB, per definire i differenti colori delle “fette”.
Il grafico contiene un’intestazione e una legenda a sinistra in cui sono mostrati i valori testuali della categorie e il relativo colore associato.
I valori immessi nell’array “values” verranno convertiti automaticamente in percentuale, dunque non verranno mostrati loro nel grafico, ma la percentuale corrispondente.

Ora che ti ho mostrato questi due tipi di grafici, non ti resta che copiarli e integrarli nelle tue pagine web, modificando opportunamente i valori. Se non ti è chiaro qualche passaggio o desideri una variante a quelli proposti, scrivi nei commenti e ti aiuterò con le modifiche.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti:

Lascia un commento Annulla risposta

2 commenti su “Come creare istogrammi e grafici HTML e JavaScript”

2 commenti

Germano
12 Ottobre 2023, 12:20
Ciao,
ti ringrazio per questo articolo veramente interessante.
Ho provato a caricare l’esempio del grafico a torta e funziona perfettamente mentre non riesco a visualizzare quello dell’istogramma.
Come indicato ho inserito lo script all’interno del tag … ma non carica il grafico.
Istogramma a colonne
C’è per caso qualche errore nel codice oppure sbaglio qualcosa?
Ringrazio in anticipo per qualsiasi risposta.
Rispondi
- Simone Bernardo L'autore dell'articolo
  12 Ottobre 2023, 12:29
  Ciao Germano.
  Il codice mostrato è funzionante, puoi testarlo qui: https://codewith.it/p/eOgDM5
  Nota che, se crei l’istogramma a colonne e il grafico a torta nella stessa pagina HTML, dovrai cambiare l’id dei canvas (es. canvas id="grafico" e canvas id="grafico2" ) altrimenti andranno in conflitto.
  Se hai ancora problemi, condividi il codice così potrò aiutarti.
  Un saluto, Simone
  Rispondi

Grafici e istogrammi in puro JavaScript e HTML

Struttura dei grafici

Istogramma a colonne

Codice HTML

Codice JavaScript

Grafico a torta

Codice HTML

Codice JavaScript

AUTORE

Simone Bernardo

Lascia un commento Annulla risposta

2 commenti su “Come creare istogrammi e grafici HTML e JavaScript”