Disegnare grafici con Google charts

un grafico a torta tridimensionale
Dopo aver appena 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="http://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:
disegna grafici, grafici con google, disegna grafico, disegnare un grafico, come disegnare un grafico, come disegnare grafici.

Un pensiero su “Disegnare grafici con Google charts”

  1. 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/

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.