Google Chart API para crear gráficos. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Varios Google

¡votar!

Google Chart API para crear gráficos

Google Chart API es una herramienta de Google que nos permite crear distintos tipos de gráficos con los datos que nosotros le pasemos. Este servicio no es ilimitado, sino que tiene un número máximo de peticios por sitio y día, aunque siempre podremos capturar la imagen y guardarle en caché para evitar hacer la consulta a Google.

Para obtener la imagen del gráfico, en nuestra aplicación hay que incluir el código IMG, donde en el atributo SRC se pondrá la url del API de Google junto con los datos y tipo de gráfico que queramos que nos genere.

La url que se pasaría tendría la siguiente forma:

http://URL_SERVIDOR_GOOGLE_CHART?PARAMETRO1=VALOR1&PARAMETRO2=VALOR2&....&PARAMETRON=VALORN

Donde URL_SERVIDOR_GOOGLE_CHART es http://chart.apis.google.com/chart.

Un ejemlo de la creación de un diagrama circular, sería el siguiente:

<img src="http://chart.apis.google.com/chart?chs=400x150&chd=t:50,30,20&cht=p&chl=Espana|Argentina|Brasil" alt="Ganador del mundial" />

Como vemos, a la url se le pasan una serie de parámetros, de los cuales 3 son obligatorios y el resto son opcionales. Vamos a ver cada uno de estos parámetros.

CHS
Parámetro obligatorio y que sirve para indicar a la gráfica el tamaño que tendrá en la aplicación. No puede pasar de 1000 pixel el alto y el acho de la imagen.

CHD
Es otro parámetro obligatorio y con este parámetro es como le pasamos los datos que queremos representar en el gráfico.

Ejemplo: chd=t:10,20,30

Se pueden pasar varios conjuntos de dato a un gráfico utilizando como separador “|”. Los datos que se le introducen, deben de estar codificados de una de las siguientes cuatro formas que os indicamos:

- Codificación de texto (chd=t): Los valores del parámetro deben de ser número en coma flotante desde 0.0 hata 100.0. El valor -1 significa omisión de datos.

Ejemplo: http://chart.apis.google.com/chart?chs=250x100&chd=t:12.5,43.5,44.0&cht=p3&chl=Luis|Ana|Jesus

- Codificación de texto con escala de datos (chd=t): Para este tipo hace falta dos tipos de parámetros, el chd (chart data) y el chds (chart data set) donde se especifican los datos a representar y la dimensión de estos valore.

Ejemplo: http://chart.apis.google.com/chart?chs=250x100&chd=t:12.5,76.5,44.0&chds=-20,80&cht=lc&chl=A|B|C

- Codificación sencilla (chd=s): Los valores del parámetro deben de ser caracteres A-Z, a-z, 0-9. El carácter “_” indica omisión de datos.

Ejemplo: http://chart.apis.google.com/chart?chs=250x100&chd=s:KZtU&cht=p&chl=A|B|C|D

- Codificación ampliada (chd=e): Los valores del parámetro deben ser pares de caracteres A-Z, a-z, 0-9, guión, punto, carácter de subrayado y coma.

Ejemplo: http://chart.apis.google.com/chart?chs=250x100&chd=e:AZBL&cht=p3&chl=A|B

CHT
Parámetro obligatorio que indica el tipo de gráfico que se quiere construir. Actualmente dispone de nueve posibles gráficos.

Gráfico de líneas
Palabra gráfica
Gráfico de barras
Gráfico circular
Diagrama de Venn
Gráfico de puntos
Gráfico de radar
Mapa
Google-o-meter

CHCO
Parámetro opcional para indicar los colores que se quieren aplicar al gráfico, con formato RRGGBB

Ejemplo: http://chart.apis.google.com/chart?chs=250x100&chd=e:AZBL&cht=p3&chl=A|B&chco=FF0000,0000FF

CHTT
Otro parámetro opcional, que nos permite indicar el título del gráfico. Se debe utilizar el signo “+” para los espacios en blando del título. Al título también se le puede cambiar el color y la fuente mediante el uso de chts.

Ejemplo: http://chart.apis.google.com/chart?cht=bhs&chco=ff0000,0000ff&chs=200x105&chd=s:BOE,THg,Baa&chxt=x,y&chtt=Titulo+del+grafico+1|segunda+linea&chts=CCCCCC,15&chco=ff0000,0000ff

CHDL
Con este parámetro opcional, podremos indicar la leyenda del gráfico. El orden de las leyendas deben de ser el mismo que el orden de los datos del gráfico. Existe otro parámetro relacionado con la leyenda, chdlp, para establecer la posición de esta (t: top, d:down, r: right, l: left)

Ejemplo: http://chart.apis.google.com/chart?chs=250x100&chd=e:AZBL&cht=p3&chdl=A|B&chdlp=r

CHBH
Parámetro opcional que indica el grosor y espaciado en las gráficas de barras.

Ejemplo: http://chart.apis.google.com/chart?cht=bhg&chs=200x150&chd=s:ag,os&chbh=15,2,10&chco=ff0000,0000ff

CHP
Posición de la línea base en un gráfico de barras. Para cada uno de los grupos de datos, se puede definir la posición de la línea base estableciendo un valor entre 0 y 1 en este parámetro.

Ejemplo: http://chart.apis.google.com/chart?cht=bhg&chs=200x125&chd=t:20,56,10,95&chco=00aa00&chp=.3

CHLS
Estilo de las líneas de un gráfico lineal. Para cada uno de los grupos de datos se puede definir el estilo de la línea estableciendo un valor para su grosor, ancho del segmento y espacio en blanco entre segmentos. El primer valor del parámetro debe ser el grosor en píxeles de la línea, el segundo valor deberá ser el ancho del segmento y el último valor el espacio en blanca entre segmentos. Para establecer una línea continua sin puntos o segmentos se debe poner un 0 en el espacio entre segmentos.

Ejemplo: http://chart.apis.google.com/chart?cht=lc&chls=6,10,3&chco=ff0000&chs=200x150&chd=s:HOBAHEGea

CHG
Características de una cuadrícula para un gráfico. Con este parámetro de puede establecer una cuadrícula para nuestros gráficos. Se pueden definir el ancho y alto de las cuadrículas, el espacio entre cada segmento y la longitud del segmento.

Ejemplo: http://chart.apis.google.com/chart?cht=lc&chg=20,20,30,5&chco=ff0000&chs=200x150&chd=s:HOBAHEGea

TIPOS DE GRÁFICOS
Como hemos dicho anteriormente, existen 9 tipos de gráficos que podemos crear con esta API.

a) Gráficos de líneas
Existen dos tipos de estos gráficos:

lc: línea continua. Cada grupo se representa en una línea.

Lxy: cada línea del gráfico se especifica con un par de grupo de datos, uno para el x y otro para el y.

b) Palabra gráfica
Para definir un gráfico de tipo palabra gráfica se debe especificar en el parámetro cht el valor ls. Basicamente el funcionamiento es el mismo que el tipo de gráfico de líneas pero con la salvedad que en el de palabra gráfica no se definen los ejes X e Y.

c) Gráfico de barras
Dos tipos de gráficos de barras

- bhs: barras horizontales.

- bvs: barras verticales.

d)Gráfico Circular

Dos tipos de gráficos circulares:

     - p: “tarta” de dos dimensiones.




     - p3: “tarta” de tres dimensiones.

e) Diagrama de Venn
Para los Diagramas de Venn solo tenemos que espeficicar el tipo de gráfico "v" en el parámetro cht (cht=v). Con este tipo de gráficas tenemos que establecer un determinado conjunto de datos para los círculos a representar (A, B, C): los tres primeros valores indiquen los tamaños relativos de tres círculos (A, B y C), el cuarto valor indique el área de la intersección de A con B, el quinto valor indique el área de la intersección de A con C, el sexto valor indique el área de la intersección de B con C y el séptimo valor indique el área de la intersección de A con B y C. Los diagramas de Venn permiten definir dos, tres o más conjuntos pero este API solo nos permite representar gráficas con exactamente tres conjuntos.

f) Gráfico de puntos
A la hora de establecer una gráfica de puntos tenemos que usar el valor "s" para el parámetro cht (cht=s)

g) Gráfico de radar
Existen dos tipos de gráficos:

- r: Los puntos se unen con líneas rectas.

- rs: Los puntos se unen con curvas spline formando una línea curva.

h) Mapa
Para definir un tipo de gráfico mapa debemos usar el valor "t" en el parámetro cht (cht=t) y especificar que mapa o zona del planeta queremos visualizar insertando en el parámetro chtm uno de los siguientes valores: africa, asia, europe, middle_east, south_america, usa o world.

i)Google-o-mete
Nos permite indicar uno o varios niveles dentro de un conjunto de colores. Para establecer este gráfico se debe introducir en el parámetro de tipo cht el valor de gom (cht=gom)