Estás en... Home > Otras cosas > Crea graficas de forma sencilla con Google Chart

Google Chart ofrece dos APIS para generar gráficas: gráficas de imagen (más sencilla) y gráficas interactivas (más potente).

Aquí voy a mostrar el uso de la API de gráficas de imagen.

Su funcionamiento básico consiste realizar peticiones GET a una determinada URL especial, construida de acuerdo a la API de Google Chart y con ello obtendremos una imagen PNG con la gráfica generada.

Es decir, generamos una url como esta:

http://chart.apis.google.com/chart?cht=p3&chs=400x175&chd=t:45,32,17&chl=Diseño|Programación|Otras+cosas&chtt=Posts+en+Theproc.es&chco=ff0000&chf=bg,s,fff6f6

y la escribimos en el navegador o la incluimos dentro de una etiqueta img obtendremos la siguiente imagen:

La petición se realiza sobre el servicio http://chart.apis.google.com/chart? y por medio de parámetros se especifica el tipo de gráfica, los datos a mostrar y el color entre otros.

Construyendo la URL

Las peticiones se realizan sobre la url http://chart.apis.google.com/chart? que recibe los parámetros, unos obligatorios y otros opcionales.

Parámetros obligatorios

• cht

Especifica el tipo de gráfica. Hay multitud de tipos diferentes. En el anterior ejemplo he usado el valor p3 para generar una gráfica de tipo tarta en 3D.

Usando p cambiamos a una gráfica de tipo tarta 2D:

Usando bv cambiamos a un gráfica de tipo barras verticales:

En este caso he tenido que ajustar el resto de parámetros para lograr un resultado correcto.

Hay muchas más, como puedes ver en la Galería de gráficas.

• chs

Especifica el tamaño de la gráfica. Por ejemplo 400x175.

• chd

Especifica los datos de la gráfica. Por ejemplo t:45,32,17. El primer carácter t indica que los datos se representan en formato de texto básico, es decir, valores comprendidos entre 0 y 100 separados por comas.

Algunos parámetros opcionales

• chtt

Establece el título de la gráfica. Por ejemplo: chtt=Posts+en+Theproc.es.

• chl

Indica las etiquetas de cada elemento de la gráfica. Por ejemplo chl=Diseño|Programación|Otras+cosas.

• chco

Establece el color de los elementos del gráfico. Por ejemplo: ff0000.

En el caso de las gráficas de tipo tarta los distintos elementos se muestran con varias tonalidades de dicho color. También se puede especificar un color por elemento, como en el ejemplo de gráfica barras chco=FF9999|99FF99|9999FF.

• chf

Establece el color de fondo de la gráfica. En los ejemplos anteriores he usado de fondo el mismo color que el fondo del blog para que se integre perfectamente bg,s,fff6f6, es decir, background color, solid, fff6f6.

El color por defecto es el blanco.

Otros parámetros

Estas son solo algunas de las opciones disponibles, pero hay muchas más como podéis ver en la documentación de Google Chart.

Google Live Chart Playground

La herramienta Google Live Chart Playground permite generar urls de gráficas así como previsualizar las modificaciones en los parámetros en tiempo real.