Dopo aver visto come creare grafici con Flash e diagrammi con Javascript, eccomi qui a ricordarmi di non aver mai parlato dell’ottimo – anche se forse un po’ più astruso – Google charts (charts=grafici).
Se avete la necessità di inserire un semplice grafico nella vostra pagina internet, ma anche se volete creare dei grafici di gran impatto visivo, magari anche collegati a database dinamici, Google charts può sicuramente esservi utile.
Il grafico a torta tridimensionale che vedete in apertura è creato con una semplicissima riga di codice HTML:
http://chart.apis.google.com/chart?cht=p3&chd=s:Z923&chs=400x180& chl=Google|Charts|Disegna|Grafici& chco=1B75DF,ff0000
…che per comodità di lettura ho mandato a capo ad ogni variabile inserita.
Come si usa?
I tipi di grafici che si possono creare sono i seguenti:
- grafici lineari (a linee spezzate)
- grafici a barre
- grafici a torta
- diagrammi di Eulero-Venn (insiemi)
- diagrammi a dispersione (scatterplot)
Per disegnare il grafico a torta che illustra questo post, bisogna inviare una richiesta all’indirizzo http://chart.apis.google.com/chart, passando di seguito i parametri che ci serviranno:
http://chart.apis.google.com/chart?<1>&<2>&<N>
Aiutandoci con le istruzioni nella pagina del progetto, vediamo che per disegnare un grafico a torta tridimensionale dobbiamo usare la variabile cht:
cht=p3
Per passare i nome (descrizioni) delle variabili che il nostro diagramma andrà ad illustrare utilizzeremo la variabile chl, separando i valori con una linea verticale (|), un in questo modo:
chl=Google|Charts|Disegna|Grafici
I valori delle variabili che compongono il grafico vengono passati tramite la variabile chd:
chd=s:Z923
…dove ‘s’ indica ‘simple encoding’; per il resto rimando al sito di Google.
Per colorare i campi della nostra torta useremo la variabile chco.
Qui indichiamo il primo è l’ultimo colore, in formato esadecimale:
chco=1B75DF,ff0000
Infine la dimensione dell’immagine che verrà creata viene definita tramite la variabile chs:
chs=400x180
Per pubblicare il nostro grafico non dobbiamo infine che far altro che richiamare l’indirizzo come fosse un’immagine vara e propria, cioè usando il tag IMG:
<img src="https://chart.apis.google.com/chart?cht=p3&chd=s:Z923&chs=400x180&chl=Google|Charts|Disegna|Grafici&chco=1B75DF,ff0000" />
Comunque, per chi non è molto pratico all’uso di questo tipo di codice, esiste Hohli, è un servizio che ci guida nella creazione di grafici basati sulle API di Google.
Basta scegliere fra le varie opzioni (tipo di grafico, dimensioni, orientamento, colori) si inseriscono i dati e, dopo un preview, possiamo usare il grafico come immagine oppure recuperarne il codice per inserirlo in una pagina html.
link: Hohli
Altri sono arrivati qui cercando:
Chartle è uno strumento completo per creare grafici interattivi online sviluppato in Java.
Il servizio fornisce una gran varietà di mappe e diagrammi, classici oppure del tutto inusuali. Si possono aggiungere dati con estrema semplicità, stabilire un titolo e salvare.
Il grafico generato in modo molto semplice ed intuitivo può essere condiviso ed inserito in una pagina web tramite codice.
Chartle è uno strumento gratuito che non richiede registrazione.
http://www.chartle.net/
fonte: http://www.maestroalberto.it/2009/05/04/chartle-completo-strumento-per-creare-grafici-interattivi-online/