En esta página, se analiza la representación de datos interna que usan los gráficos, las clases DataTable
y DataView
que se usan para pasar datos a un gráfico, y las diversas formas de crear instancias de una DataTable
y propagarla.
Contenido
- Cómo se representan los datos en un gráfico
- ¿Qué esquema de tabla usa mi gráfico?
- Tablas de datos y vistas de datos
- Cómo crear y propagar una tabla de datos
- dataTableToCsv().
- Más información
Cómo se representan los datos en un gráfico
Todos los gráficos almacenan sus datos en una tabla. A continuación, se incluye una representación simplificada de una tabla de datos de dos columnas propagada:
índice: 0 |
índice: 1 type: number label: 'Horas por día' |
---|---|
Trabajo | 11 |
"Comer" | 2 |
Viaje cotidiano | 2 |
Mirar TV | 2 |
Suspender | 7 |
Los datos se almacenan en celdas a las que se hace referencia como (fila, columna), en la que fila es un índice de fila basado en cero y columna es un índice de columna basado en cero o un ID único que puedes especificar.
Esta es una lista más completa de los elementos y propiedades admitidos de la tabla. Consulta el Formato del parámetro literal de JavaScript del constructor para obtener más detalles:
- Tabla: Es un array de columnas y filas, además de un mapa opcional de pares de nombre/valor arbitrarios que puedes asignar. Por el momento, los gráficos no usan propiedades a nivel de tabla.
- Columnas: Cada columna admite un tipo de datos obligatorio, además de una etiqueta de string opcional, un ID, un patrón y un mapa de propiedades arbitrarias de nombre o valor. La etiqueta es una string fácil de usar que el gráfico puede mostrar, el ID es un identificador opcional que se puede usar en lugar de un índice de columna. Se puede hacer referencia a una columna en código por índice basado en cero o por el ID opcional. Consulta
DataTable.addColumn()
para obtener una lista de los tipos de datos admitidos. - Filas: Una fila es un arreglo de celdas, más una asignación opcional de pares de nombre/valor arbitrarios que puedes asignar.
- Celdas: Cada celda es un objeto que contiene un valor real del tipo de columna, más una versión opcional con formato de string del valor que proporcionas. Por ejemplo, a una columna numérica se le puede asignar el valor 7 y el valor con formato "siete".
¿Qué esquema de tabla usa mi gráfico?
Los diferentes gráficos usan tablas en diferentes formatos: por ejemplo, un gráfico circular espera una tabla de dos columnas con una columna de strings y una columna numérica, en la que cada fila describe una porción y la primera columna es la etiqueta de la porción, y la segunda, el valor de la porción. Sin embargo, en un gráfico de dispersión se espera una tabla que consta de dos columnas numéricas, en la que cada fila es un punto, y las dos columnas son los valores X e Y del punto. Consulta la documentación de tu gráfico para conocer qué formato de datos requiere.
Tablas de datos y vistas de datos
En JavaScript, una tabla de datos de gráficos se representa mediante un objeto DataTable
o un objeto DataView
. En algunos casos, es posible que veas un literal de JavaScript o una versión JSON de una DataTable que se usa, por ejemplo, cuando una fuente de datos de herramientas de gráficos envía datos a través de Internet o como un posible valor de entrada para una ChartWrapper
.
Se usa una DataTable
para crear la tabla de datos original. Un DataView
es una clase de conveniencia que proporciona una vista de solo lectura de un DataTable
, con métodos para ocultar o reordenar filas o columnas rápidamente sin modificar los datos originales vinculados. A continuación, se incluye una breve comparación de las dos clases:
Tabla de datos | Vista de datos |
---|---|
Lectura/escritura | Solo lectura |
Se puede crear vacío y, luego, propagarse | Es una referencia a un DataTable existente. No se puede propagar desde cero. Se debe crear una instancia con una referencia a un DataTable existente. |
Los datos ocupan espacio de almacenamiento. | Los datos son una referencia a un DataTable existente y no consumen espacio. |
Puede agregar, editar o borrar filas, columnas y datos, y todos los cambios son persistentes. | Puede ordenar o filtrar las filas sin modificar los datos subyacentes. Las filas y las columnas se pueden ocultar y revelar varias veces. |
Se puede clonar | Puede mostrar una versión de DataTable de la vista |
Son datos fuente; no contienen referencias | Una referencia en vivo a un DataTable ; cualquier cambio en los datos de DataTable se refleja de inmediato en la vista. |
Se puede pasar a un gráfico como fuente de datos | Se puede pasar a un gráfico como fuente de datos |
No admite columnas calculadas. | Admite columnas calculadas, que son columnas con un valor calculado sobre la marcha, ya que combinan o manipulan otras columnas. |
Sin fila o columna oculta | Puede ocultar o mostrar las columnas seleccionadas |
Crea y propaga una tabla de datos
Existen varias formas de crear y propagar una tabla de datos:
- Crear una nueva tabla de datos y, luego, llamar a addColumn()/addRows()/addRow()/setCell()
- arregloToDatosTabla()
- Inicializador literal de JavaScript
- Envía una consulta de fuente de datos
Tabla de datos vacía + addColumn()/addRows()/addRow()/setCell()
Pasos:
- Crea una nueva instancia de
DataTable
- Agregar columnas
- Agrega una o más filas con datos propagados de manera opcional. Puedes agregar filas vacías y propagarlas más adelante. También puede agregar o quitar filas adicionales o editar los valores de las celdas de forma individual.
Ventajas:
- Puedes especificar el tipo de datos y la etiqueta de cada columna.
- Ideal para generar la tabla en el navegador y menos propensa a los errores tipográficos que el método literal de JSON.
Desventajas:
- No es tan útil como compilar una string literal de JSON para pasar a un constructor de DataTable cuando se genera la página de manera programática en un servidor web.
- Depende de la velocidad del navegador y puede ser más lenta que las strings literales JSON con tablas más grandes (más de 1,000 celdas).
Ejemplos:
Aquí le presentamos algunos ejemplos para crear la misma tabla de datos con diferentes variaciones de esta técnica:
// ------- Version 1------------ // Add rows + data at the same time // ----------------------------- var data = new google.visualization.DataTable(); // Declare columns data.addColumn('string', 'Employee Name'); data.addColumn('datetime', 'Hire Date'); // Add data. data.addRows([ ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values. ['Bob', new Date(2007,5,1)], // More typically this would be done using a ['Alice', new Date(2006,7,16)], // formatter. ['Frank', new Date(2007,11,28)], ['Floyd', new Date(2005,3,13)], ['Fritz', new Date(2011,6,1)] ]); // ------- Version 2------------ // Add empty rows, then populate // ----------------------------- var data = new google.visualization.DataTable(); // Add columns data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); // Add empty rows data.addRows(6); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'}); data.setCell(1, 0, 'Bob'); data.setCell(1, 1, new Date(2007, 5, 1)); data.setCell(2, 0, 'Alice'); data.setCell(2, 1, new Date(2006, 7, 16)); data.setCell(3, 0, 'Frank'); data.setCell(3, 1, new Date(2007, 11, 28)); data.setCell(4, 0, 'Floyd'); data.setCell(4, 1, new Date(2005, 3, 13)); data.setCell(5, 0, 'Fritz'); data.setCell(5, 1, new Date(2007, 9, 2));
MatrizDeDatosDeTablas()
Esta función auxiliar crea y propaga un elemento DataTable
mediante una sola llamada.
Ventajas:
- Es un código muy simple y legible que se ejecuta en el navegador.
- Puedes especificar de forma explícita el tipo de datos de cada columna o permitir que los gráficos de Google infieran el tipo a partir de los datos pasados.
- Para especificar de forma explícita el tipo de datos de una columna, especifica un objeto en la fila del encabezado con la propiedad
type
. - A fin de que los gráficos de Google infieran el tipo, usa una string para la etiqueta de columna.
- Para especificar de forma explícita el tipo de datos de una columna, especifica un objeto en la fila del encabezado con la propiedad
Ejemplos:
var data = google.visualization.arrayToDataTable([ ['Employee Name', 'Salary'], ['Mike', {v:22500, f:'22,500'}], // Format as "22,500". ['Bob', 35000], ['Alice', 44000], ['Frank', 27000], ['Floyd', 92000], ['Fritz', 18500] ], false); // 'false' means that the first row contains labels, not data.
var data = google.visualization.arrayToDataTable([ [ {label: 'Year', id: 'year'}, {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type. {label: 'Expenses', id: 'Expenses', type: 'number'} ], ['2014', 1000, 400], ['2015', 1170, 460], ['2016', 660, 1120], ['2017', 1030, 540]]);
Inicializador literal de JavaScript
Puedes pasar un objeto literal de JavaScript al constructor de tu tabla y definir el esquema de la tabla y, opcionalmente, los datos.
Ventajas:
- Es útil para generar datos en el servidor web.
- Se procesa más rápido que otros métodos para tablas más grandes (alrededor de 1,000 celdas)
Desventajas:
- La sintaxis es difícil de usar correctamente y tiene errores ortográficos.
- El código no es muy legible.
- Temporalmente similar a JSON, pero no idéntico.
Ejemplo:
var data = new google.visualization.DataTable( { cols: [{id: 'task', label: 'Employee Name', type: 'string'}, {id: 'startDate', label: 'Start Date', type: 'date'}], rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]}, {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]}, {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]}, {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]}, {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]}, {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]} ] } )
Envía una consulta de fuente de datos
Cuando envías una consulta a una fuente de datos de herramientas de gráficos, una respuesta exitosa es una instancia de tabla de datos. Este DataTable que se muestra se puede copiar, modificar o copiar en un DataView de la misma manera que cualquier otro DataTable.
function drawVisualization() { var query = new google.visualization.Query( 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1'); // Apply query language statement. query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D'); // Send the query with a callback function. query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); visualization = new google.visualization.LineChart(document.getElementById('visualization')); visualization.draw(data, {legend: 'bottom'}); }
datosDeTablaToCsv()
La función auxiliar google.visualization.dataTableToCsv(
datos)
muestra una string CSV con los datos de la tabla de datos.
La entrada a esta función puede ser una DataTable o una DataView.
Usa los valores con formato de las celdas. Se ignoran las etiquetas de columnas.
Los caracteres especiales como ",
" y "\n
" se escapan con las reglas de escape de CSV estándar.
En el siguiente código, se mostrará Ramanujan,1729
Gauss,5050
en la Consola de JavaScript del navegador:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Name', 'Number'], ['Ramanujan', 1729], ['Gauss', 5050] ]); var csv = google.visualization.dataTableToCsv(data); console.log(csv); } </script> </head> </html>
Más información
- Consulta una fuente de datos de herramientas para gráficos
- Sintaxis literal de JavaScript de DataTable
- Referencia de
DataTable
- Referencia de
DataView
- Referencia de
arrayToDataTable()