Crear gráficos desde un spreadsheet de Google Docs

Introducción

Manipular información en tiempos modernos requiere de herramientas modernas. En esta oportunidad nuestro desafío será integrar en nuestro sitio web, un grafico que pueda visualizar datos, extrayendo la información desde un documento spreadsheet de nuestro repositorio en Google Docs.


Forma gráfica

El HTML y Js que creamos interactua con la jsapi y extrae los datos de nuestro documento en Google Docs, para realizar la renderización del contenido donde el desarrollador tenga como requerimiento.

 
Que utilizamos para el desarrollo

Utilizamos Google Visualization API, particularmente la clase ChartWrapper para crear con HTML y Javascript el objetivo expuesto.

//Generamos la instancia del grafico que obtendrá los datos desde el spreadsheet var grafico = new google.visualization.ChartWrapper({ //Colocamos el elemento importante, que es nuestra spreadsheet de Google Doc //Luego tenemos las opciones del tipo de grafico y finalmente el contenedor donde graficaremos. dataSourceUrl: 'Documento Google Doc', chartType: 'PieChart', containerId: 'visualization' }); //Finalmente ejecutamos el método de dibujo grafico.draw(); }

Codigo Central

Como lo desarrollo en la cloud

En esta oportunidad, he utilizado un entorno de desarrollo completamente en la nube llamado eXo Cloud IDE y en algunos segundos tener la posibilidad de confeccionar esta simple aplicación de manipulación de información utilizando como fuente de datos un spreadsheet de Google Doc.

Código disponible en:

GitHub - LookThisCodeGoogle API 

Tecnología

- Google Visualization API
- eXo Cloud IDE, Chrome browser
- GitHub para el código fuente