Creare grafici con Google Charts

A chi non è mai capitato di dovere creare un grafico?
Chi per lavoro, chi per curiosità e chi per una ricerca scolastica, ancora una volta Google vi viene incontro con i suoi Google Charts.

Avete un minimo di conoscenza dell’HTML? Sapete creare una pagina Web con il link a una immagine?
Se avete risposto di si potrete facilmente sfruttare i grafici di BigG, all’inizio un po’ complicati, ma molto potenti e con grande impatto visivo.

L’immagine qui sopra è stata creata con queste poche righe di codice

http://chart.apis.google.com/chart?cht=p3&
chd=t:50,40,10&
chs=500x150&
chl=HTML.it|oneGoogle|Mauro&
chco=1B75DF,ff0000


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).

Ogni grafico deve iniziare con questo codice

http://chart.apis.google.com/chart

Di seguito si possono passare le variabili separandole dal carattere &

http://chart.apis.google.com/chart?&&

Per disegnare un grafico a torta tridimensionale è necessario passare il carattere cht

cht=p3

Le descrizioni delle variabili che il nostro diagramma saranno definite dalla variabile chl, separando ogni valore con una linea verticale (|)

chl=HTML.it|Webnews|Mauro

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

chd=t:50,40,10

Per colorare i campi della nostra torta useremo la variabile chco, indichiamo il primo e 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=t:50,40,10&
chs=500x150&
chl=HTML.it|Webnews|Mauro&
chco=1B75DF,ff0000" alt="creo grafici con Google" />