Gráficos a la carta: Google Chart API

Estos tipos de Google, siempre tiene algo! y siempre es bueno darle una mirada. Estaba mirando Google Chart API, una forma sencilla de poder tener gráficos en nuestras web (o por ejemplo en nuestros blogs) sin estar utilizando nada mas que una URL, … mediante un querystring enviamos los datos y tenemos nuestro gráfico directamente desde Google, "gráficos a la carta"
La idea de este servicio es brindar a los desarrolladores lo que antes era solamente para uso interno (ej: Google Finance) ahora lo publicaron para utilizarlo por el resto de los mortales
Con una seria de parámetros en la URL de la API en una tag IMG, y nos devuelve un PNG.

<a src="http://chart.apis.google.com/chart?param1=valor&param2=valor2&paramN=valorN" alt="Grafico en Geeks.ms" />

Hay que dominar estos "parámetros" (o encapsularlo en un webcontrol que es mi idea en estos días…para practicar), pero para eso tenemos la ayuda en esta página donde nos brinda el dialecto para hablar con la API

Encontré unos controles, por el que necesita probarlo en sus proyectos sin estudiar el idioma:

   

Política de Uso: solamente 50000 peticiones por usuario por día.

Por ejemplo:

Ejemplo 1

Grafico en Geeks.ms

<img src="http://chart.apis.google.com/chart?
cht=p3
&amp;chd=s:hW 
&amp;chs=450x150
&amp;chl=Geeks.ms|World"
alt="Grafico en Geeks.ms" />

Ejemplo 2

Grafico en Geeks.ms

<img src="http://chart.apis.google.com/chart?
chs=450x200
&amp;chd=s:AWcaZPaWXX
&amp;cht=lc
&amp;chxt=x,y
&amp;chxl=0:|Enero|Febrero|Marzo|Abril|Mayo|1:||usuarios" 
alt="Grafico en Geeks.ms" />

 

Ejemplo 3

Grafico en Geeks.ms

<img src="http://chart.apis.google.com/chart?
cht=lxy
&amp;chs=450x200
&amp;chd=t:0,30,60,70,90,95,100|20,30,40,50,60,70,80|10,30,40,45,52|100,90,40,20,10|-1|5,33,50,55,7
&amp;chco=3072F3,ff0000,00aaaa
&amp;chls=2,4,1
&amp;chm=s,FF0000,0,-1,5|s,0000ff,1,-1,5|s,00aa00,2,-1,5" alt="Grafico en Geeks.ms" />

 

 

 

Tipos de Gráficos

Lineas

image image image image image

image image image image image

image

Barras

image image image image

Torta

image image

Diagramas de Venn

image

Gráficos de burbujas

image

Varios

image image image

 

 

 

Enlaces

5 comentarios sobre “Gráficos a la carta: Google Chart API”

  1. Hola me gustaria sabes como se puede colocar en label vertical en el eje de las X, estoy generando graficas de barras pero las label q llevan abajo no caben por lo cual me gustaria q alguien q sepa me pudiera ayudar.

  2. Estamos desarrollando una página financiera y me gustaría utilizar el gráfico que utiliza google finance que representa volumen y una función lineal en el mismo gráfico.Sabes donde podemos ubicar este tipo de gráfico.
    Saludos.

  3. Hola @Anibal
    Estaba mirando GoogleFinance en indice de Down Jones.. que creo que es este:
    http://finance.google.com/finance?q=INDEXDJX:.DJI

    Alli el que esta utilizando es este
    http://code.google.com/intl/es-AR/apis/visualization/documentation/gallery/annotatedtimeline.html

    PEro Google te brinda todo un framework para graficos
    – Google Visualization API
    http://code.google.com/apis/visualization/documentation/gallery.html

    Tienes varios graficos aqui en un post anterior bajo el tag «Graficos» alli tambien tienes varios que te pueden ayudar en tu proyecto… dales una mirada

    – Gráficos en ASP.NET: Línea/Torta/Radial/otros (free y comerciales) … en HTML/CSS, Imágenes, Javascript, Flash y Silverlight
    http://geeks.ms/blogs/fernandezja/archive/2008/11/03/gr-225-ficos-en-asp-net-l-237-nea-torta-radial-otros-free-y-comerciales-en-html-css-im-225-genes-javascript-flash-y-silverlight.aspx

    PD: Luego avisame por aqui cual utilizaste y cual no te gusto para nada entonces entre todos colaboramos.

Deja un comentario

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