Creare un grafico a barre in Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Matteo Molinaro nella sezione Javascript

In questo articolo verrà illustrata una semplice idea per generare dei grafici a barre, non particolarmente complessi, con poche righe di Javascript e un semplicissimo foglio di stile.

Prima di iniziare il tutto dovremo creare una GIF trasparente di un pixel e nominarla blank.gif, potrebbe sembrare una cosa inutile, in effetti non è nemmeno molto elegante, ma vedremo poi a cosa serve.

La prima cosa da fare è creare la nostra classe nel foglio di stile, iniziamo con l'esempio più semplice di tutti, vedremo poi come modificarlo per ottenere risultati diversi.

La classe è la seguente:

.barra
{
    width: 20px;
    background: #FF0000;
}
Questa classe si limita a settare a 20 pixel la larghezza e a modificare il colore di sfondo di un elemento e porlo a #FF0000 (rosso). Per il momento è sufficiente.

A questo punto dobbiamo decidere da dove prendere i dati per il nostro grafico. Optiamo abbastanza ovviamente per un Array(), che si può creare e riempire nel modo seguente:
var a = Array(10);
    for(i = 0; i < 10; i++)
    {
        a[i] = i;
    }
Il codice sopra riportato crea un Array() di 10 elementi e lo riempie con valori crescenti, da 0 a 9.

Ora che abbiamo i nostri dati dobbiamo usarli per disegnare il nostro grafico, una prima semplice funzione che possiamo scrivere è questa:
function grafico(data)
{
    for(i = 0; i < data.length; i++)
    {
        document.write("<img src='blank.gif' class='barra' style='height: " + data[i] + "px;'>");
    } 
} 
La funzione grafico() scorre ad uno ad uno gli elementi dell'Array() passato come parametro e crea un Tag <img> con altezza pari al valore del dato corrente, l'immagine sorgente è la GIF trasparente che abbiamo creato all'inizio, ed è sempre la stessa per ogni 'barra' del grafico creata.

A questo punto viene da chiedersi perchè scomodare <img> invece che usare ad esempio <span> con le opportune regole. Il problema è semplicemente che Explorer sembra far fatica a creare dei blocchi con di dimensioni troppo piccole.

Chiamando la funzione appena scritta passando come parametro l'Array() a creato in precedenza il risultato dovrebbe essere il seguente:



In questo caso le barre risultano eccessivamente basse poichè i valori all'interno dell'Array() arrivano al massimo a 9, e 9 pixel sono un po' pochi. Il problema opposto si presenterebbe se i valori fossero nell'ordine delle migliaia: avremmo dei grafici che occuperebbero decine di pagine in altezza. Aggiungiamo quindi alcuni parametri alla funzione:
  • height - che indica l'altezza massima del grafico
  • max - il valore massimo che i dati all'interno dell'Array() possono assumere
  • width - visto che ci siamo indichiamo anche la larghezza massima che può occupare il grafico
I primi due parametri servono per calcolare l'altezza di ogni barra. Chiamiamo h l'altezza della barra (incognita); si ha la proporzione
max : height = h : data[i]
da cui si può calcolare x:
h = (dato * max) / height
la larghezza delle colonne è invece sempre la stessa e si può calcolare una volta per tutte così:
w = width / data.length
A questo punto è sufficiente modificare la funzione in modo che ad ogni iterazione vengano assegnati i giusti valori di altezza e larghezza ad ogni barra.
function grafico(data, max, height, width)
{
    w = Math.floor(width/data.length);
        for(i = 0; i < data.length; i++)
        {
            h = Math.floor(data[i] * height/max);
            document.write("<img src='blank.gif' class='barra' style='height: " + h + "px; width: " + w + "px;'>");
        }
} 
Decidiamo che il nostro grafico debba occupare uno spazio di 200x100 pixel e che il valore massimo che possono assumere i valori sia 10. Il risultato con lo stesso Array() di dati usato prima è ora il seguente:



Nel caso volessimo generare più grafici con diversi stili utilizzando sempre lo stesso codice possiamo aggiungere alla funzione un altro parametro che chiamiamo sty che di fatto dev'essere una stringa contenente il nome della classe da applicare alle barre del grafico. Facciamo quindi questa piccola modifica al codice.
function grafico(data, max, height, width, sty)
{
    w = Math.floor(width/data.length);
        for(i = 0; i < data.length; i++)
        {
            h = Math.floor(data[i] * height/max);
            document.write("<img src='blank.gif' class='" + sty + "' style='height: " + h + "px; width: " + w + "px;'>");
        }
}
Tanto per vedere che effetto fa proviamo a creare due classi, una che modifica i bordi delle barre in modo da farle sembrare in rilievo, un altro con un'immagine con sfumatura graduata in modo da farle sembrare tondeggianti.
.barra1
{
    border-top: solid #FF8888;
    border-left: solid #FF8888;
    border-bottom: solid #AA0000;
    border-right: solid #AA0000;
    background: #FF0000;
}
.barra2
{
    background: url("sfumatura.gif");
}
I risultati sono i seguenti:

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (106.555)

:: Breve guida a jQuery (96.818)

:: Le espressioni regolari in Javascript (84.690)

:: Gestione delle stringhe in Javascript (74.154)

:: Stampare una pagina col Dhtml (42.639)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (39.785)

:: Menu orizzontale dinamico in Dhtml (36.961)

:: Gli Array in Javascript (35.690)

:: Temporizzazioni Javascript (31.211)

:: Istruzion condizionali in Javascript: if e switch (28.629)

IN EVIDENZA
DOWNLOAD