Google API Chart es un servicio de Google para la creación de todo tipo de gráficas de una manera rápida y sencilla, que no requiere instalación ninguna.
Vamos a mostrar otro de los API de Google, puestos a disposición de los desarrolladores de páginas web. Este API que nos ocupa sirve para hacer gráficos para la representación de datos, es decir, las típicas gráficas de barras, lineas, etc. que sirven para presentar datos estadísticos. Lo interesante de este sistema es que permite la creación de las gráficas de una manera muy sencilla y sin la instalación de ningún componente adicional en el servidor web.
En este artículo de DesarrolloWeb.com vamos a presentar algunos ejemplos de gráficas y expresar algunas de las generalidades y características de este API para crear gráficos.
API Chart permite la creación de gráficas a partir de imágenes, con lo que, para mostrar en la página una gráfica, lo único que tenemos que hacer es utilizar la etiqueta IMG de HTML. Para configurar la forma y datos del gráfico se debe definir simplemente la URL de la imagen en el atributo SRC de la etiqueta IMG.
Así pues, para crear una gráfica en una página web, no hay que instalar ningún componente en el servidor, simplemente colocar una imagen en la página, con un código como este:
<img src="http://chart.apis.google.com/chart?chs=400x100&cht=p&chd=t:45,25,10,20&chl=Valencia|Madrid|Barcelona|Lugo" width="400" height="100">
Con lo que aparecerá una gráfica como la siguiente:
Como se puede ver, para configurar la gráfica, lo único que tenemos que definir es el atributo SRC, que debería tener un formato como el siguiente (vamos a separar por partes la URL para generar la imagen, de modo que se puedan ver cada uno de los componentes):
La URL del servicio de Google para el API de gráficas:
http://code.google.com/intl/es/apis/chart/
Luego, una serie de parámetros en la URL de acceso al API, para indicar los datos de la gráficas, estilos, leyendas y esas cosas:
Tamaño de la imagen:
chs=400x100
Tipo de gráfico (en este caso de tarta o circular):
cht=p
Datos del gráfico:
chd=t:45,25,10,20
Los nombres de los campos que acompañan al gráfico:
chl=Valencia|Madrid|Barcelona|Lugo
Por poner otro ejemplo de gráfico generado con el API de Google Chart, vamos a ver cómo se crearía una gráfica de barras.
<img src="http://chart.apis.google.com/chart?chs=400x100&cht=bhg&chco=e5f867|aaaaaa|596605&chd=t:60,10,30&chdl=Me+gusta+%286+votos%29|no+me+gusta+%281+voto%29|nsnc+%283+votos%29" width="400" height="100">
Este código mostraría una gráfica como esta:
Posibilidades de las gráficas de Google API Chart
Veamos ahora un resumen de las características y posibilidades de esta API para la creación de gráficas.
Tipos de Gráficas:
API Chart soporta una cantidad grande de tipos de gráficos distintos, como gráficas de barras, de tarta, (2D y 3D), de líneas, puntos, etc. tiene además algunos tipos de gráficos bastante originales, como el Google O-Meter, que tiene una forma similar a un velocímetro, con un abanico de posibilidades y una flecha que apunta al lugar de la estadística.
Personalización de las gráficas:
Existen varios elementos con los que se pueden personalizar las gráficas, como tamaño de la imagen, colores, tamaño de los elementos, como las barras en las gráficas de barras, espaciado, títulos del gráfico, etc.
Etiquetas y leyendas:
Dispone de varias maneras para asignar textos a los valores de las gráficas, que además dependen del tipo de gráfica, pudiendo crear etiquetas y leyendas para identificar los elementos que se contabilizan en el gráfico.
Datos contabilizados:
Existe la posibilidad de configurar varios juegos de datos en la misma gráfica (en las gráficas que lo permiten) y la carga de datos se puede realizar de varias maneras.
Documentación de Google API Chart
Este servicio de gráficas ofrecido por Google tiene una completa documentación, que también se encuentra disponible en Español. Por ello, os dejamos un enlace a la página de documentación dentro de Google Code, donde podréis aprender a generar todo tipo de gráficas.
https://developers.google.com/chart/
Algunas pruebas de uso de API Chart
En el siguiente artículo de desarrollo web .com veremos unos códigos para la creación de un gráfico con datos que nos llegan de una tabla MySQL.
Ver el artículo pruebas de uso de Google API Chart.
En este artículo de DesarrolloWeb.com vamos a presentar algunos ejemplos de gráficas y expresar algunas de las generalidades y características de este API para crear gráficos.
API Chart permite la creación de gráficas a partir de imágenes, con lo que, para mostrar en la página una gráfica, lo único que tenemos que hacer es utilizar la etiqueta IMG de HTML. Para configurar la forma y datos del gráfico se debe definir simplemente la URL de la imagen en el atributo SRC de la etiqueta IMG.
Así pues, para crear una gráfica en una página web, no hay que instalar ningún componente en el servidor, simplemente colocar una imagen en la página, con un código como este:
<img src="http://chart.apis.google.com/chart?chs=400x100&cht=p&chd=t:45,25,10,20&chl=Valencia|Madrid|Barcelona|Lugo" width="400" height="100">
Con lo que aparecerá una gráfica como la siguiente:
Como se puede ver, para configurar la gráfica, lo único que tenemos que definir es el atributo SRC, que debería tener un formato como el siguiente (vamos a separar por partes la URL para generar la imagen, de modo que se puedan ver cada uno de los componentes):
La URL del servicio de Google para el API de gráficas:
http://code.google.com/intl/es/apis/chart/
Luego, una serie de parámetros en la URL de acceso al API, para indicar los datos de la gráficas, estilos, leyendas y esas cosas:
Tamaño de la imagen:
chs=400x100
Tipo de gráfico (en este caso de tarta o circular):
cht=p
Datos del gráfico:
chd=t:45,25,10,20
Los nombres de los campos que acompañan al gráfico:
chl=Valencia|Madrid|Barcelona|Lugo
Por poner otro ejemplo de gráfico generado con el API de Google Chart, vamos a ver cómo se crearía una gráfica de barras.
<img src="http://chart.apis.google.com/chart?chs=400x100&cht=bhg&chco=e5f867|aaaaaa|596605&chd=t:60,10,30&chdl=Me+gusta+%286+votos%29|no+me+gusta+%281+voto%29|nsnc+%283+votos%29" width="400" height="100">
Este código mostraría una gráfica como esta:
Posibilidades de las gráficas de Google API Chart
Veamos ahora un resumen de las características y posibilidades de esta API para la creación de gráficas.
Tipos de Gráficas:
API Chart soporta una cantidad grande de tipos de gráficos distintos, como gráficas de barras, de tarta, (2D y 3D), de líneas, puntos, etc. tiene además algunos tipos de gráficos bastante originales, como el Google O-Meter, que tiene una forma similar a un velocímetro, con un abanico de posibilidades y una flecha que apunta al lugar de la estadística.
Personalización de las gráficas:
Existen varios elementos con los que se pueden personalizar las gráficas, como tamaño de la imagen, colores, tamaño de los elementos, como las barras en las gráficas de barras, espaciado, títulos del gráfico, etc.
Etiquetas y leyendas:
Dispone de varias maneras para asignar textos a los valores de las gráficas, que además dependen del tipo de gráfica, pudiendo crear etiquetas y leyendas para identificar los elementos que se contabilizan en el gráfico.
Datos contabilizados:
Existe la posibilidad de configurar varios juegos de datos en la misma gráfica (en las gráficas que lo permiten) y la carga de datos se puede realizar de varias maneras.
Documentación de Google API Chart
Este servicio de gráficas ofrecido por Google tiene una completa documentación, que también se encuentra disponible en Español. Por ello, os dejamos un enlace a la página de documentación dentro de Google Code, donde podréis aprender a generar todo tipo de gráficas.
https://developers.google.com/chart/
Algunas pruebas de uso de API Chart
En el siguiente artículo de desarrollo web .com veremos unos códigos para la creación de un gráfico con datos que nos llegan de una tabla MySQL.
Ver el artículo pruebas de uso de Google API Chart.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...