Quienes desarrollamos aplicaciones web,  debemos haber tenido la necesidad en algún momento de mostrar resultados en forma de gráficos, para ello, quizá hemos tenido que recurrir a una gran cantidad de estrategias para conseguirlas, sin embargo, hay formas más simples de conseguirlas.

Imágenes con el Google Chart API

Afortunadamente, Google ofrece una API (Interfaz de Programación de Aplicaciones) que permite de forma simple y rápida generar gráficos para para la web.

En el caso específico del control Image de ASP .Net solo se requiere colocar en la propiedad ImageUrl la ruta de la imágen que se desea mostrar, pero… a la imágen hay que pasarle algunos parámetros.

Un ejemplo sencillo de la url que deberíamos utilizar y tomando como referencia la imágen superior sería:

http://chart.apis.google.com/chart?cht=p3&chs=250×100&chd=t:20,35,30,15&chl=Norte|Sur|Este|Oeste

Para aclarar un poco:

  • http://chart.apis.google.com/chart?  representa la ubicación del API de Chart.
  • cht=p3 es el tipo de gráfico (Un “Pie” en este caso).
  • chs=250×100 es el tamaño del gráfico en píxeles (Ancho por Alto en pixeles).
  • chd=t:20,35,30,15 son los datos del gráfico (Con los que formará la imágen).
  • chl=Norte|Sur|Este|Oeste es la etiqueta del gráfico (Según el orden de los datos enviados).

Aunque ciertamente no es muy seguro utilizar este sistema para genera gráficos (los datos se envían sin cifrar a través de la web) y de paso los gráficos no son los mejores que pueden haber, también es cierto que pueden ser utilizados en algunas ocasiones como una genial alternativa y de paso, algún adicto a Google le puede parecer interesante. Lo bueno es que no necesariamente debe usarse ASP .Net, se puede aplicar en cualquier elemento de imágen para la web y basta con utilizar la referencia que el propio equipo de Google pone a nuestra disposición en la web: http://code.google.com/intl/es/apis/chart/

Existe una gran variedad de gráficos que podemos utilizar, y por consiguiente una gran variedad de parámetros a enviar, pero al final obtendremos el gráfico deseado.

Espero que les sea de utilidad.

Descargar Ejemplo Google Chart API

Saludos.