2 Google Chart: Introducción y visualizaciones
20 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

¿Qué es Google Chart Library?

Es la librería de visualizaciones utilizada por Google Spreadsheets.

¿Qué aspectos se centrarán en el texto?

  • Conectar con datos externos.
  • Eventos.
  • Todas las anteriores. (correct)
  • Ejemplos de visualizaciones.

¿Qué tipo de datos utiliza DataTable?

DataTable es una estructura de datos con la que trabaja JavaScript.

JavaScript se ejecuta de forma secuencial.

<p>True (A)</p> Signup and view all the answers

¿Qué tipos de paquetes de gráficas incluye la librería corechart?

<p>Todas las anteriores. (A)</p> Signup and view all the answers

¿Qué permite mostrar la librería geochart?

<p>La librería geochart permite para mostrar un país, un continente o una región.</p> Signup and view all the answers

¿Qué permisos debe tener la hoja de datos para utilizar Google Spreadsheet como fuente de datos?

<p>B y C son correctas. (A)</p> Signup and view all the answers

¿Con qué se separan las columnas y las filas en los archivos CSV?

<p>Las columnas se separan por comas y las filas por saltos de línea. (C)</p> Signup and view all the answers

¿Qué ocurre cuando se hace clic en una gráfica?

<p>Se disparan eventos que se pueden tratar y gestionar.</p> Signup and view all the answers

¿Qué es lo que creamos con la función google.visualization.events.addListener?

<p>Una entidad que &lt;&lt;escuchará&gt;&gt; los eventos de las visualizaciones.</p> Signup and view all the answers

Google.visualization.DataTable necesita ser instanciada con un new para crear un objeto:

<p>Sí (C)</p> Signup and view all the answers

¿Qué función tiene loader.js?

<p>Carga el propio cargador de librerías. (C)</p> Signup and view all the answers

La primera variable que recibe la función $.get de JQuery es:

<p>La URL a la que se dirige la petición. (A)</p> Signup and view all the answers

data.setCell añade una columna a nuestra tabla de datos:

<p>No. (D)</p> Signup and view all the answers

Existen librerías en JQuery que nos facilitan la transformación de archivos CSV a datos comprensibles por la librería de Google Charts:

<p>Sí. (B)</p> Signup and view all the answers

google.visualization.BarChart nos dibujará bar charts verticales:

<p>Sí, admite tanto barras verticales como horizontales. (C)</p> Signup and view all the answers

¿Qué hace el código cuando contiene response.isError()?

<p>Comprueba si ha habido algún error con la petición http. (C)</p> Signup and view all the answers

google.visualization.events.addListener se utiliza para escuchar eventos que generan las visualizaciones:

<p>Sí. (D)</p> Signup and view all the answers

Todas las visualizaciones de Google Chart generan los mismos tipos de eventos:

<p>No. (C)</p> Signup and view all the answers

¿Incluiremos el paquete core (packages:['geochart']) para visualizar un mapa?

<p>Sí, para mostrar un país, un continente o una región. (B)</p> Signup and view all the answers

Flashcards

¿Qué es Google Chart Library?

Librería de visualizaciones utilizada por Google Spreadsheets.

¿Qué son las visualizaciones?

Representación alternativa de la información.

Primer aspecto clave en Google Charts

Aprender a través de ejemplos existentes en Internet.

Segundo aspecto clave Google Charts

Evitar modificar el código cada vez que cambian los valores.

Signup and view all the flashcards

Tercer aspecto clave Google Charts

Conectar visualizaciones con otras herramientas, interacciones.

Signup and view all the flashcards

Identificador Sarah_chart_div

Sección dentro del HTML donde se carga la gráfica.

Signup and view all the flashcards

google.charts.load

Carga el 'cargador' de la librería de Google Charts.

Signup and view all the flashcards

Librería corechart

Paquete de gráficas tipo bar, column, line, pie...

Signup and view all the flashcards

google.charts.setOnLoadCallback(drawChart)

Llama a la función que dibuja la gráfica solo cuando la librería está cargada.

Signup and view all the flashcards

google.visualization.DataTable

Estructura de datos con la que trabaja JavaScript para las gráficas.

Signup and view all the flashcards

data.addColumn

Añade una columna a la DataTable, especificando el tipo de datos.

Signup and view all the flashcards

data.addRows

Añade filas con los valores a la DataTable.

Signup and view all the flashcards

Opciones chart

Define las opciones del gráfico, como título y dimensiones.

Signup and view all the flashcards

chart.draw(data, options)

Instancia el tipo de gráfico y lo dibuja en el HTML.

Signup and view all the flashcards

Cambio de tipo de gráfica

Especifica el tipo de gráfico deseado.

Signup and view all the flashcards

Librería geochart

Librería para mostrar un país, continente o región.

Signup and view all the flashcards

Datos externos en visualizaciones

Los datos no están en el código, sino en fuentes externas.

Signup and view all the flashcards

Google Spreadsheets

Permite conectar gráficos a hojas de cálculo existentes.

Signup and view all the flashcards

google.visualization.Query

Función para utilizar Google Spreadsheet como fuente de datos.

Signup and view all the flashcards

handleQueryResponse

Gestiona errores en la petición del documento y dibuja la gráfica.

Signup and view all the flashcards

Parámetro data en draw()

Alberga los datos a usar para dibujar la gráfica.

Signup and view all the flashcards

Parámetro options en draw()

Mapa con pares de valores en formato nombre y valor.

Signup and view all the flashcards

¿Qué es un archivo CSV?

Documento de texto para representar datos en forma de tabla, columnas separadas por comas.

Signup and view all the flashcards

¿Qué es jQuery?

Librería de código abierto de JavaScript para el tratamiento del fichero CSV.

Signup and view all the flashcards

Función $.get de jQuery

Petición HTTP a la URL indicada.

Signup and view all the flashcards

csv.toArrays

Transforma el fichero CSV a un formato comprensible para Google Charts.

Signup and view all the flashcards

Eventos en Google Charts

Google Charts genera eventos que se pueden tratar y gestionar.

Signup and view all the flashcards

¿Cuándo se disparan los eventos?

Se suelen disparar por acciones del usuario, como al hacer clic en una gráfica.

Signup and view all the flashcards

google.visualization.events.addListener

Función para escuchar eventos de las visualizaciones.

Signup and view all the flashcards

data.sort y chart.draw

Ordena el objeto data y redibuja el gráfico.

Signup and view all the flashcards

Study Notes

Google Chart: Introducción y visualizaciones principales

  • Google Chart Library es la librería de visualizaciones utilizada por Google Spreadsheets.
  • Google usa esta funcionalidad en su hoja de cálculo, permitiendo infinitas posibilidades.
  • Las visualizaciones son una representación alternativa de información.
  • Tres aspectos principales a considerar: aprender a través de ejemplos, conectar con datos externos y gestionar eventos.

Ejemplos de visualizaciones

  • Se puede encontrar un ejemplo de pie chart fácilmente en Quickstart de Google.
  • El código completo del pie chart incluye HTML, la carga de la librería de Google Chart y la definición de datos y opciones.
  • La primera línea del ejemplo carga el "cargador" o loader de la librería.
  • La librería corechart incluye los paquetes de gráficas tipo bar, column, line, area, stepped area, bubble, pie, donut, combo, candlestick, histogram y scatter
  • Packages es plural, pudiendo cargar más de un paquete a la vez, como corechart, table y sankey.
  • Hay una línea que llama a la función drawChart solo cuando se termine de cargar los paquetes de corechart
  • JavaScript evita que se ejecute la función sin estar cargada la librería.
  • Inicialmente se deben crear los datos.
  • DataTable es similar a un array de arrays en Java o C.
  • Se pueden añadir filas con los valores, de una vez o una por una.
  • Después, se definen las opciones del gráfico, como título y dimensiones.
  • Se pueden modificar los colores y dimensiones.
  • Se instancia el gráfico (pie chart) y se indica dónde debe ser dibujado.
  • Al dibujar, chart.draw envía los valores data y las opciones definidas.
  • Para un horizontal bar chart, se especifica el tipo gráfico en el código como BarChart
  • Para un column bar chart, se especifica el tipo ColumnChart en el código.
  • Geo chart permite mostrar un país, continente o región.
  • En lugar de corechart, para usar geochart se debe cargar la librería geochart.
  • Se debe cambiar la estructura de datos para definir localizaciones.

Conexión con Google Spreadsheets y archivos CSV

  • Los datos no tienen que estar incrustados en el código fuente .html.
  • Las visualizaciones leen datos de fuentes de datos externas.
  • Hay un enlace con el proceso para conectar los gráficos a hojas de cálculo existentes.
  • Es necesario asignar permisos de lectura Público en la web o Cualquiera con el enlace a la hoja de datos.
  • Adicionalmente se necesita la URL completa del documento, llamar a la función google.visualization.Query y especificar los parámetros headers = N y gid=N.
  • Headers indica cuántas filas son cabecera, excluyéndolas como datos.
  • Gid se refiere a la hoja a utilizar si el documento tiene varias hojas.
  • El get realiza una petición http a la URL indicada.
  • csv.toArrays transforma el fichero CSV a un formato comprensible para la librería de Google Charts.
  • El resultado es el mismo que si se obtuviera desde Google Spreadsheets, pero con un fichero en formato CSV.

Gestión de eventos

  • Google Charts genera eventos que pueden tratarse y gestionarse, como un clic en una gráfica.
  • Se registra un método JavaScript que se llama cuando ocurren eventos, accediendo a la información asociada.
  • Accede a documentación con más información sobre eventos.
  • Se puede interactuar entre dos visualizaciones.
  • google.visualization.events.addListener permite trabajar con eventos.
  • Esta función crea una entidad que "escuchará" los eventos de las visualizaciones.
  • Se crea un listener para el objeto table que escucha el evento "sort".
  • Cuando un usuario ordena la tabla, el Listener ordena el objeto data con la función data.sort y redibuja el bar chart usando chart.draw.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

Description

La librería Google Chart es utilizada por Google Spreadsheets. Permite la representación alternativa de información. Tres aspectos principales son aprender a través de ejemplos, conectar con datos externos y gestionar eventos.

More Like This

Use Quizgecko on...
Browser
Open
Browser
Browser