» Disegnare grafici con Google charts

Disegnare grafici con Google charts

un grafico a torta tridimensionale

Dopo aver appena visto come creare grafici con Flash e diagrammi con Javascript, eccomi qui a ricordarmi di non aver mai parlato dell’ottimo - anche se forse un po’ più astruso - Google charts (charts=grafici).

Se avete la necessità di inserire un semplice grafico nella vostra pagina internet, ma anche se volete creare dei grafici di gran impatto visivo, magari anche collegati a database dinamici, Google charts può sicuramente esservi utile.

Il grafico a torta tridimensionale che vedete in apertura è creato con una semplicissima riga di codice HTML:

http://chart.apis.google.com/chart?cht=p3&
chd=s:Z923&
chs=400x180&
chl=Google|Charts|Disegna|Grafici&
chco=1B75DF,ff0000

…che per comodità di lettura ho mandato a capo ad ogni variabile inserita.

Come si usa?

I tipi di grafici che si possono creare sono i seguenti:

grafici lineari (a linee spezzate)
grafici a barre
grafici a torta
diagrammi di Eulero-Venn (insiemi)
diagrammi a dispersione (scatterplot)

Per disegnare il grafico a torta che illustra questo post, bisogna inviare una richiesta all’indirizzo http://chart.apis.google.com/chart, passando di seguito i parametri che ci serviranno:

http://chart.apis.google.com/chart?<1>&<2>&<N>

Aiutandoci con le istruzioni nella pagina del progetto, vediamo che per disegnare un grafico a torta tridimensionale dobbiamo usare la variabile cht:

cht=p3

Per passare i nome (descrizioni) delle variabili che il nostro diagramma andrà ad illustrare utilizzeremo la variabile chl, separando i valori con una linea verticale (|), un in questo modo:

chl=Google|Charts|Disegna|Grafici

I valori delle variabili che compongono il grafico vengono passati tramite la variabile chd:

chd=s:Z923

…dove ’s’ indica ’simple encoding’; per il resto rimando al sito di Google.

Per colorare i campi della nostra torta useremo la variabile chco.
Qui indichiamo il primo è l’ultimo colore, in formato esadecimale:

chco=1B75DF,ff0000

Infine la dimensione dell’immagine che verrà creata viene definita tramite la variabile chs:

chs=400x180

Per pubblicare il nostro grafico non dobbiamo infine che far altro che richiamare l’indirizzo come fosse un’immagine vara e propria, cioè usando il tag IMG:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=s:Z923&chs=400x180&chl=Google|Charts|Disegna|Grafici&chco=1B75DF,ff0000"  />

Collegamenti sponsorizzati:

Se l'articolo ti è piaciuto è sempre graditissimo un commento! Se vuoi ricevere le ultime novità dal mio blog puoi anche iscriverti ai Feed RSS (non si paga!). Anche via email. CIAO!!