Disegnare grafici con Google charts

Disegnare grafici con Google charts , tutorial links  ,
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"  />

Disegnare grafici con Google charts , tutorial links  , 77982080ab0

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, come disegnare un grafico a torta a mano.

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

L'indirizzo email non verrà pubblicato.

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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

You can add images to your comment by clicking here.