Guida a Google Chart 3/4
Proseguiamo con la guida, aggiungendo nuove opzioni ai nostri grafici.
Come già accennato nel post precedente, l’attributo chco permette di modificare il colore del grafico; va espresso in valore esadecimale e permette anche la trasparenza aggiungendo 2 ulteriori caratteri (00= trasparente, ff = opaco):
es.: rosso = ff0000, rosso semitrasparente = ff000099
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20|30,40 &cht=bvs &chco=ff0000,00ff00" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20|30,40 &cht=bvs &chco=ff000033,00ff00cc" />
Nel caso in cui il numero di colori inseriti fosse minore del numero di linee/aree del grafico, i colori verranno utilizzati ciclicamente; relativamente ai grafici a torta, se l’attributo colore non è espresso, le aree verrebbero sfumate in automatico dall’arancio scuro al giallo pallido.
L’attributo chf permette di colorare l’area sullo sfondo del grafico; attraverso i parametri bg o c è possibile sciegliere se colorare l’intero sfondo dell’immagine o solamente quello relativo all’area del grafico, mentre con i parametri s, lg e ls è possibile selezionare un riempimento a tinta unita, con un gradiente, oppure a strisce. Nel caso di scelta tinta unita, è necessario fornire solamente il colore di riempimento, mentre per quella con gradiente si devono fornire l’angolo di sfumatura e diversi colori (fino a n) con il relativo punto di partenza; infine, nel caso di riempimento a strisce è necesssario fornire l’angolo ed i colori con la relativa larghezza della striscia.
Per comprendere meglio vediamo alcuni esempi:
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80,30,60,40 &cht=lc &chf=bg,s,eeeeee" />
Anche per questa volta è tutto, ci rivediamo con la prossima ed ultima puntata!
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80,30,60,40 &cht=lc &chf=bg,lg,45,ff0000,0,00ff00,0.5,0000ff,1" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80,30,60,40 &cht=lc &chf=bg,ls,0,ff0000,0.2,00ff00,0.2,0000ff,0.2" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80,30,60,40 &cht=lc &chf=c,ls,0,ff0000,0.2,00ff00,0.2,0000ff,0.2 &chxt=x,y &chxl=0:|0|1|2|3|4|5|6|1:|0|10|20|30" />
Come si può vedere dall’ultima immagine, è possibile inserire dei valori sugli assi, ma anche un titolo e delle etichette descrittive; per fare ciò, si devono utilizzare degli appositi attributi che elencherò qui di seguito:
chttimposta il titolo del grafico (eventuali spazi nel titolo vanno indicati con il segno +)(es.:chtt=grafico+by+paolo+cantoni)chtsimposta il colore e la grandezzza del titolo (es.:chts=0000ff,20)chdlimposta la descrizione delle etichette (es.:chdl=Giugno|Luglio|Agosto)chlimposta la descrizione delle etichette per i grafici a torta; (es.:chl=Giugno|Luglio|Agosto)nel caso in cui questo parametro fosse specificato, le dimensioni della larghezza devono essere di almeno 2 volte l’altezza per il gradico a torta 2D e di 2,5 volte per quello 3D, altrimenti le etichette potrebbero essere tagliatechxtspecifica quali assi devono essere visualizzati (es.:chxt=x,y(valori possibili: x, y, t=top,r=right))chxlimposta i valori degli assi indicati dachxt(es.:chxt=x,y&chxl=0:|Giugno|Luglio|Agosto|1:|2007|2008|)chxpcomechxl, ma permette, tramite un parametro distanza, di specificare esattamente il punto in cui inserire l’etichetta (es.:chxt=x,y&chxl=1:|min|media|max&chxp=1,10,35,80)chxrspecifica dei range di valori da assegnare agli assi (es.:chxt=x,y&chxr=0,0,200|1,100,1000)chxsspecifica colore, dimensione ed allineamento (-1 = a sinistra, 0 = al centro, 1 = al centro) del font del relativo asse (es.:chxt=x,y&chxs=0,ff0000,11,-1|1,00ff00,14,0)
Come al solito alcuni esempi:
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80,30,60,40 &cht=lc &chtt=grafico+by+paolo+cantoni" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80,30,60,40 &cht=lc &chtt=grafico+by+paolo+cantoni &chts=0000ff,16" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80|30,60,40 &cht=lc &chco=ff0000,0000ff &chdl=Giugno|Luglio" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80|30,60,40 &cht=p &chco=ff0000,0000ff &chl=Giugno|Luglio" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80,30,60,40 &cht=lc &chxt=x,y,r" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80,30,60,40 &cht=lc &chxt=x,y &chxl=0:|giu|lug|ago|set|ott|nov|1:|0|10|20|30" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,20,80,30,60 &cht=lc &chxt=x,y,x &chxl=0:|gen|lug|gen|lug|gen|1:|0|10|20|30|2:|2006|2007|2008" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,10,90,20,45&cht=lc&chxt=x,y,y &chxl=1:|0|20|40|60|80|100|2:|min|media|max &chxp=2,10,43,90" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,10,90,20,45&cht=lc &chxt=x,y,r &chxr=0,0,20|1,1000,500|2,3,8" />
<img src="http://chart.apis.google.com/chart? chs=300x150 &chd=t:50,10,90,20,45&cht=lc&chxt=x &chxl=0:|Gen|Feb|Mar &chxs=0,ff0000,16" />
