Desde diciembre de 2007, Google ha puesto a disposición del público un biblioteca llamada Google Chart que permite crear gráficos dinámicamente.
Los valores a representar se pueden enviar en varios formatos. El más sencillo es el llamado "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 guion 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 guion 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:
Valor numérico | 0 | 1 | ... | 24 | 25 | 26 | 27 | ... | 50 | 51 | 52 | 53 | .. | 60 | 61 | sin valor |
Carácter cadena | A | B | Y | Z | a | b | ... | y | z | 0 | 1 | .. | 8 | 9 | _ |
Gráfica | |
---|---|
Código fuente |
<img src="http://chart.apis.google.com/chart?chs=400x200&chd=s:fA9f&cht=lc" alt="Ejemplo"> |
Gráfica | |
---|---|
Código fuente | <img src="http://chart.apis.google.com/chart?chs=400x200&chd=s:9A9A_A9A&cht=lc" alt="Ejemplo"> |
El tamaño se establece mediante el parámetro chs, indicando la anchura y la altura en píxeles.
Gráfica | |
---|---|
Código fuente |
<img src="http://chart.apis.google.com/chart?chs=200x100&chd=s:fA9f&cht=lc" alt="Ejemplo"> |
Gráfica | |
---|---|
Código fuente |
<img src="http://chart.apis.google.com/chart?chs=100x200&chd=s:fA9f&cht=lc" alt="Ejemplo"> |
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).
Gráfica | |
---|---|
Código fuente |
<img src="http://chart.apis.google.com/chart?chs=400x200&chd=s:fA9f&cht=lc&chtt=Titulo" alt="Ejemplo"> |
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"> |
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"> |