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

Read the rest of this entry »
Mostra/Nascondi tastiera HotKeys

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. Read the rest of this entry »
Mostra/Nascondi tastiera HotKeys

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



Read the rest of this entry »
Mostra/Nascondi tastiera HotKeys