Google Chart Api te permite crear una gran variedad de gráficas de datos de manera dinámica. Esta api nos devuelve una imagen en formato .png , cuya URL puedes incrustar directamente en las etiquetas <img>.

La URL de la imagen debe de tener el siguiente formato:

http://chart.apis.google.com/chart? parametro_1 &  parametro_2 &  parametro_n

Así con todos los parámetros que necesites, siempre separados por &. Recuerda que al poner la URL en la etiqueta <img> de tu HTML debes cambiar el & por &

Los parámetros obligatorios son: el tamaño de la gráfica (chs), el tipo de gráfica (cht), y los datos (chd). El resto de los parámetros son opcionales, puedes verlos todos en la Developer’s Guide.

¿Como especificamos cada parámetro?

El tamaño de la gráfica (chs) : chs=(ancho)x(alto) donde chs indica el tipo de información que mandamos en este caso tamaño (chart size) y las unidades en pixeles. Ejemplo: chs=300×200.

El área de la imagen debe ser menor a 300,000 pixeles. Esto es, la multiplicación del ancho por el alto no debe superar esta cifra. Las gráficas circulares son recortadas si son muy pequeñas, para solucionarlo debes de poner una anchura equivalente a dos veces su altura para las gráficas en 2D, y 2 veces y medio para las de 3D.

Para los mapas el tamaño máximo 440px de ancho y 220px de alto.

El tipo de gráfica(chd): cada estilo de gráfica tiene un parámetro para referirse a ella, la gráfica de arriba es la p3 y las de abajo la bhs y lxy respectivamente. Puedes ver todos los tipos aquí.

Los datos de la gráfica(chd): deben de ser codificados de tal forma que la API de Google los entienda. Se puede hacer de varias maneras pero me voy a centrar en la mas sencilla, codificación de texto:

Solo nos permite utilizar números positivos de punto flotante de cero a cien. Dependiendo del tipo de gráfico que elijas debes pasarle los datos de una manera o de otra pero la estructura general es algo así: chd=t: 10.0,58.0,95.0 | 30.0,8.0,63.0 | ... |... donde:

chd = indica el tipo de información que mandamos, en este caso mandamos los datos para la representación de la gráfica por tanto es chd (chart data).

t = indica el tipo de codificación, en este caso codificación de texto.

10.0,58.0,95.0 = los datos de la gráfica separados por comas.

|= para separar conjuntos de datos. Si solo tienes que utilizar un conjunto de datos no lo tienes que utilizar.

Unos ejemplos para que te queda claro serían:

Para las gráficas donde debes especificar la coordenada en un ÚNICO eje, tanto X como Y, sería asi:

chd=t: x1,x2,x3,x4

http://chart.apis.google.com/chart?chs=200×100&cht=bhs&chd=t:20,25,40,60

En este caso le decimos que el tamaño sea de 200×100 pixeles, el tipo de gráfica bhs, y los datos de la gráfica para el eje X.

Para las gráficas donde debes especificar la posición en ambas coordenadas, sería así:

chd=t: x1,x2,x3,x4 | y1,y2,y3,y4

Si quisieramos especificar mas de un conjunto de datos sería chd=t: x1,x2,x3,x4 | y1,y2,y3,y4 | xa1, xa2, xa3, xa4 |ya1, ya2, ya3, ya4 y así sucesivamente si necesitásemos mas.

http://chart.apis.google.com/chart?&chs=200×100&cht=lxy&chd=t:0,30,60,100|60,20,40,30|10,60,100|30,60,10|13,23,45,100|90,66,22,45

En este caso le decimos que el tamaño sea de 200×100 pixeles otra vez, el tipo de gráfica lxy, y los 3 conjuntos de datos para los ejes X e Y.

Para opciones y personalización mas avanzadas; colores, rangos, etiquetas de texto, degradados, leyenda, cuadriculas, etc. tienes toda la información en la Developer’s Guide.

Espero que haya servido de algo.

Esta entrada fue publicada el Miércoles, 2 de Abril de 2008 a las 2:17 y está clasificada bajo: API's, CSS, web2.0, webapps, webdev. Puede hacer un seguimiento de los comentarios de esta entrada gracias al feed RSS 2.0. Puede dejar un comentario, o enviar un trackback desde su sitio.