www.DoZarte.com


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


Quelli a cui è piaciuto hanno letto anche:

Disegnare grafici dinamici tramite javascript /2
Dopo aver visto come disegnare grafici usando la struttura offerta da Google Charts oppure usando librerie in javascript da implementare nelle nostre pagine web, facciamo (...)

Creare grafici e diagrammi in Flash
Open Flash Chart è un componente per Flash 8+ gratuito e open source, rilasciato su licenza GPL, assieme al suo codice sorgente. Questo componente permette la (...)

Grafici tridimensionali accattivanti e gratuiti
PHP/SWF Charts è un semplice, gratuito e potente sistema per creare dei grafici molto attraenti in pagine web, in maniera dinamica. Il sistema prevede l’uso di (...)

Disegnare grafici dinamici tramite javascript
FLOT è una libreria javascript per Jquery che permette di disegnare grafici e diagrammi “al volo” in una pagina web. L’attenzione su questa libreria è stata (...)

Costruire un grafico a torta con Flash 5
Questa volta proverò a spiegarvi come ho cercato di risolvere la creazione di un grafico a torta facilmente personalizzabile. La questione era: dati un numero x (...)

Altri visitatori sono arrivati qui cercando:
disegna grafici, grafici con google, disegna grafico, disegnare un grafico, come disegnare un grafico, come disegnare grafici, disegnare grafici google, come disegnare grafici macroeconomia, dopo aver effettuato i calcoli disegnare su un grafico opportuno le seguenti funzioni.

Un commento a “Disegnare grafici con Google charts”

  1. DoZ scrive:

    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/

Di la tua opinione e scrivi qualcosa!

XHTML: Tags concessi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> Attenzione: Per inserire codice html/php o caratteri speciali utilizza Postable oppure HTML Encoder per convertire i caratteri speciali del tuo commento.

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

You can add images to your comment by clicking here.