Guida a Google Chart 2/4

Continuiamo con la guida, più precisamente con le varie tipo logie di grafici messe a disposizione da Google.

Il tipo di grafico si indica con l’attributo cht=tipoDiGrafico.

I grafici possono essere divisi in 5 macro categorie:

• a linee
• a barre
• a torta
• di Venn
• a punti

Procederò con ordine illustrandoli uno alla volta.

Diagrammi a linee
I diagrammi a linee si distinguono in 2 tipologie: lineare (cht=lc) e di tipo xy (cht=lxy). Il primo prende in input una serie di valori separati da virgole che si riferiscono al valore delle ordineate, in quanto quello delle ascisse viene calcolato su tutta la lunghezza dell’asse rendendo così i punti equidistanti sull’asse x; per rappresentare più linee, i valori devono essere separati dal carattere “|” ad ogni nuova linea. Il secondo, invece, prende in input coppie di valori separate dal carattere “|”; per indicare più punti di una stessa linea, separarli con il carattere virgola (“,”) secondo il seguente esempio: x1,x2,x3|y1,y2,y3, mentre più linee vanno separate dal carattere “|”. Se un valore è mancante, viene indicato con -1.
Per chiarire meglio quanto sopra, procediamo con 2 esempi:
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:10,20,50,30,90,70,20,40 &cht=lc" />



<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:0,10,15,25,30,45,60,75|10,20,50,30,90,70,20,40|0,10,20,60|50,0,10,90 &cht=lxy" />




Diagrammi a barre
I diagrammi a barre possono essere rappresentati in 4 modi differenti: a barre unite orizzontale (cht=bhs) o verticale (cht=bvs) e a barre separate orizzontale (cht=bhg) o vertcale (cht=bvg); i primi rappresentano i dati raggruppati in un unica barra, mentre i secondi rappresentano ogni valore come una barra singola. Per distinguere i vari valori, viene richiesto l’attributo chco che indica i colori, espressi in formato esadecimale, delle barre; nel caso in cui il numero di colori fosse minore di quello delle barre, i colori verranno utilizzati ciclicamente. I singoli valori vanno inseriti separati da virgole, mentre si deve utilizzare il carattere “|” per separare i gruppi di valori.
Ecco alcuni esempi:
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:10,20,50|30,70,5|30,20,40 &cht=bhs &chco=ff0000,0000ff" />

<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:10,20,|30,70 &cht=bhg &chco=ff0000,0000ff" />

<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:10,20,50|30,70|30,20,40 &cht=bvs &chco=ff0000,0000ff" />

<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:10,20,50|30,70|30,20,40 &cht=bvg &chco=ff0000,0000ff" />

Diagrammi a torta
I diagrammi a torta posso essere di tipo bidimensionale (cht=p) o tridimensionale (cht=p3); i dati vengono passati separati da virgole e nel caso in cui non venisse inserito l’attributo chco i colori delle sezioni del grafico verrebbero sfumati dall’arancio scuro al giallo pallido. Per quanto riguarda le dimensioni, la larghezza dell’immagine deve essere di almeno 2 volte l’altezza, per quanta riguarda il grafico bidimensionale, e di almeno 2,5 volte nel caso del grafico tridimensionale.
Esempi:
<img src="http://chart.apis.google.com/chart? chs=400x150 &chd=t:10,20,45,25 &cht=p &chco=ff0000,00ff00,0000ff,ffff00" />

<img src="http://chart.apis.google.com/chart? chs=400x150 &chd=t:10,20,45,25 &cht=p3 &chco=ff0000,00ff00,0000ff,ffff00" />

Diagrammi di Venn
I diagrammi di Venn (cht=v) permettono di rappresentare valori di dati di tipo insiemistico; i valori di dati da inserire per la rappresentazione vanno separati da virgole e sono i seguenti:
Prendendo ad esempio 3 insiemi di dati A, B e C:

• dimensioni di A
• dimensioni di B
• dimensioni di C
• intersezione di A con B
• intersezione di A con C
• intersezione di B con C
• intersezione di A con B con C

Esempio:
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:100,80,60,30,30,30,10 &cht=v &chco=ff0000,00ff00,0000ff" />

Diagrammi a punti
I diagrammi a punti (cht=s) permettono di avere una rappresentazione immediata della dispersione dei valori in un’area; i valori vanno inseriti in 2 gruppi separati dal carattere “|” per separare le coordinate x da quelle y; nel singolo gruppo i valori vanno separati da virgole.
Esempio:
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,51,52,53,20,12,14,30,1|11,12,10,12,20,30,30,20,40 &cht=s" />

Anche per oggi è tutto, alla prossima!
Mostra/Nascondi tastiera HotKeys