Esta lección explica cómo utilizar la API de Google Chart, servicio que Google retiró definitivamente en marzo de 2019. El servicio equivalente actual es Google Charts, por lo que esta lección está pendientes de actualizar.En diciembre de 2007, Google puso a disposición del público un biblioteca llamada Google Chart que permitía crear gráficos dinámicamente.
Esta lección explica cómo utilizar la API de Google Chart, servicio que Google retiró definitivamente en marzo de 2019. El servicio equivalente actual es Google Charts, por lo que esta lección está pendientes de actualizar.
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"> |