Introducción a Google Chart API

2
50337

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)

    Ejemplo con Google Chart API

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

    Ejemplo con Google Chart API

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

Ejemplo con Google Chart API
Ejemplo con Google Chart API
Ejemplo con Google Chart API

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

Ejemplo con Google Chart API
Ejemplo con Google Chart API
Ejemplo con Google Chart API

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

Ejemplo con Google Chart API

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

    Ejemplo con Google Chart API
    Ejemplo con Google Chart API
    Ejemplo con Google Chart API

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

Ejemplo con Google Chart API

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

    Ejemplo con Google Chart API

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

    Ejemplo con Google Chart API
    Ejemplo con Google Chart API
    Ejemplo con Google Chart API

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

    Ejemplo con Google Chart API
    Ejemplo con Google Chart API
    Ejemplo con Google Chart API

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

    Ejemplo con Google Chart API

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

    Ejemplo con Google Chart API

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

Ejemplo con Google Chart API

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

Ejemplo con Google Chart API
Ejemplo con Google Chart API

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

Ejemplo con Google Chart API
Ejemplo con Google Chart API

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

Ejemplo con Google Chart API

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

Ejemplo con Google Chart API

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

Ejemplo con Google Chart API
Ejemplo con Google Chart API

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

Ejemplo con Google Chart API

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

Ejemplo con Google Chart API
Ejemplo con Google Chart API

[ 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

2 Comentarios

  1. Muy buena tu información.

    Te hago una consulta, resulta que estoy trabajando con Arduino y tengo datos de diferentes sensores, pero como las variables son muy diferentes, lo son también sus escalas, así que si deseo ver una salida de datos en un gráfico, tendré algunas variables que no se notarán debido a que serán enmascaradas por la escala de las otras variables, ni siquiera es una opción tener dos ejes Y, pues son varias variables… así que lo que se me ocurre es hacer las salidas en forma de tablas, pero no encuentro una explicación como la que haces para los gráficos pero enfocada en tablas (ver los valores tal cuales, sin representación gráfica).

    Gracias

  2. Alfonso, buen trabajo informativo,quisiera preguntarte si es posible aumentar la capacidad de etiquetas ya que los nombres no salen completo. por ejemplo: function drawVisualization() {
    var wrapper = new google.visualization.ChartWrapper({
    chartType: ‘ColumnChart’,
    dataTable: [[», ‘Germany’, ‘USA’, ‘BrazilBrazilBra’, ‘Canada’, ‘France’, ‘RU’], apenas salen 4 dígitos
    de nombre.
    Te agradecería bastante si puedes compartir algún código para aumentar esto.
    Atte
    Victor Valdes D.

Dejar respuesta

Please enter your comment!
Please enter your name here