In questo CODE-IT scoprireremo le API di Google Chart con cui e' possibile inserire grafici simili a quelli di Excell nelle nostre pagine web. Vedremo che basta interagire sull'attributo src di una immagine per poter trasformare i colori, le dimensioni, il tipo di grafico e molto altro ancora.

Andiamo a costruire un layout semplice per la nostra pagina in cui inseriremo dei dati che ci interessa mostrare in un grafico. Abbiamo scelto di prendere come esempio alcune statistiche riguardanti la diffusione dei vari browser. Una volta inserita una tabella con i dati abbiamo la necessita di inserire un grafico che aiuti a fornire una visualizzazione più di impatto per i nostri utenti.

<img src="http://chart.apis.google.com/chart?chf=bg,s,abbcdb&cht=p3&chs=620x300&chd=t:26.3,22.3,3.1,42.6,0.5,2.7,2.0&chl=Exporer 7|Exporer 6|Chrome|Firefox|Mozilla|Safari|Opera"  border="0">

Inseriamo un tag img con un attributo src. Nell'attributo src andiamo a mettere l'indirizzo che Google Chart mette a disposizione per creare grafici. A questo indirizzo faremo seguire un punto di domanda e poi una serie di parametri con cui personalizzeremo il nostro grafico in ogni dettaglio.

http://chart.apis.google.com/chart?chf=bg,s,abbcdb&cht=p3&chs=620x300&chd=t:26.3,22.3,3.1,42.6,0.5,2.7,2.0&chl=Exporer 7|Exporer 6|Chrome|Firefox|Mozilla|Safari|Opera 

Se copiamo e incolliamo l'url che abbiamo scritto in src su un browser, vedremo che questo ci risponde con l'immagine del grafico che stiamo richiedendo. Le proprieta' con cui possiamo personalizzare il grafico sono molte e le troviamo tutte elencate nel sito di Google Chart. Ad esempio cht sta per chart type ed indica il tipo di grafico da mostrare.

Possiamo vedere nel dettaglio ogni parametro: Chd, sta per chart data, e contiene i dati del diagramma; Chs, sta per chart size, e indica le dimensioni; mentre chl, sta per chart label, e descrive le etichette da utilizzare per i dati. E' importante ricordare che l'ordine delle etichette e' identico a quello dei dati. Con chf siamo andati a interagire con lo sfondo del grafico, e abbiamo impostato una tonalità di blu utilizzando la notazione RGB che usiamo anche nei file css. RGB sta per Red Green Blue, ovvero Rosso Verde Blu, e' un cosiddetto modello additivo dove le luci dei colori primari sono aggiunte tra loro per formare una vsta gamma di colori. Ogni coppia va da 00 a FF (che in numeri esadecimali equivale a 255), pertanto possiamo esprimere piu' di sedici milioni di colori grazie a questa codifica.

Sfruttando quanto abbiamo appena detto riusciamo a definire un colore per ognuno dei dati che abbiamo scelto di rappresentare nel nostro grafico. Useremo la proprietà chco. Se associamo un solo colore a chco, allora il grafico parte dal colore che abbiamo scelto fino a sfumare nelle varianti di quest'ultimo. Se invece vogliamo ottenere un colore per ogni spicchio della torta, dovremo associare a chco tanti colori quanti sono i dati.

chco=ff0000,00ff00,fcef2e,202ae0,00fed0,00afa0,aaff20chf=bg,s,abbcdb 

Possiamo esporre gli stessi dati, con gli stessi colori e cambiare semplicemente di tipologia di grafico, modificando solo una proprietà nell'attributo src della nostra immagine. Ad esempio se cambiamo la proprietà' cht da p3 a p, otterremo una torta bidimensionale rispetto alla tridimensionale che abbiamo visto fino ad ora.

Possiamo addirittura far diventare il nostro grafico un chart a barre cambiando la proprieta' cht in bvs, ovvero un diagramma a barre verticali. Si noti che eventuali gruppi di dati vengono sovrapposti e differenziati per mezzo di colori differenti. Per allargare la dimensione e ottenere una buona leggibilità del nostro grafico abbiamo inserito nell'url la proprietà chbh e l'abbiamo posta uguale a 70.

E' semplice immaginare grafici dinamici che si aggiornano utilizzando i dati inseriti da un utente. Per fare ciò basterebbe aggiornare, tramite javascript, l'attributo src della nostra immagine. I risultati dei cambiamenti al nostro grafico sono apprezzabili anche su un browser. A fronte di ogni variazione degli attributi nell'indirizzo che punta a Google Chart, infatti, vediamo il grafico mutare e sfruttare gli stessi dati o gli stessi colori per tutte le tipologie di chart.