Creare grafici con Google Charts

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

[!] Ci sono problemi con l’autore. Controllare il mapping sull’Author Manager

.

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.

creo grafici con Google

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

[!] Ci sono problemi con l’autore. Controllare il mapping sull’Author Manager

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" />

Questo articolo contiene link di affiliazione: acquisti o ordini effettuati tramite tali link permetteranno al nostro sito di ricevere una commissione nel rispetto del codice etico. Le offerte potrebbero subire variazioni di prezzo dopo la pubblicazione.

Ti consigliamo anche

Link copiato negli appunti