Entra en Adictos a través de

• Deseo registrarme
• Olvidé mi contraseña

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 (http://chart.apis.google.com) 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:

<img src="http://chart.apis.google.com/chart? chs=350x150 &chd=t:30,50,20 &cht=p3 &chl=Angel|Daniel|Jose" alt="Primer ejemplo con Google Chart API" />

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=500x300). 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=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 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=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 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=250x100&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=250x100&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=250x100&chd=e:AZBL&cht=p3&chl=A|B&chco=FF0000,0000FF ]

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

[ http://chart.apis.google.com/chart?chs=250x100&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=200x105&chd=s:BOE,THg,Baa&chxt=x,y ]

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

[ http://chart.apis.google.com/chart?chs=200x125&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=250x100&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=250x100&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=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.

  

[ 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.

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

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

  [ http://chart.apis.google.com/chart?cht=lc&chls=10,4,5&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 (en este mismo orden dentro del parámetro).

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

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

  [ http://chart.apis.google.com/chart?cht=lc&chg=20,20,30,5&chco=ff0000&chs=200x150&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=250x100&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=200x125&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=200x150&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=200x125&chd=s:a2f ]

[ http://chart.apis.google.com/chart?cht=bhs&chs=200x125&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=250x100&chd=s:ATb19,Mn5tz&cht=p&chl=A|B|C|D ]

[ http://chart.apis.google.com/chart?chs=250x100&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=250x150&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=250x150 ]

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=200x200&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=200x200&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=440x220&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=250x150&cht=gom&chd=t:30&chl=A]

[ http://chart.apis.google.com/chart?chs=250x150&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

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-No comercial-Sin obras derivadas 2.5