Guida a Google Chart 4/4

Concludo la mia guida (dopo più di un mese di assenza) parlando degli ultimi 4 parametri da prendere in considerazione per la creazione dei grafici con Google Chart; nell’ordine saranno: chbh, chls, chg e chm.

Il primo, chbh, permette attraverso 3 parametri di specificare nei grafici a barre: la larghezza delle barre, la distanza tra quelle dello stesso gruppo e tra di gruppi differenti.

<img src="http://chart.apis.google.com/chart? chs=400x300 &chd=t:15,50,30|10,20,30 &cht=bhg &chbh=20,3,12 &chco=ff0000,00ff00" />




<img src="http://chart.apis.google.com/chart? chs=400x300 &chd=t:15,50,30|10,20,30 &cht=bhg &chbh=10,3,20 &chco=ff0000,00ff00" />



Il secondo, chbh, invece, permette di impostare nei grafici a linee, lo spessore della linea, la lunghezza del segmento colorato e quella dello spazio bianco tra i segmenti.

<img src="http://chart.apis.google.com/chart? chs=400x300 &chd=t:0,50,30|20,10,30 &cht=lc &chls=3,8,3|1,3,3 &chco=ff0000,00ff00,0000ff" />




Sempre per i grafici a linee, è possibile creare delle griglie personalizzate per facilirare l’utente nella lettura del grafico; per utilizzare questa opzione, bisogna aggiungere il parametro chg, all’url che passiamo al tag img. I parametri che interessano le griglie sono 4: distanza delle linee sull’asse x, sull’asse y, lunghezza del segmento disegnato e spazio bianco tra i segmenti.

<img src="http://chart.apis.google.com/chart? chs=400x300 &chd=t:0,50,30|20,10,30 &cht=lc &chg=5,10,5,3 &chco=ff0000,00ff00,0000ff" />




L’ultimo attributo da prendere in considerazione è chm, il quale permette di definire delle forme personalizzate di punti oppure di visualizzare dei range; siccome questo attributo è l’ultimo e permette molte varianti, vedremo alcuni esempi esplicativi.
I parametri richiesti da chm relativi ai singoli punti sono i seguenti: tipologia di forma, colore, data set di riferimento, punto del data set scelto, dimensione.

<img src="http://chart.apis.google.com/chart? chs=400x300 &chd=t:0,50,30|20,10,30 &cht=lc &chm=s,ff0000,0,0,20|d,000000,0,1,15|o,0000ff,1,1,30 &chco=ff0000,00ff00,0000ff" >




I parametri richiesti relativi ad un range del grafico, sono invece: r o R (range orizzontale o verticale rispettivamente), colore, valore qualsiasi (sarà comunque ignorato), inizio e fine.

<img src="http://chart.apis.google.com/chart? chs=400x300 &chd=t:0,50,30|20,10,30 &cht=lc &chm=r,E5ECF9,0,0.75,0.25|r,000000,0,0.1,0.11 &chco=ff0000,00ff00,0000ff" />





<img src="http://chart.apis.google.com/chart? chs=400x300 &chd=t:0,50,30|20,10,30 &cht=lc &chm=R,ff0000,0,0.1,0.11|R,A0BAE9,0,0.75,0.25|r,E5ECF9,0,0.75,0.25|r,000000,0,0.1,0.11 &chco=ff0000,00ff00,0000ff" />




Come si può vedere dall’ultimo grafico, l’ordine di inserimento dei range ne determina anche la visibilità in caso di sovrapposizione.
L’ultimo caso che analizzerò dell’attributo chm è quello relativo al riempimento dell’area sottostante una linea; si ottiene attraverso l’uso di 5 parametri: b o B (il primo riempie lo spazio tra 2 linee, mentre il secondo riempie lo spazio sottostante la linea di riferimento), colore, inizio, fine ed un valore qualsiasi (anche in questo caso non verrà preso in considerazione).

<img src="http://chart.apis.google.com/chart? chs=400x300 &chd=t:20,10,30|25,50,40|30,60,70 &cht=lc &chm=b,ff0000,0,1,0|b,A0BAE9,1,2,0 &chco=ff0000,00ff00,0000ff" />





<img src="http://chart.apis.google.com/chart? chs=400x300 &chd=s:99,cefhjkqwrlgYcfgc,QSSVXXdkfZUMRTUQ,HJJMOOUbVPKDHKLH,AA &cht=lc &chm=b,76A4FB,0,1,0|b,224499,1,2,0|b,FF0000,2,3,0|b,80C65A,3,4,0 &chco=000000" />





<img src="http://chart.apis.google.com/chart? chs=400x300 &chd=s:cefhjkqwrlgYcfgc &cht=lc &chm=B,76A4FB,0,1,0 &chco=000000" />




Con questo è tutto! Alla prossima!
Mostra/Nascondi tastiera HotKeys