Tablas de datos y vistas de datos

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

  1. Cómo se representan los datos en un gráfico
  2. ¿Qué esquema de tabla usa mi gráfico?
  3. Tablas de datos y vistas de datos
  4. Cómo crear y propagar una tabla de datos
    1. Crear una nueva tabla de datos y, luego, llamar a addColumn()/addRows()/addRow()/setCell()
    2. arregloToDatosTabla()
    3. Inicializador literal de JavaScript
    4. Envía una consulta de fuente de datos
  5. dataTableToCsv().
  6. 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
type: string
etiqueta: 'Tarea'

 í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". Si se proporciona un valor con formato, un gráfico usará el valor real para los cálculos y la representación, pero podría mostrar el valor con formato cuando corresponda, por ejemplo, si el usuario se desplaza sobre un punto. Cada celda también tiene un mapa opcional de pares de nombre/valor arbitrarios.

¿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:

Tabla de datos vacía + addColumn()/addRows()/addRow()/setCell()

Pasos:

  1. Crea una nueva instancia de DataTable
  2. Agregar columnas
  3. 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.

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