Introducción a Google Chart API

Introducción

En este tutorial vamos a hablar sobre una nueva herramienta de

Google llamada Google

Chart API que nos permitirá la creación de gráficas

en forma de imágenes PNG que podremos usar en nuestras aplicaciones

web. Su uso es muy sencillo, mediante peticiones http a una determinada

url (https://developers.google.com/chart/)

y con unos determinados parámetros se nos devolverá una imagen.

Hay que comentar que como casi todo lo que desarrollada Google

es de uso gratuito pero con ciertas limitaciones. En el caso de Google Chart

API inicialmente estaba limitado su uso a 50.000 peticiones por url

y día, pero actualmente este límite ha subido hasta situarse en

250.000, lo que parece un valor bastante aceptable. De todas formas siempre

podremos tener un servidor propio donde almacenemos las imágenes generadas

a modo de cache de imágenes, así evitaremos tener que acceder

constantemente al servidor de Google Chart para obtener una imagen determinada.

Echando un vistazo a la web

oficial de la herramienta podemos ver la gran variedad de tipos de gráficas

y opciones permitidas. Una de las ventajas que tiene este sistema de generación

de gráficas es que no se necesita instalar ningún componente en

nuestro entorno o servidor por lo que podremos generar nuestras gráficas

«al vuelo».

Lo que se pretende en este tutorial es ver las principales características

de la herramienta usando para ello varios ejemplos gráficos.

Formato de la URL

Lo primero que tenemos que saber es el formato de la URL

de innovación:

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

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

Vamos a ver un sencillo ejemplo…

 

Para obtener esta gráfica con forma de imagen PNG

hemos tenido que insertar la siguiente etiqueta <img> en nuestro código

HTML:

Parámetros

Como se puede ver en el código HTML aparecen una

serie de parámetros como chs (chart size),

chd (chart data), cht (chart

type) y chl (chart label). El conocimiento de

estos parámetros, sus posibles valores y combinaciones nos darán

el conocimiento sobre el API. Hay que comentar que el orden de los parámetros

en la url de invocación no es relevante.

Existen tres parámetros que son obligatorios, es decir,

se tienen siempre que definir en nuesta innvocación aunque tengan valores

vacíos. Estos son:

• chs : tamaño de la imagen en píxeles (p.ej:

  chs=500×300). Existen varias restricciones respecto a los valores de este

  parámetro. El área establecida no puede superar los 300.000

  píxeles y el ancho/alto de la imagen no puede ser mayor que 1.000 píxeles.

• chd : datos del gráfico (p.ej: chd=t:10,20,30).

  Se podrán definir varios conjuntos de datos para un determinado gráfico

  separados por el caracter «|». Estos datos deben estar codificados

  de una de estas cuatro formas:

  • codificación de texto (chd=t): Los valores del

    parámetro deben ser números en coma flotante desde 0.0 hasta

    100.0. El valor -1 indica omisión de dato. Por ejemplo:

[ http://chart.apis.google.com/chart?chs=250×100&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 de codificación se necesitan dos 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 valores.

[ http://chart.apis.google.com/chart?chs=250×100&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 ser caracteres A-Z (0…25), a-z (26…51), 0-9 (52…61).

  El caracter «_» indica omisión de dato. (Ver

  valores de los caracteres)



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

• codificación amplicada (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 (,). (Ver

  valores de los caracteres). Por ejemplo:



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

]

• cht : tipo de gráfico. Actualmente Google Chart

  tiene definidos 9 tipos:

  • 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

Además de estos tres parámetros obligatorios hay otros parámetros

de caracter opcional, como por ejemplo:

• chco: color que se quiere aplicar al gráfico con

  formato RRGGBB (por ejemplo 0000FF). Además se puede

  establecer un valor de transparencia del color añadiéndole un

  valor entre 00 y FF (por ejemplo: FFAA0000).Veamos algunos

  ejemplos…

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

]

[ http://chart.apis.google.com/chart?chs=250×100&chd=e:AZBL&cht=p3&chl=A|B&chco=FF000000]

[ http://chart.apis.google.com/chart?chs=250×100&chd=e:AZBL&cht=p3&chl=A|B&chco=FF0000]

En el primer gráfico se ha establecido un color para

cada sector, en el segundo gráfico se puede ver el resultado de un

gráfico con componente de transparencia y en el tercer gráfico

se ha establecido solo un color para los dos sectores. En este caso se rellenan

los restantes sectores del gráfico mediante interpolación de

colores.

[ http://chart.apis.google.com/chart?cht=bhs&chco=ff0000,0000ff&chs=200×105&chd=s:BOE,THg,Baa&chxt=x,y

]

[ http://chart.apis.google.com/chart?cht=bhs&chco=ff0000,0000ff&chs=200×105&chd=s:BOE,THg,Baa&chxt=x,y

]

[ http://chart.apis.google.com/chart?chs=200×125&cht=gom&chd=t:40&chco=ff0000,00ff00

]

Entre estos tres siguientes gráficos se puede ver un primer gráfico

de líneas en el que hemos establecido 3 colores para sus correspondientes

grupos de datos, en caso de que solo se establezcan dos colores, el tercer

grupo de datos de pintará repitiendo el último color establecido.

El segundo gráfico es un gráfico de barras en el que se han

establecido solo 2 colores para 3 grupos de datos, en este caso se irán

alternando los colores. En el último ejemplo tenemos un gráfico

de tipo Google-o-meter en el que se han establecido dos colores. En este tipo

de gráficos se deben establecer como mínimo dos colores, pudiendo

establecerse más de dos que serán el gradiente intermedio del

gráfico.

• chtt: título del gráfico. Para definir el

  título de un gráfico se debe rellenar este parámetro

  con el texto del título usando el símbolo «+» para

  los espacios en blanco y el símbolo «|» para los saltos de

  línea. Además del texto del título también se

  puede cambiar su estilo (color y tamaño de la fuente) rellenando el

  parámetro chts (chart title style) con el

  color en formato RRGGBB y el tamaño de la fuente en píxeles.

  En el siguiente ejemplo se puede ver todas las posibilidades de este parámetro.

[ ……….&chtt=Titulo+del+grafico+1|segunda+linea&chts=CCCCCC,15&chco=ff0000,0000ff……..

]

• chdl: leyenda del gráfico. Se pueden definir las

  leyendas de cada uno de los conjuntos de datos de un gráfico mediante

  este parámetro. El orden en que se establecen las leyendas debe ser

  el mismo del conjunto de datos. Además existe otro parámetro

  relativo a las leyendas de los gráficos llamado chdlp

  (chart label position) que establece la posición (t:

  top, d: down, r: right y l: left) de las

  leyendas dentro de la imagen generada. Aquí se pueden ver algunos ejemplos

  de estos dos parámetros.

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

  ]

  [ …&chdl=Leyenda 1|Leyenda 2&chdlp=t&chco=ff0000,0000ff…

  ]

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

  ]

• chbh: grosor y espaciado en las gráficas de barras.

  En este parámetro se puede definir el ancho en píxeles de las

  barras del gráfico, el espacio en píxeles entre las barras de

  un mismo grupo de datos (4px por defecto) y el espacio en píxeles entre

  diferentes grupos de datos (8px por defecto). El primer valor del parámetro

  debe ser el ancho de cada barra, el segundo valor debe ser el espacio entre

  barras dentro de un mismo conjunto de datos y el último valor es el

  espacio entre las diferentes conjuntos de barras o de datos. Aquí se

  pueden ver algunos ejemplos de las posibilidades de este parámetro.

[ http://chart.apis.google.com/chart?cht=bhg&chs=200×150&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.

  

[ http://chart.apis.google.com/chart?cht=bhg&chs=200×125&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.

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

  ]

  [ http://chart.apis.google.com/chart?cht=lc&chls=1,1,0&chco=ff0000&chs=200×150&chd=s:HOBAHEGea]

  [ http://chart.apis.google.com/chart?cht=lc&chls=10,4,5&chco=ff0000&chs=200×150&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 (en este mismo orden

  dentro del parámetro).

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

  ]

  [ http://chart.apis.google.com/chart?cht=lc&chg=30,40,1,0&chco=ff0000&chs=200×150&chd=s:HOBAHEGea

  ]

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

A continuación vamos a ver los tipos de gráficos más interesantes.

Tipos de gráficos

Como se comentó anteriormente el parámetro que define el tipo

de gráfico a pintar es de uso obligatorio y se llama cht (chart

type). A continuación se irán viendo algunos ejemplo y detalles

interesantes de cada uno de los tipo de gráfico permitidos.

Gráfico de líneas

Existen dos tipos de gráficas de línea:

• lc : línea continua. Cada grupo de datos se representará

  en una línea.

  

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

]

• lxy : cada línea del gráfico se especifica

  con un par de grupo de datos, uno para el eje X y otro para el eje Y.

  

[ http://chart.apis.google.com/chart?cht=lxy&chs=200×125&chd=t:0,30,60,70,90,95,100|20

]

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.

[ http://chart.apis.google.com/chart?cht=ls&chco=ff0000&chs=200×150&chd=t:0,20,30,40,50,10

]

Gráfico de barras

Existen dos tipos de gráficos de barras:

• bhs : barras horinzontales.
• bvs : barras verticales.

Como en los demás tipos de gráficos se pueden establecer varios

conjuntos de datos, para los cuales se tendrán que especificar el color

de su porción en la gráfica. En los siguientes ejemplos se puede

ver un gráfico con un solo conjuntos de datos y otro con dos conjuntos

de datos con colores diferentes.

[ http://chart.apis.google.com/chart?cht=bvs&chs=200×125&chd=s:a2f

]

[ http://chart.apis.google.com/chart?cht=bhs&chs=200×125&chd=t:10,40,20|50,30,10&chco=ff00ff,00ff00

]

Gráfico circular

Al igual que los gráficos de barras también hay dos tipos:

• p: «tarta» en dos dimensiones.
• p3: «tarta» en 3D.

Como ya se ha visto anteriormente estos tipos de gráficas también

permiten parámetros opcionales para establecer el color de los segmentos,

etiquetas, leyendas, etc. Una de las limitaciones de este tipo de gráficas

es que sólo permite un conjunto de datos, los datos adicionales no se

tomarán en cuenta a la hora de generar la imagen.

[ http://chart.apis.google.com/chart?chs=250×100&chd=s:ATb19,Mn5tz&cht=p&chl=A|B|C|D

]

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

]

 

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.

[ http://chart.apis.google.com/chart?cht=v&chs=250×150&chd=t:90,80,60,20,10,30,10&chco=ff0000,00ff00,0000ff

]

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). Este tipo de gráfico tiene la particularidad de que al igual

que ocurre con el gráfico circular solo se puede establecer un conjunto

de datos. Para definir el conjunto de datos de estas gráficas (puntos)

se deben especificar en la invocación al API de Google tres conjuntos

de datos que serán las posiciones x e y de cada punto y el tamaño

del punto (opcional).

[ http://chart.apis.google.com/chart?cht=s&chd=s:G1abfr,B2adas,zbgga&chxt=x,y&chco=00ff00&chs=250×150

]

En el ejemplo podemos ver como el primer punto se define por los

valores G (6) para la posición x, B (2)

para la posición y, con tamaño z (51).

Gráfico de radar

Existen dos tipos de gráficos de radar:

• r : los puntos establecidos se unen con líneas rectas.
• rs : los puntos establecidos se unen con curvas

  spline formando una línea curva.

Cada conjunto de datos definidos se representará con una línea

diferente.

[ http://chart.apis.google.com/chart?cht=r&chs=200×200&chd=t:30,50,80,90,90,30|5,20,40,80,66,5&chco=00ffff,0000ff&chxt=x

]

[ http://chart.apis.google.com/chart?cht=rs&chs=200×200&chd=t:30,50,80,90,90,30|5,20,40,80,66,5&chco=00ffff,0000ff&chxt=x

]

Mapa

Uno de los tipos de gráficas más curiosas permitidas en este

API es el de los gráficos de 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.

Para los mapas, el tamaño máximo es de 440 píxeles de

ancho por 220 píxeles de altura. En este tipo de gráficas también

se puede poner un determinado color a un determinado país del mapa. Para

establecer un color a un país se deben usar tres parámetros:

• chco: color por defecto de los paises no seleccionados

  y lista de colores (formato RRGGBB) de los paises seleccionados.

• chld: listado de códigos

  ISO 3166-1-alpha-2 de los paises seleccionados.

• chd: listado de valores para cada país seleccionado

  o nivel de gradiente de color de cada país.

[ http://chart.apis.google.com/chart?cht=t&chs=440×220&chtm=europe

&chco=cccccc,000000,ff0000&chld=ESFRDE&chd=s:amz&chf=bg,s,0099ff]

Como se puede ver en la url de ejemplo se ha seleccionado

un tipo de gráfico de mapa (cht=t) y se ha especificado

el continente europeo. Además se ha definido el parámetro de color

chco con los valores CCCCCC para los paises

no seleccionados y los colores 000000 y FF0000

como los límites inferiores y superiores del gradiente a usar para colorear

los países seleccionados. También se ha definido el parámetro

chld con la lista de países seleccionados, en este caso

España (ES), Francia (FR) y Alemania

(DE), el parámetro de datos chd que

contendrá los niveles del gradiente para cada país seleccionado

(a para España, m para Francia y z

para Alemania). Por último se ha establecido un parámetro opcional

chf para el relleno sólido del gráfico. Este

relleno consiste en un relleno sólido (valor s) del

fondo (valor bg) del gráfico con un color (valor 0099FF)

determinado simulando el agua.

Google-o-mete

Este tipo de gráfico es una novedad introducida por Google Chart API

y 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). Para

ver mejor en que consiste este nuevo gráfico lo mejor es ver unos ejemplos.

[ http://chart.apis.google.com/chart?chs=250×150&cht=gom&chd=t:30&chl=A]

[ http://chart.apis.google.com/chart?chs=250×150&chco=000000,ffffff&cht=gom&chd=t:30,65&chl=A|B]

En el primer ejemplo vemos que hemos establecido en el parámetro

de datos chd el valor de 30, por lo que el indicador de situará

al 30% de la franja de colores empezando desde la izquierda. También

se ha definido una etiqueta con nombre A que aparecerá junto al indicador

en forma de flecha, también hay que señalar que si no se especifican

ningún color se tomarán los colores por defecto que son el rojo

y verde tal y como aparecen en el primer gráfico.

En el segundo gráfico vemos como se han cambiado los colores

por el blanco y negro. Además se han definido dos conjuntos de datos,

por lo que aparecerán dos indicadores con sus respectivas etiquetas.

Conclusiones

Después de leer este tutorial seguro que hay algunas cosas que ya se

han olvidado o que no han quedado del todo claras, pero lo que se pretende con

este tutorial no es adentrarse a fondo en los parámetros, rectricciones,

etc, para eso ya está la documentación oficial, sino enseñar

con ejemplos gráficos el potencial y las posibilidades que este nuevo

API de Google puede aportar a nuestras aplicaciones.

El proyecto de Gogle Chart API no tiene una gran actividad pero habrá

que estar atento a nuevas funcionalidades que aparezcan ya que es un proyecto

joven y lo normal es que evolucione. Por supuesto, se lo contaremos en Adictosaltrabajo.com