NorfiPC
NorfiPC » Publicación web » Mostrar gráficos en mi blog

Como mostrar gráficos en las páginas web usando la API de Google Charts


Actualizado: 17 de noviembre del 2022
Por: Norfi Carrodeguas
Códigos y ejemplos prácticos para poder insertar gráficas de distintos tipos, circulares, de barras, columnas o líneas ya sea usando imágenes o Javascript, en las páginas de un blog o sitio web utilizando el servicio de Google Charts.
Como mostrar gráficos en las páginas web usando la API de Google Charts
Una de las formas de hacer nuestras páginas web más interactivas, atractivas y útiles si mostramos información y datos relacionados con cualquier tipo de evento es mostrar los datos usando gráficos.
De esa forma hacemos más comprensible y accesible la información.
Todos los que hemos usando Microsoft Word, Excel u otro editor similar en alguna ocasión, hemos creado un gráfico debido a lo sencillez del procedimiento.
Para lograr algo similar en las páginas de nuestro blog o sitio web podemos auxiliarnos de una herramienta excelente que provee Google, la API de Google Charts.
Para usarla ni es necesario registrarse ni usar ninguna clave personal, solo es necesario insertar un código con los parámetros necesarios donde deseamos que se muestre el grafico.
Toda la información necesaria para lograrlo esta en distintos archivos de ayuda de Google para desarrolladores, pero en inglés.
Tratamos en este artículo de resumir de forma elemental y con códigos de ejemplo, todo lo que podemos lograr.
Los códigos se pueden modificar y probarlos simplemente insertándolos en la barra de direcciones del navegador.


Como insertar los gráficos de Google Charts


Con Google Charts se pueden insertar en una página distintos tipos de gráficos, similares a los que podemos crear en un documento con editores de texto como Microsoft Word e incluso de otros tipos no disponibles en estos programas:
Gráfico de áreas, líneas, columnas, circular plano, circular 3D, mapa, dispersión, tablas, gráficos con burbujas, como una dona, un indicador (gauge), línea del tiempo, un código QR, etc.
Muchos de estos gráficos permiten visualizar la información de forma muy agradable y original.
Se puede insertar cualquiera de los gráficos de dos formas:

1- Insertar gráficos como imágenes

El método funciona haciendo una petición a una dirección, con una serie de parámetros que especifican el tipo de gráfico, el estilo y los datos.
La dirección se usa en una etiqueta IMG, la cual se inserta en el lugar exacto donde se desea que se muestre el grafico.
Es el método más sencillo y accesible para usar en cualquier sitio o en un blog.
Es similar a insertar una imagen en un post.
Se debe señalar que las funcionalidades de este método son limitadas.

2- Insertar gráficos con Javascript

Mediante este método se inserta un código en el lugar de la página donde se quiere mostrar el grafico.
Es el método ideal porque la gráfica así creada es interactiva, es decir se muestra información adicional al situar el cursor del ratón encima de cualquiera de los elementos que la componen.
Hay disponibles varios tipos de gráficos, algunos de ellos increíbles.


Insertar un gráfico en una página como una imagen


La URL necesaria para obtener una imagen con el grafico en nuestro navegador es similar a la siguiente:

Los parámetros requeridos son tres:
cht (tipo de gráfico)
chd (datos)
chs (tamaño del gráfico, ancho y alto en pixeles)
Existen otros parámetros opcionales para el título, etiqueta, los colores, sombras, etc. Algunos de ellos solo se usan dependo del tipo de grafico a crear.
Algunos ejemplos:
chco - color, usando el valor hexadecimal correspondiente al color
chl - etiquetas
chtt - Titulo del grafico
En los ejemplos a continuación se muestra el uso de otros parámetros, pero no todos.
Para conocerlos lee la información completa en la página de ayuda de Google para desarrolladores: Creando gráficos con imágenes (en ingles)


Ejemplo de un gráfico circular en 3D


Los ejemplos siguientes son elementales, los que desean mostrar gráficos más profesionales deben profundizar en las opciones de la API. No obstante permiten apreciar las posibilidades y le bastarán a muchos para visualizar datos e información útil en su blog a los lectores.
En todos se usan solo una serie de datos, pero se pueden utilizar varias.
Con la siguiente dirección URL cargamos un gráfico de ejemplo circular en 3D con solo tres valores.
✓ Con "cht=p3" indicamos que se trata de un gráfico circular en 3D.
✓ Con "chs=400x200" indicamos que debe medir 400 pixeles de ancho y 200 de altura.
✓ Con "chd=t:60,30,10" se indica los tres valores expresados en porciento.
✓ Con "chl=Cafe|Cigarro|Ron" indicamos los nombres de las tres etiquetas.

El resultado es el siguiente:
Gráfico creado con la API de Google Charts
En la siguiente imagen se muestra la función de cada parámetro y los valores usados en el grafico anterior:
Elementos del código para crear un gráfico usando la API de Google Charts
Puedes copiar la dirección e insertarla en la barra de direcciones del navegador web.
En esta página se usa dentro del SCR de una etiqueta de imagen.
Para eso usamos:

Otros gráficos circulares se pueden crear usando en el parámetro cht los valores "p" (plano) y "pc" (anillo)


Otros ejemplos de gráficos para mostrar como imágenes


Insertar un gráfico de barras horizontal


En el siguiente ejemplo se inserta un gráfico con barras horizontales con los mismos valores que el anterior.
Se especifica el color que debe tener cada barra usando el parámetro chco con el valor hexadecimal de cada color. (chco=0072c6|ef3886|ff9900)
Si se especifica un solo color, se creará un degradado.
En este caso es necesario usar el parámetro chxt para indicar los ejes a mostrar en el gráfico (chxt=x,y), es posible usar hasta cuatro.
Además se incluye el parámetro chtt para el título que se muestra en la parte superior, ten presente que no pueden existir espacios, se usa el carácter + para indicar los espacios entre palabras.

Gráfico de barras horizontal creado con la API de Google Charts


Insertar un gráfico de barras vertical


Similar a los anteriores, pero en este caso se usa el parámetro chbh para indicar el espacio entre las barras.

Gráfico de barras vertical creado con la API de Google Charts
Otros gráficos de barras agrupadas se pueden crear usando los valores: "bhs", "bvs" y "bvo"


Insertar un gráfico de líneas


En el grafico donde se usan líneas se debe usar el parámetro chls para indicar el estilo con tres valores: (grosor, largo del dash, espacio)

Gráfico de líneas creado con la API de Google Charts
Otros gráficos de líneas se pueden crear usando los valores "ls" y "lxy".
Errores al tratar de crear un gráfico en una imagen

Son dos los errores más frecuentes:
✓ No deben existir espacios en la dirección.
✓ Los caracteres especiales como la letra ñ o los acentos se deben codificar en utf-8.

Insertar un gráfico de Google Charts usando Javascript


Los gráficos usando Javascript son la opción más avanzada y profesional.
Lucen mucho mejor, disponen de más opciones de personalización y son interactivos, aunque demoran más en cargar en conexiones lentas. Además no todos podemos insertar ni editar Javascript en nuestras páginas.
No obstante a continuación se puede ver el código para representar un gráfico, con los mismos datos de ejemplos anteriores.

Lee más información y accede a varios ejemplos en la página de ayuda de Google para desarrolladores: Galeria de ejemplos (en ingles)

¿Cómo insertar un gráfico de Google Charts en un blog de Blogger o WordPress?


Para insertar cualquiera de los gráficos como una imagen en un blog, solo se necesita en el editor usar la vista HTML.
Localiza el lugar exacto donde se desea mostrar y entonces pega la etiqueta IMG que contiene la dirección necesaria a Google Charts.

Obtener con la API de Google Charts el código QR de una página web


De forma algo similar a los métodos anteriores, podemos usar la API de Google Charts para obtener la imagen con el código QR de cualquier web, para escanearla con la cámara de un móvil y poderla cargar en el navegador de un dispositivo portable.
Código QR con la dirección de esta página web
Conoce como hacerlo y también el código necesario para poder mostrar de forma automática el código QR de todas las páginas de un blog o sitio web.
Como mostrar el código QR de cada página de un blog o sitio web

Otras alternativas para insertar gráficos en las páginas web
La API de Google Charts es extremadamente útil, pero no es la única opción para poder insertar gráficos en las páginas web.
Hay otra alternativa que es software libre, llamada Chart.js
Lee más información en otro artículo de nuestro sitio, observa ejemplos de tipos de gráficas y descarga un archivo con los códigos y el script necesario.
Como crear e insertar gráficos con Chart.js en páginas web

Páginas relacionadas



Sobre el autor:

Norfi Carrodeguas es el fundador y webmaster del sitio web Norfipc, creado en el año 2010. Norfi es un ingeniero informático y desarrollador web cubano. Con más de 14 años de experiencia en la publicación en internet, comparte su tiempo con su consultoría SEO. Más información sobre el autor.

Comparta esta página
Facebook
Twitter

Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
Inicio | Mapa del sitio | Buscar | Sobre mí