Creare grafici solo con i CSS

Questa è la traduzione dell'articolo Pure Css Data Chart di Alen Grakalic pubblicato originariamente su CSS Globe il 2 Febbraio 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

La visualizzazione di dati sul web è quasi sempre ottenuta con applicazioni Flash o con l'ausilio di qualche linguaggio di programmazione. Queste soluzioni sono le uniche per semplici grafici? Perché non provare a realizzare il tutto usando solo CSS? Per iniziare ecco la demo e il file zip da scaricare.

L'approccio

In questo esempio non userò Javascript o linguaggi server side. Farò leva solo ed esclusivamente su markup HTML e CSS.

L'obiettivo è quello di presentare dei semplici grafici con dati. Potremmo dire che un grafico è un oggetto a due dimensioni. Così, la migliore soluzione a livello semantico e strutturale è una lista di definizione. Perché? Beh, per iniziare si tratta di una lista di item. Sebbene una lista sia lineare, possiamo intendere i titoli di una lista di definizione (gli elementi dt) come gli item sull'asse delle x e le descrizioni delle definizioni (gli elementi dd) come i valori sull'asse delle y.

Se tutto ciò non ha molto senso a causa delle mie povere capacità di spiegazione :), diciamo che vorremmo trasformare qualcosa del genere

in questo

solo con i CSS.

Il markup

Nel mio esempio ho usato un periodo di 12 mesi e ho presentato i livelli di applicazione ed energia nel lavoro in percentuali, essendo il 100% il momento in cui mi sono sentito meglio rispetto al lavoro. Come potete vedere, il sesto giorno c'è stato un picco perché proprio allora ho ricevuto un assegno da un cliente :)

Comunque, la struttura che ho scelto per rappresentare questo tipo di dati è una lista di definizione. Il titolo della definizione contiene l'indicazione del giorno:

La descrizione della definizione contiene il valore:

All'interno della definizione della descrizione aggiungerò uno span e un elemento <em> annidato. Non per ragioni strutturali, ma per avere più elementi su cui appoggiarmi. Assegnerò anche delle classi che potrò usare in seguito.

Ecco come risulta la descrizione della definizione:

Gli stili

La lista di definizione agisce come una sorta di container del grafico, così assegnerò ad essa un'immagine di sfondo e imposterò le dimensioni in larghezza e altezza per il grafico. Inoltre, rimuoverò i margini e il padding di default:

In tale contesto i titoli delle definizioni non hanno un ruolo, così li nasconderò:

Andiamo avanti. Le definizioni delle descrizioni contengono due elementi figli: span ed em. Ho tre elementi su cui lavorare.

Metterò i <dd> nella giusta posizione aggiungendo dei margini, impostando la loro altezza in modo che corrisponda al valore di 100% e la larghezza che corrisponda ad una colonna del grafico usato come sfondo. Ogni elemento <dd> ha un posizionamento relativo in modo tale che gli elementi figli possano essere relazionati ad esso:

Gli elementi span rappresentano la colonna e gli em sono quei quadrati al centro con i rispettivi valori. Gli span sono posizionati assolutamente e piazzati sul fondo, così possono crescere dal fondo stesso in base alla loro percentuale:

Ecco lo schema del grafico:

Come impostiamo allora l'altezza?

Lo facciamo impostando il valore height per gli elementi span in pecentuale. Avete notato nella parte relativa al markup che lo span ha due classi CSS. La prima definisce il suo tipo (da type1 a type4). Nel mio caso i type sono usati per impostare diversi colori. La seconda classe (da p0 a p100) definisce l'altezza dello span:

Così, oltre a inserire il valore nel testo dobbiamo fornire una classe CSS che corrisponda ad esso:

Così funziona tutto. È ovvio che i dati, oltre che inseriti a mano, possono anche essere generati programmaticamente.