Editor de gráficos web con hoja de cálculo en google drive

Después de un largo tiempo ausente me anime a publicar algo así que al actualizarme un poco en visualization encontré un componente gráfico muy útil que se llama chart editor, para visitar la página y descargar el código original en code playground click aquí. Así que me puse a modificar un poco el código del editor original lo cual iré comentando en este artículo.

Primero debemos entender como es que genera los diferentes tipos de gráficos este asistente en web, por lo general podemos usar un rango seleccionado de celdas de una hoja de calculo alojada en google drive, debemos tener en cuenta que tal hoja de calculo debe estar en modo compartido público de los contrario no podrá cargarse la data, hay otro modo de usar este generador de gráficos web al establece un data table haciendo uso de JSON lo cual publicaré en otro artículo.

Entonces manos a la obra, primero debemos crear una hoja de calculo en drive y compartirla como pública de la siguiente manera:

Después click en el botón compartir y definir como público.

La dirección pública generada por drive de mi hoja de cálculo por ejemplo es:

https://docs.google.com/spreadsheet/ccc?key=0AplEIWl3vfe3dEk2TkJrdjBESkpkcHFJRV9lLUJ0bmc&usp=sharing

Luego modificamos el código del chart editor en el campo denominado dataSourceUrl y establecemos el rango de celdas en ese campo

Primero debemos cambiar el parámetro llamado key por el parámetro key de la dirección publica generada por drive de nuestra propia hoja de calculo, también el parámetro range en mi caso puse B3:C5 pues es el intervalo en el que se encuentra la data en la hoja de calculo (notar el intervalo en la segunda imagen de este articulo que muestra el contenido de la hoja de calculo).

Finalmente probamos el código abriendo el archivo html modificado en el navegador

Para cambiar de tipo de gráfico solo deben darle click en la opción abrir chart wizard y si quieren obtener el código estático para embeberlo en cualquier pagina denle click en obtener embed y copian el código generado en el text area de la parte inferior.

Vale resaltar que modifique un poco el código original del chart editor de google code playground para que me generase un código embebido y así poder usarlo en todos lados sin necesidad de conexión a internet, si alguien encuentra otra forma de hacerlo por favor compartirlo. Finalmente les dejo mi código modificado del chart editor a continuación: Ver/Descargar Código HTML.