<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d16734928\x26blogName\x3dSid05+weblog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dSILVER\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://sid05.blogspot.com/search\x26blogLocale\x3dit_IT\x26v\x3d2\x26homepageUrl\x3dhttp://sid05.blogspot.com/\x26vt\x3d2587781031737933902', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Google Chart API: un esempio pratico 12/12/07

Credo che il modo migliore per descrivere il funzionamento di Google Chart API sia attraverso un esempio pratico. Il servizio è realmente molto semplice da utilizzare e potrebbe risultare comodo in svariate occasioni.

In questo caso vediamo come inserire un grafico relativo ai browser utilizzati dai visitatori di questo blog...

» continua

Prima di iniziare con l' esempio vero e proprio è necessaria una breve "spolveratina" teorica, niente di complicato; anche in questo caso la cosa migliore è procedere con un esempio.

Di seguito trovate il codice che richiama l' immagine/grafico in alto (in pratica una URL parametrica, copiatelo ed incollatelo nella finestra del browser per avere un idea):

Ovviamente per inserire l' immagine la stringa andrà inserita nell' attributo src di un immagine, in questo modo <img src="inserire qui"/>, ma vediamo di cosa si tratta passo per passo:

  • http://chart.apis.google.com/chart?
    è l' indirizzo delle API
  • cht=p
    il tipo di grafico scelto - in questo caso la p sta per pie (torta) ; esistono svariati formati di grafici, a torta , a barre, cartesiani etc.
  • &chd=s:world5
    si tratta dei dati del nostro grafico - in questo caso il discorso è più complicato, al momento è utile sapere che ci sono tre tipi di dati utilizzabili, o meglio tre metodi per scrivere i dati dei nostri grafici.
    Il metodo dell' esempio è indicato dalla s (world5 sono i dati veri e propri) che sta per Simple encoding; in questo modo si utilizzano le lettere dalla A alla Z (dove A=0, B=1 e così via fino alla Z=25), dalla a alla z (a=26, b=27 e via discorrendo fino a z=51) ed infine i numeri da 0 a 9 (0=52, 1=53 fino al 9=61).
    Il secondo tipo di codifica è denominata Text encoding e rappresentata con una t; in questo caso si utilizzano i valori decimali da 0.0 a 100.0 (dove 0.0=0, 1.0=1, 2.0=2 e così via).
    Il terzo metodo è definito come Extended encoding indicato con una e; si tratta di una versione "ibrida" ed assai complessa (vi basti sapere che si va da AA=0 fino a ..=4095). In tutti e tre i casi si possono inserire più dati separandoli con una virgola)
  • &chs=200x125
    le dimensioni dell' immagine - il parametro è obbligatorio e l' unica cosa da ricordare è che abbiamo un limite espresso in pixel; si tratta dell' area complessiva dell' immagine che non può superare i 300.000 pixel (quindi 1000x300, 500x600 sono misure corrette, per dire)
  • chl=A|B|C|D|E|F
    le etichette assegnate ad ogni singolo valore

Bene, sperando di non aver aumentato la confusione vediamo come personalizzare il tutto e renderlo utilizzabile.

Nell' immagine sotto potete vedere le percentuali relative ai browser utilizzati dai visitatori di questo blog:

Browser utilizzati dai visitatori di questo blog

Questo è il codice dell' immagine sopra:

Vediamo anche qui di cosa si tratta passo per passo:

  • http://chart.apis.google.com/chart?
    l' indirizzo delle API, come sopra
  • cht=p
    il tipo di grafico dove p sta per pie (torta)
  • &chd=t:61.1,33.3,2.7,2.1,0.7
    i dati del grafico scritti utilizzando la Text encoding richiamata con la t
  • &chs=500x200
    le dimensioni del grafico
  • &chl=Firefox(61,1)|InternetExplorer(33,3)|Safari(2,7)|Opera(2,1)|Konqueror(0,7)
    le etichette, ognuna corrisponde ad un valore riportato in chd=t
  • &chco=ff9900,00ccff,ffcc00,99cc00,009900
    questo è un parametro opzionale relativo ai colori, ogni fetta della nostra torta avrà il suo colore rappresentato dal classico valore esadecimale

I parametri a disposizione sono molti di più (interessante ad esempio la possibilità di inserire una legenda) e quindi una visita alla pagina del progetto è d' obbligo. Spero che questo semplice esempio aiuti a capire meglio di cosa si tratta... nel caso di dubbi non abbiate timore ;)

Etichette: , ,

[Sid]
del.icio.us Digg technorati Design Float http://www.wikio.it oknotizie | Permalink | |

Ultimi commenti