Google Chart

Desde diciembre de 2007, Google ha puesto a disposición del público un bibloteca llamada Google Chart que permite crear gráficos dinámicamente.

Valores a representar

Los valores a representar se pueden enviar en varios formatos. El más sencillo es el llamado "simple encoding"

Codificación simple (Simple encoding)

En este formato, la lista de valores a representar se envía en forma de cadena (formada por letras mayúsculas, minúsculas, cifras o el guión bajo (_)). Google Chart convierte cada carácter de la cadena en un valor del 0 al 61 y representa en la gráfica esos valores. El carácter guión bajo (_) significa que no hay valor en esa posición.

La relación entre caracteres de la cadena y valores numérico es la siguiente:

Ejemplos

• La cadena "fA9f" se traduce en los valores 31, 0, 61, 31. En una gráfica de tipo lineal esos valores crearían la siguiente gráfica:

  Gráfica
  Código fuente	<img src="http://chart.apis.google.com/chart?chs=400x200&amp;chd=s:fA9f&amp;cht=lc" alt="Ejemplo" />

• La cadena "9A9A_A9A" se traduce en los valores 61, 0, 61, 0, (valor no definido), 0, 61, 0. En una gráfica de tipo lineal esos valores crearían la siguiente gráfica:

  Gráfica
  Código fuente	<img src="http://chart.apis.google.com/chart?chs=400x200&amp;chd=s:9A9A_A9A&amp;cht=lc" alt="Ejemplo" />

Tamaño de gráfica

El tamaño se establece mediante el parámetro chs, indicando la anchura y la altura en píxeles.

Ejemplos

• El parámetro chs=200x100 crearía la siguiente gráfica:

  Gráfica
  Código fuente	<img src="http://chart.apis.google.com/chart?chs=200x100&amp;chd=s:fA9f&amp;cht=lc" alt="Ejemplo" />

• El parámetro chs=100x200 crearía la siguiente gráfica:

  Gráfica
  Código fuente	<img src="http://chart.apis.google.com/chart?chs=100x200&amp;chd=s:fA9f&amp;cht=lc" alt="Ejemplo" />

Título de gráfica

El título se establece mediante el parámetro chtt, indicando el texto del título (sin acentos). Para hacer un salto de línea en el título, se utiliza el carácter | (tubería). Para separar palabras, se utiliza el carácter + (aunque admite espacios).

Ejemplos

• El parámetro chtt=Titulo crearía la siguiente gráfica:

  Gráfica
  Código fuente	<img src="http://chart.apis.google.com/chart?chs=400x200&amp;chd=s:fA9f&amp;cht=lc&amp;chtt=Titulo" alt="Ejemplo" />

• El parámetro chtt=TITULO|Titulillo crearía la siguiente gráfica:

  Gráfica
  Código fuente	<img src="http://chart.apis.google.com/chart?chs=400x200&chd=s:fA9f&cht=lc&chtt=TITULO|Titulillo" alt="Ejemplo" />

• El parámetro chtt=Titulo+de+la+grafica crearía la siguiente gráfica:

  Gráfica
  Código fuente	<img src="http://chart.apis.google.com/chart?chs=400x200&chd=s:fA9f&cht=lc&chtt=TITULO|Titulillo" alt="Ejemplo" />

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.