2 HVID sum up Google Charts

Ejemplos de Varias Visualizaciones

Gráfico Circular

• Es posible encontrar un ejemplo sencillo de gráfico circular en la guía de inicio rápido de Google.
• Se requiere el código completo para crear un gráfico circular.
• Para trabajar con Google Charts, es necesario incorporar la librería en HTML.
• Hay una línea para cargar el cargador de la librería, que solo necesita ejecutarse una vez.
• Es importante cargar la librería de gráficos que se va a utilizar; por ejemplo, corechart incluye gráficos como bar, column, line, area, stepped area, bubble, pie, donut, combo, candlestick, histogram y scatter.
• En packages se define un array, esto permite cargar más un paquete a la vez.
• La función drawChart se llama una vez que se terminan de cargar los paquetes corechart.
• La función drawChart crea los datos, añade columnas con nombres y tipos de valores, y añade filas con los valores.
• DataTable es una estructura de datos para JavaScript, similar a un array de arrays en Java o C.
• Las opciones del gráfico, como el título y las dimensiones, se definen después de los datos.
• Los gráficos circulares ofrecen más opciones que otros tipos de gráficos.
• Hay opciones para modificar los colores y las dimensiones del gráfico.
• El código instancia el gráfico y especifica dónde debe dibujarse.
• La función chart.draw se utiliza para dibujar el gráfico con los datos y las opciones definidas.

Gráfico de Barras Horizontales y de Columnas

• Es sencillo cambiar el tipo de gráfico, basta con especificar el tipo de gráfico deseado en el código.
• En el código, se especifica el tipo de gráfico como BarChart para un gráfico de barras horizontales.
• Para un gráfico de columnas, se especifica el tipo de gráfico como ColumnChart.

Gráfico Geográfico (Geo Chart)

• La librería geochart permite visualizar un país, continente o región.
• Se carga la librería geochart en lugar de la librería corechart.
• Se cambia la estructura de datos para definir las localizaciones.

Conexión con Hojas de Cálculo de Google y Archivos CSV

Hojas de Cálculo de Google

• Las visualizaciones recurren a leer los datos de fuentes de datos externas.
• Conectar los gráficos a hojas de cálculo existentes evita la modificación del código JavaScript cada vez que se modifican los datos.
• Se requiere el código completo para conectar con Google Spreadsheets.
• La función drawChart ha cambiado para realizar una consulta a la hoja de cálculo de Google.
• Es necesario asignar permisos de lectura Público en la web o Cualquiera con el enlace para la hoja de datos.

Pasos para acceder a datos de Google Spredsheet:

• Disponer de la URL completa del documento.
• Llamar a la función google.visualization.Query con la URL.
• Especificar los parámetros headers = N y gid=N.
• Headers indica cuantas filas son cabecera, las cuales se deben excluir como valores.
• Gid se refiere a la hoja a utilizar.
• El resultado se pasa a la función handleQueryResponse, cuya función es doble gestionar el error y dibujar.
• El error en la petición del documento: Se comprueba la URL.
• Dibujar la gráfica:
  • Asignar los datos al gráfico a través de la variable response.
  • Definir opciones al llamar la función draw.
• La función draw() dibuja la visualización de la gráfica y tiene dos parámetros:
  • data: alberga los datos a usar para dibujar la gráfica.
  • options: mapa con duplas de valores en formato nombre y valor.

Archivos CSV

• Los archivos CSV (valores separados por comas) son un tipo de documento de texto utilizado para representar datos en forma de tabla.
• La principal característica de los archivos CSV es que las columnas se separan por comas, y las filas por saltos de línea.
• Los archivos CSV se utilizan normalmente para importar o exportar información de bases de datos.
• Se utiliza jQuery, una librería de código abierto de JavaScript, para el tratamiento del fichero CSV.
• El código adaptado incluye el uso de $.get es un formato utilizado en jQuery creando una funcion cuyo codigo está dentro:
  • Cuando vemos el símbolo $, es equivalente al document de JavaScript estándar.
  • Get realiza una petición http a la URL indicada.
• La librería de jQuery para ficheros CSV transforma el fichero CSV a un formato que es comprensible para la librería de Google Charts mediante una llamada a csv.toArrays.
• El resultado es similar al obtenido desde Google Spreadsheets, pero en este caso desde un fichero en formato CSV.

Gestionar Eventos

• Google Charts genera eventos que se pueden tratar y gestionar, disparados por acciones de usuario como un clic en una gráfica.
• Se puede registrar un método JavaScript (función) que se llama cuando ocurren dichos eventos e incluso acceder a la información asociada a los mismos.
• Cada gráfica y cada interacción definen sus propios eventos y la información asociada.
• La función google.visualization.events.addListener es la que se utiliza para trabajar con eventos.
• Lo que se crea con esta función es una entidad que «escuchará» los eventos de las visualizaciones.
• Se crea un Listener que escucha los eventos de una table (primera variable de la función) con evenentos de tipo sort.
• El Listener ordena objeto datos, data.sort y redibuja gráfico de barras, chart.draw.