Tema 02 — Google Chart. Introducción y principales visualizaciones

🎧 Narración del Tema 02 (ElevenLabs Matilda)

Voz generada por IA (ElevenLabs Matilda) basada en la guía de estudio narrada. Tu celular puede reproducir este audio mientras lees, o mientras haces otras cosas.

TL;DR: Google Chart permite crear visualizaciones interactivas en JavaScript, conectarlas a datos externos y prepararlas para responder a eventos.

Puntos clave:

Google Chart Library es la librería de visualización usada por Google Spreadsheets y permite representar información de forma alternativa mediante gráficos.
El tema tiene una orientación práctica: se aprende copiando, ejecutando y modificando ejemplos en HTML y JavaScript.
Un gráfico básico requiere cargar la librería, definir una función de dibujo, crear una tabla de datos, configurar opciones y llamar al método draw.
Cambiar de visualización puede ser tan simple como sustituir PieChart por BarChart, ColumnChart o GeoChart, siempre que se cargue el paquete adecuado.
Los datos no deben estar necesariamente incrustados en el código: pueden leerse desde Google Spreadsheets para evitar modificar el HTML cada vez que cambien los valores.
Al conectar con una hoja de cálculo, la hoja debe tener permisos de lectura adecuados y el código debe gestionar posibles errores de consulta.
Los archivos CSV son otra fuente externa habitual, especialmente para importar o exportar datos tabulares desde bases de datos.
El uso de colores, gradientes o efectos 3D debe evaluarse con criterio visual, porque puede dificultar la interpretación de la información.

Términos técnicos clave: Google Chart Library, Google Spreadsheets, JavaScript, HTML, loader.js, corechart, DataTable, array, callback, PieChart, GeoChart, CSV

Fórmulas, procesos o ejemplos relevantes:

Proceso básico para crear un gráfico con Google Chart:
1. Crear una sección HTML con un identificador donde se dibujará la visualización.
2. Cargar https://www.gstatic.com/charts/loader.js.
3. Cargar el paquete necesario, por ejemplo corechart.
4. Usar setOnLoadCallback(drawChart) para esperar a que la librería esté lista.
5. Crear los datos con DataTable, addColumn y addRows.
6. Definir opciones como título, ancho, alto o colores.
7. Instanciar el tipo de gráfico y ejecutar chart.draw(data, options).
Ejemplo de datos del pie chart:
- Mushrooms: 1
- Onions: 1
- Olives: 2
- Zucchini: 2
- Pepperoni: 1
Proceso para conectar con Google Spreadsheets:
1. Dar permisos de lectura a la hoja: pública en la web o accesible con enlace.
2. Obtener la URL completa del documento.
3. Crear una consulta con google.visualization.Query.
4. Enviar la consulta a una función de respuesta.
5. Comprobar errores con response.isError().
6. Obtener los datos con response.getDataTable().
7. Dibujar la visualización con chart.draw.
Proceso para usar CSV:
1. Obtener el archivo CSV desde una URL.
2. Transformarlo en array con jQuery y jquery.csv.
3. Convertir el array en DataTable.
4. Dibujar la gráfica correspondiente.

Resumen narrativo

El Tema 2 introduce Google Chart como una herramienta práctica para construir visualizaciones web. La idea central es que una visualización no es solo un adorno gráfico, sino una forma alternativa de representar información. Desde esa perspectiva, Google Chart aparece como una librería flexible, integrada en el ecosistema de Google Spreadsheets y útil para escenarios que pueden ir desde ejercicios simples hasta aplicaciones de analítica en tiempo real.

El aprendizaje se plantea de forma aplicada. El primer ejemplo es un gráfico de sectores sobre cuánta pizza comió Sarah, tomado del Quickstart de Google. Aunque el caso es sencillo, sirve para entender la estructura mínima de trabajo: una página HTML, una sección donde insertar el gráfico, la carga de la librería, una función drawChart, una tabla de datos y unas opciones de visualización.

Una parte importante del tema es separar las piezas del código. El HTML reserva el espacio donde se dibujará la gráfica, mientras que JavaScript carga los paquetes necesarios y controla cuándo debe ejecutarse la función de dibujo. Esta espera es clave porque JavaScript se ejecuta secuencialmente: si se intenta dibujar antes de que la librería esté cargada, el gráfico fallará.

Una vez comprendido el pie chart, el tema muestra que cambiar de visualización puede ser relativamente sencillo. Para pasar a un gráfico de barras horizontal o de columnas, se modifica el tipo de gráfico instanciado. Para un mapa geográfico, en cambio, hay que cargar el paquete geochart y adaptar la estructura de datos para representar países o regiones con valores asociados.

Después, el tema da un paso importante: sacar los datos del código. Incrustar valores directamente en el HTML puede servir para aprender, pero no es práctico si los datos cambian. Por eso se explica cómo conectar Google Chart con Google Spreadsheets, usando una consulta a una hoja con permisos de lectura y una función que gestiona tanto la respuesta correcta como los errores posibles.

Finalmente, se introduce el uso de archivos CSV como otra fuente externa. Los CSV son documentos de texto con datos tabulares, muy utilizados para importar y exportar información desde bases de datos. En el ejemplo del tema se recurre a jQuery y a una librería para convertir el CSV en una estructura que Google Chart pueda transformar en una visualización.

Para profundizar

Revisar el Quickstart oficial de Google Chart usado para el ejemplo del pie chart.
Explorar la galería de visualizaciones de Google Chart para comparar tipos de gráficos disponibles.
Leer la documentación de carga de paquetes para entender cuándo usar corechart, geochart, table o sankey.
Practicar la conexión con Google Spreadsheets modificando permisos, URL y hoja seleccionada.
Probar variantes de opciones visuales, como colores, dimensiones y 3D, evaluando si mejoran o dificultan la lectura.