Adquisición y representación de datos con Hojas de Cálculo de Google
Pablo Felip (@pfelipm) · 19 octubre 2019Publicación en soportes web
Publicar o compartir · Gráficos interactivos o como imagen · Uso de JavaScript
Publicación de hojas de cálculo, pestañas o gráficos independientes
- Al publicar se obtiene un URL o código HTML de inserción que puede insertarse en cualquier soporte web que admita elementos enlazados o incrustados.
- No requiere que la HdC esté compartida, se genera versión pública independiente que refresca cambios periódicamente (o no, dependiendo de ajuste). Visualización sensible a caché del navegador.
- Es posible compartir granularmente determinadas hojas o gráficos, manteniendo el resto privado.
En Google Sites podemos simplemente insertar la hoja de cálculo o gráficos
- Se deben ajustar permisos / visibilidad de la hoja de cálculo en su totalidad para garantizar su accesibilidad por los usuarios del Site.
- Si se inserta una HdC es posible escoger una pestaña predeterminada, pero no limitar el acceso al resto.
Inserción de hoja de cálculo completa
Inserción de gráfico de hoja de cálculo
El diablo 😈 está en los detalles
- Las hojas de cálculo incrustadas no son editables (para los editores, claro). Lógicamente, las tablas dinámicas tampoco son manipulables.
- El ajustes de tamaño de las HdC incrustadas no es bueno. El de las imágenes se comporta mejor.
- Errores de presentación visual en tablas, especialmente por lo que hace a bordes de elementos, tipografías y orientación del texto dentro de celdas.
- Algunas tipografías, especialmente subtipos, no se visualizan correctamente.
- En ocasiones aparecen barras de desplazamiento inoportunas.
- Elementos interactivos como los desplegables de celda (validación) y controles de filtro no funcionan. Los enlaces e indicaciones flotantes en gráficos sí lo hacen, en cambio.
- Los gráficos se pueden publicar como elementos interactivos o como imagen, en el segundo caso preservan correctamente su aspecto pero pierden las indicaciones flotantes.
- A menudo FPE (fenómenos paranormales espúreos), especialmente en hojas de cálculo muy pesadas, que muestran valores inconsistentes en hojas o gráficos publicados. Se recomienda en esos casos llevar la información necesaria a otra hoja de cálculo más sencilla (IMPORTRANGE) y realizar la publicación desde ella.
Gráfico insertado como elemento interactivo, la tipografía no se ha preservado pero aparecen tips flotantes al colocar el ratón sobre los puntos representados
Gráfico insertado como imagen, no hay tips flotantes, a cambio la tipografía se ha respestado
Ahora una gráfico de tipo tabla, como elemento interactivo...
...y aquí como imagen, en este caso pierde todo el sentido dado que no es posible accionar los controles de paginación
Algunos problemillas visuales asociados a la incrustación de hojas de cálculo
Un poco de magia 🐇🎩 con JavaScript
- Utilizando JavaScript en el código HTML de incrustación se pueden conseguir cosas interesantes, por ejemplo que el gráfico se actualice sin recargar la página o que alternen varios en secuencia de manera automática.
- Esta técnica se puede extender a cualquier elemento incrustado mediante HTML, por ejemplo a un informe de Google Data Studio, como aquí (avance automático de las páginas del informe) o aquí (controles en barra inferior desactivados).
Una secuencia automática de gráficos con auto refresco procedentes de hoja de cálculo insertados como elementos interactivos (sí, JavaScript mola)
Código (no demasiado limpio) HTML + CSS + JS necesario para el pase de gráficos automático
¡La incrustación HTML de elementos de HdC es mejorable!
Eso en ocasiones nos hace huir hacia otras herramientas...
☝️ ¡Su turno, señoras y caballeros! ☝️
Crea un Site de prueba y trata de incrustar elementos de la hoja de cálculo H03 Visualización de diferentes maneras. Observa el resultado.
