Google Chart API: un esempio pratico
Credo che il modo migliore per descrivere il funzionamento di Google Chart API sia attraverso un esempio pratico. Il servizio è realmente molto semplice da utilizzare e potrebbe risultare comodo in svariate occasioni.
In questo caso vediamo come inserire un grafico relativo ai browser utilizzati dai visitatori di questo blog...
Prima di iniziare con l' esempio vero e proprio è necessaria una breve "spolveratina" teorica, niente di complicato; anche in questo caso la cosa migliore è procedere con un esempio.
Di seguito trovate il codice che richiama l' immagine/grafico in alto (in pratica una URL parametrica, copiatelo ed incollatelo nella finestra del browser per avere un idea):
Ovviamente per inserire l' immagine la stringa andrà inserita nell' attributo src di un immagine, in questo modo <img src="inserire qui"/>, ma vediamo di cosa si tratta passo per passo:
- http://chart.apis.google.com/chart?
è l' indirizzo delle API - cht=p
il tipo di grafico scelto - in questo caso la p sta per pie (torta) ; esistono svariati formati di grafici, a torta , a barre, cartesiani etc. - &chd=s:world5
si tratta dei dati del nostro grafico - in questo caso il discorso è più complicato, al momento è utile sapere che ci sono tre tipi di dati utilizzabili, o meglio tre metodi per scrivere i dati dei nostri grafici.
Il metodo dell' esempio è indicato dalla s (world5 sono i dati veri e propri) che sta per Simple encoding; in questo modo si utilizzano le lettere dalla A alla Z (dove A=0, B=1 e così via fino alla Z=25), dalla a alla z (a=26, b=27 e via discorrendo fino a z=51) ed infine i numeri da 0 a 9 (0=52, 1=53 fino al 9=61).
Il secondo tipo di codifica è denominata Text encoding e rappresentata con una t; in questo caso si utilizzano i valori decimali da 0.0 a 100.0 (dove 0.0=0, 1.0=1, 2.0=2 e così via).
Il terzo metodo è definito come Extended encoding indicato con una e; si tratta di una versione "ibrida" ed assai complessa (vi basti sapere che si va da AA=0 fino a ..=4095). In tutti e tre i casi si possono inserire più dati separandoli con una virgola) - &chs=200x125
le dimensioni dell' immagine - il parametro è obbligatorio e l' unica cosa da ricordare è che abbiamo un limite espresso in pixel; si tratta dell' area complessiva dell' immagine che non può superare i 300.000 pixel (quindi 1000x300, 500x600 sono misure corrette, per dire) - chl=A|B|C|D|E|F
le etichette assegnate ad ogni singolo valore
Bene, sperando di non aver aumentato la confusione vediamo come personalizzare il tutto e renderlo utilizzabile.
Nell' immagine sotto potete vedere le percentuali relative ai browser utilizzati dai visitatori di questo blog:
Questo è il codice dell' immagine sopra:
Vediamo anche qui di cosa si tratta passo per passo:
- http://chart.apis.google.com/chart?
l' indirizzo delle API, come sopra - cht=p
il tipo di grafico dove p sta per pie (torta) - &chd=t:61.1,33.3,2.7,2.1,0.7
i dati del grafico scritti utilizzando la Text encoding richiamata con la t - &chs=500x200
le dimensioni del grafico - &chl=Firefox(61,1)|InternetExplorer(33,3)|Safari(2,7)|Opera(2,1)|Konqueror(0,7)
le etichette, ognuna corrisponde ad un valore riportato in chd=t - &chco=ff9900,00ccff,ffcc00,99cc00,009900
questo è un parametro opzionale relativo ai colori, ogni fetta della nostra torta avrà il suo colore rappresentato dal classico valore esadecimale
I parametri a disposizione sono molti di più (interessante ad esempio la possibilità di inserire una legenda) e quindi una visita alla pagina del progetto è d' obbligo. Spero che questo semplice esempio aiuti a capire meglio di cosa si tratta... nel caso di dubbi non abbiate timore ;)
|
Permalink |
|
