INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Creare un grafico a barre in Javascript

Corso Javascript
Impara a creare controlli ed animazioni

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:

IN EVIDENZA
Una slidegallery con jQuery Pagamenti online con PayPal e PHP Guadagna col tuo sito grazie a TradeD... Riavviare IIS Effetto ombra su testo con Photoshop Guida XHTML Riscrivere le URL con Asp Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Referenze dei Tag Html HTTP 500 internal server error Introduzione ad Ajax ed Asp con Jscri... Breve guida a jQuery Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript

HOT LINKS
Corsi online Guadagna col sito Hosting 20 euro Mr.Webmaster PHP&Linux ExtroWebSite gDesign NetFree TutorialWeb Dablones AiutoPC AspCode MorpheusWeb WebIsland WebmasterRisorse PCSelf