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

Inizia questa guida in 4 capitoli nella quale proverò a spiegare come utilizzare le API di Google Chart per creare dei grafici.

 

Innanzitutto per creare un grafico è sufficiente creare un’immagine con l’attributo src uguale a

http://chart.google.com/chart?
chs=larghezzaxaltezza&
chd=datidelgrafico&
cht=tipodigrafico

dove:

• chs = dimensioni dell’immagine in px (larghezza x altezza) es.: 500×300
• chd = dati per la creazione del grafico es.: 10,20,30
• cht = tipo di grafico es.: lc (lineare), p (a torta), v (diagramma di Venn), …

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

Siccome credo che possa diventare una grandissima comodità per chi sviluppa applicazioni web per le quali vengono richieste anche pagine di statistiche, credo che questo nuovo servizio di Google tornerà molto utile a molti!

Da qui l’idea di creare una guida a puntate nella quale illustrare le funzionalità di questo servizio.

Per cominciare, direi che un esempio sia la cosa migliore:

inserendo un URL simile a quello seguente dentro un tag img, sarà possibile ottenere un’immagine come questa:

URL:

http://chart.apis.google.com/chart?cht=p3&chd=t:70,20,10&chs=400x200&
chco=ff0000,00ff00,0000ff&chl=Paolo|Cantoni|.com

TAG:
<img src="http://chart.apis.google.com/chart?
cht=p3&
chd=t:70,20,10&
chs=400x200&
chco=ff0000,00ff00,0000ff&
chl=Paolo|Cantoni|.com" />

IMMAGINE:

Nella prossima puntata comincerò a spiegare i significati dei vari attributi dell’url dell’immagine; per chi fosse interessato a seguire l’argomento la guida di riferimento in inglese è disponibile qui.
Mostra/Nascondi tastiera HotKeys