[Manual] Creando graficas con Google chart

Ultimamente eh estado algo ocupado, mas bien bastante ocupado, y pues tambine no he escrito cosas muy importantes, sin embargo, trato de poner cosas que interesen a las personas, no cosas que se repiten en todos los blogs.

Pero sin duda este tema me intereso bastante, si bien no me gusta depender tanto de google, creo que debemos de dar un vistazo algo mas profundo en este caso a los graficos via google (suena chistoso).

¿Google chart que es?

Google Chart es una herramienta que permite generar gráficos y diagramas de una forma extremadamente sencilla, para poder utilizarlos en proyectos web.

Bien ya sabemos que es pero

¿como se usa?

El uso es extremadamente sencillo solo insertamos una imagen a la cual le modificaremos el atributo src, quedando de la siguiente forma.

<img src=”/web/20071214044709im_/http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250×100&chl=Hola|Mundo” />

Lo cual nos da el siguiente resultado

chart

Bien ya esta tenemos nuestra grafica lista, sin embargo,surge la duda ¿que mas podemos hacer, con todo esto, hasta donde es posible usar y personalizar esta herramienta?.

A continuacion trataremos de explotar todas sus posibilidades.

Antes de empezar debemos de checar algo importante dentro de las politicas de Google, la cual nos dice:
Política de utilización

El uso de la API de Google Chart está sujeta a una pregunta límite de 50000 consultas por usuario por día. Si excede este 24 horas del límite, la API podría dejar de funcionar temporalmente para usted. Si sigue excediendo este límite, su acceso a la API puede ser bloqueado.

Ojo con la anterior, por que significa que en un dia no podre tener mas de 50 000 visitas(jaja), ya que me podrian desactivar temporalmente.

Una vez realizada la advertencia anterior vamos a aprender.

Formato de peticion a la API de Google chart

La url para hacer una peticion a la API de Google debera ser de la siguiente forma

Http://chart.apis.google.com/chart?parámetro1&parámetro2&parámetron

Nota: todo debera de ser en una sola linea por URL

Bien ahora veremos otro ejemplo simple, recordemos que basta con que los parametros esten separados por un ampersand y lsito con eso podemos hacer cosas como esta

chart (1)

<img src=”/web/20071214044709im_/http://chart.apis.google.com/chart?chs=200×125&chd=s:holamundo&cht=lc&chxt=x,y&chxl=0:|Mar|Abr|May|Jun|Jul|1:||50+Kb” />

Nota: el codigo anterior fue separado para una mayor comprension

Ahorta vamos parte por parte, que significa ¿todo esto?

Empecemos a desmembrarlo jajaja

http://chart.apis.google.com/chart?, Es el donde esta ubica la API de Google para graficos.
&, Es el separador de parametros
chs=200×125, este es el tamaño de la grafica en pixeles, en este caso, es de 200*125
chd=s:helloWorld, es el nombre de la tabla de datos.
cht=lc, este es el tipo de grafico que se usara en este caso, lc
chxt=x,y, con esto indicamos es necesario el eje de las X y el eje de las Y
&chxl=0:|Mar|Abr|May|Jun|Jul|1:||50+Kb, Esto indica el eje de las x y las etiquetas que se usaran.

Como no deseo aburrirlos nso quedamos hasta este punto, ademas tengo varias cosas por hacer, esperen la segunda parte, que esto se pondra bueno.

via | Programando con Google

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *