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 una instancia de DataTable y propagarla.
Contenido
- Cómo se representan los datos en un gráfico
- ¿Qué esquema de tabla usa mi gráfico?
- DataTables y DataViews
- Crea y propaga una DataTable
- 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 muestra una representación simplificada de una tabla de datos propagada de dos columnas:
índice: 0 |
índice: 1 tipo: número label: 'Horas por día' |
|---|---|
| 'Trabajo' | 11 |
| "Comer" | 2 |
| 'Viaje diario' | 2 |
| "Mirar TV" | 2 |
| "Sueño" | 7 |
Los datos se almacenan en las celdas a las que se hace referencia como (fila, columna), donde 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.
Aquí hay una lista más completa de los elementos y las propiedades compatibles 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, más un mapa opcional de pares de nombre/valor arbitrarios que puedes asignar. Actualmente, los gráficos no usan las propiedades a nivel de la tabla.
- Columnas: Cada columna admite un tipo de datos obligatorio, además de una etiqueta de string, un ID, un patrón y un mapa opcionales de propiedades de nombre/valor arbitrarios. La etiqueta es una cadena fácil de usar que se puede mostrar en el gráfico. 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 el código mediante un índice basado en cero o con el ID opcional. Consulta
DataTable.addColumn()para obtener una lista de los tipos de datos admitidos. - Filas: Una fila es un array de celdas, más un mapa 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, además de una versión opcional del valor que proporciones con formato de cadena. Por ejemplo, a una columna numérica se le podría 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 string y una columna de números, en la que cada fila describe una porción, y la primera columna es la etiqueta de porción y la segunda columna es el valor de la porción. Sin embargo, un diagrama de dispersión espera una tabla que conste 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. Lee la documentación de tu gráfico para saber qué formato de datos requiere.
DataTables y DataViews
Una tabla de datos del gráfico se representa en JavaScript con un objeto DataTable o un objeto DataView. En algunos casos, es posible que veas una versión literal de JavaScript o JSON de una DataTable en uso, 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 un ChartWrapper.
Se usa un DataTable para crear la tabla de datos original. Una 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 muestra una breve comparación de las dos clases:
| DataTable | DataView |
|---|---|
| Lectura/escritura | Solo lectura |
| Se pueden crear vacías 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 elemento DataTable existente y no consumen espacio. |
| Puede agregar, editar o borrar filas, columnas y datos, y todos los cambios son persistentes. | Puedes ordenar o filtrar filas sin modificar los datos subyacentes. Las filas y columnas se pueden ocultar y mostrar de forma repetida. |
| Se puede clonar | Puede mostrar una versión de DataTable de la vista. |
| Es datos de origen; no contiene referencias. | Es una referencia en vivo a un elemento 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 mediante la combinación o manipulación de otras columnas. |
| No hay filas ni columnas ocultas | Pueden ocultar o mostrar las columnas seleccionadas |
Crea y propaga una tabla de datos
Existen varias formas diferentes de crear y propagar una DataTable:
- Crea una DataTable nueva y, luego, llama a addColumn()/addRows()/addRow()/setCell()
- arrayToDataTable()
- Inicializador literal de JavaScript
- Envía una consulta sobre la fuente de datos
DataTable vacío + addColumn()/addRows()/addRow()/setCell()
Pasos:
- Crear una nueva instancia de
DataTable - Agregar columnas
- Agrega una o más filas, que se pueden completar con datos. Puedes agregar filas vacías y propagarlas más tarde. También puedes 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.
- Es adecuado para generar la tabla en el navegador y menos propenso a errores tipográficos que el método literal de JSON.
Desventajas:
- No es tan útil como compilar una cadena literal de JSON para pasar al constructor 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 cadenas literales de JSON con tablas más grandes (alrededor de más de 1,000 celdas).
Ejemplos:
A continuación, se presentan algunos ejemplos de cómo 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));
arrayToDataTable()
Esta función auxiliar crea y propaga un objeto DataTable con una sola llamada.
Ventajas:
- Es un código muy simple y legible que se ejecuta en el navegador.
- Puedes especificar explícitamente el tipo de datos de cada columna o dejar que Google Charts infiera 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. - Para permitir que Gráficos de Google infiera el tipo, usa una cadena para la etiqueta de la 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 la tabla y definir el esquema de la tabla y, opcionalmente, también los datos.
Ventajas:
- Es útil cuando se generan datos en tu servidor web.
- Procesa más rápido que otros métodos para tablas más grandes (alrededor de más de 1,000 celdas)
Desventajas:
- La sintaxis es difícil de entender y propensa a errores tipográficos.
- El código no es muy legible.
- Tentemente similar, pero no idéntico, a JSON.
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 DataTable. Este DataTable mostrado se puede copiar, modificar o copiar en un DataView al igual que cualquier otro.
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'});
}
dataTableToCsv()
La función auxiliar google.visualization.dataTableToCsv(data) muestra una cadena CSV con los datos de la tabla de datos.
La entrada a esta función puede ser DataTable o DataView.
Utiliza los valores con formato de las celdas. Se ignoran las etiquetas de columna.
Los caracteres especiales, como "," y "\n", se escapan con las reglas de escape de CSV estándar.
El siguiente código 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 de gráficos
- Sintaxis literal de JavaScript de DataTable
- Referencia de
DataTable - Referencia de
DataView - Referencia de
arrayToDataTable()