Referencia de la API de visualización de Google

En esta página, se enumeran los objetos expuestos por la API de visualización de Google y los métodos estándar expuestos por todas las visualizaciones.

Nota: El espacio de nombres de la API de visualización de Google es google.visualization.*.

Nota sobre los arreglos

Algunos navegadores no controlan correctamente las comas finales en los arreglos de JavaScript, así que no las uses. Basta con valores vacíos en el medio de un arreglo. Por ejemplo:

data = ['a','b','c', ,]; // BAD
data = ['a','b','c'];   // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.

Clase DataTable

Representa una tabla de valores bidimensionales y mutables. Si deseas hacer una copia de solo lectura de un DataTable (opcionalmente filtrado para mostrar valores, filas o columnas específicos), crea una DataView.

A cada columna se le asigna un tipo de datos, además de varias propiedades opcionales, incluido un ID, una etiqueta y una string de patrón.

Además, puedes asignar propiedades personalizadas (pares nombre/valor) a cualquier celda, fila, columna o toda la tabla. Algunas visualizaciones admiten propiedades personalizadas específicas; por ejemplo, la visualización de tabla admite una propiedad de celda llamada “estilo”, que te permite asignar una string de estilo CSS intercalada a la celda de tabla renderizada. Una visualización debe describir en su documentación cualquier propiedad personalizada que admita.

Consulta también: QueryResponse.getDataTable

Constructor

Sintaxis

DataTable(opt_data, opt_version)

opt_data.
[Opcional] Los datos se usan para inicializar la tabla. Puede ser el JSON que se muestra cuando se llama a DataTable.toJSON() en una tabla propagada, o bien un objeto de JavaScript que contenga datos que se usaron para inicializar la tabla. La estructura del objeto literal de JavaScript se describe aquí. Si no se proporciona este parámetro, se mostrará una tabla de datos nueva y vacía.
opt_version [versión_opt]
(opcional): Es un valor numérico que especifica la versión del protocolo de cable usado. Solo los implementadores de fuentes de datos de herramientas de gráficos usan esta opción. La versión actual es 0.6.

Detalles

El objeto DataTable se usa para conservar los datos que se pasaron a una visualización. Una DataTable es una tabla bidimensional básica. Todos los datos de cada columna deben tener el mismo tipo de datos. Cada columna tiene un descriptor que incluye el tipo de datos, una etiqueta para esa columna (que se puede mostrar mediante una visualización) y un ID, que se puede usar para hacer referencia a una columna específica (como alternativa al uso de índices de columna). El objeto DataTable también admite un mapa de propiedades arbitrarias asignadas a un valor específico, una fila, una columna o todo el DataTable. Las visualizaciones pueden usarlas para admitir funciones adicionales; por ejemplo, la visualización de tabla usa propiedades personalizadas que te permiten asignar nombres o estilos de clase arbitrarios a celdas individuales.

Cada celda de la tabla contiene un valor. Las celdas pueden tener un valor nulo o un valor del tipo especificado por su columna. De forma opcional, las celdas pueden tomar una versión "con formato" de los datos. Se trata de una versión de string de los datos, con formato para que se muestre mediante una visualización. Una visualización puede (pero no es obligatoria) usar la versión con formato para la visualización, pero siempre usará los datos en sí para cualquier ordenamiento o cálculo que realice (por ejemplo, determinar en qué lugar del gráfico se colocará un punto). Un ejemplo podría ser asignar los valores “bajo” “medio” y “alto” como valores con formato a valores numéricos de celda de 1, 2 y 3.

Para agregar filas de datos después de llamar al constructor, puedes llamar a addRow() para una sola fila o a addRows() para varias filas. También puedes agregar columnas si llamas a los métodos addColumn(). También se pueden quitar métodos de filas y columnas. Sin embargo, en lugar de quitar filas o columnas, considera crear un DataView que sea una vista selectiva de DataTable.

Si cambias los valores en una DataTable después de pasarla al método draw() de una visualización, los cambios no cambiarán el gráfico de inmediato. Debes volver a llamar a draw() para reflejar los cambios.

Nota: Los gráficos de Google no realizan ninguna validación en las tablas de datos. (Si lo hiciera, los gráficos se procesarían más lento). Si proporcionas un número en el que tu columna espera una string, o viceversa, los gráficos de Google harán todo lo posible para interpretar el valor de manera adecuada, pero no marcarán errores.

Ejemplos

En el siguiente ejemplo, se muestra la creación de instancias y la propagación de una DataTable con una string literal, con los mismos datos que se muestran en el ejemplo de JavaScript anterior:

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

En el siguiente ejemplo, se crea un nuevo DataTable vacío y, luego, se propaga de forma manual con los mismos datos que se mencionaron anteriormente:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);
¿Debo crear mi DataTable en JavaScript o la notación literal de objeto?

Puedes crear un DataTable llamando al constructor sin parámetros y, luego, agregando valores llamando a los métodos addColumn() o addRows() que se indican a continuación, o pasando un objeto literal de JavaScript propagado para inicializarlo. Ambos métodos se describen a continuación. ¿Cuál deberías usar?

  • La creación y la propagación de una tabla en JavaScript mediante una llamada a addColumn(), addRow() y addRows() es un código muy legible. Este método es útil cuando ingresas el código a mano. Es más lento que usar la notación literal de objetos (que se describe a continuación), pero en tablas más pequeñas (por ejemplo, 1,000 celdas), es probable que no notes mucha diferencia.
  • La declaración directa del objeto DataTable mediante la notación literal de objeto es bastante más rápida en las tablas grandes. Sin embargo, puede ser una sintaxis complicada usar bien; úsala si puedes generar la sintaxis literal de objeto en el código, lo que reduce la posibilidad de errores.

 

Métodos

Método Valor de retorno Descripción

addColumn(type, opt_label, opt_id)

O

addColumn(description_object)

Number

Agrega una columna nueva a la tabla de datos y muestra el índice de la columna nueva. A todas las celdas de la columna nueva se les asigna un valor null. Este método tiene dos firmas:

La primera firma tiene los siguientes parámetros:

  • type: Es una string con el tipo de datos de los valores de la columna. El tipo puede ser uno de los siguientes: 'string', 'number', 'boolean', 'date', 'datetime', y 'timeofday'..
  • opt_label [Opcional] Una string con la etiqueta de la columna. La etiqueta de columna suele mostrarse como parte de la visualización, por ejemplo, como un encabezado de columna en una tabla o como una etiqueta de leyenda en un gráfico circular. Si no se especifica ningún valor, se asigna una string vacía.
  • opt_id (opcional): Es una string con un identificador único para la columna. Si no se especifica ningún valor, se asigna una string vacía.

La segunda firma tiene un solo parámetro de objeto con los siguientes miembros:

  • type: Es una string que describe el tipo de datos de la columna. Los mismos valores que la type anterior.
  • label - [Opcional, string] Una etiqueta para la columna.
  • id - [Opcional, string] Un ID para la columna.
  • role [Opcional, string] Una función para la columna.
  • pattern: [Opcional, string] Una string de formato de número (o fecha) que especifica cómo mostrar el valor de la columna.

Consulta también: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole

addRow(opt_cellArray) Number

Agrega una fila nueva a la tabla de datos y muestra el índice de la fila nueva.

  • opt_cellArray (opcional): Un objeto de fila, en notación de JavaScript, que especifica los datos de la fila nueva. Si no se incluye este parámetro, este método simplemente agregará una nueva fila vacía al final de la tabla. Este parámetro es un arreglo de valores de celda: si solo deseas especificar un valor para una celda, proporciona el valor de la celda (p.ej., 55 o "hello'); Si deseas especificar un valor o propiedades con formato para la celda, usa un objeto de celda (p.ej., {v:55, f:'Cincuenta y cinco'}). Puedes combinar valores simples y objetos de celda en la misma llamada al método). Usa null o una entrada de arreglo vacía para una celda vacía.

Ejemplos:

data.addRow();  // Add an empty row
data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value.

// Add a row with two cells, the second with a formatted value.
data.addRow(['Hermione', {v: new Date(1999,0,1),
                          f: 'January First, Nineteen ninety-nine'}
]);

data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined.
data.addRow(['Col1Val', , 'Col3Val']);     // Same as previous.
addRows(numOrArray) Number

Agrega filas nuevas a la tabla de datos y muestra el índice de la última fila agregada. Puedes llamar a este método para crear filas vacías nuevas o con los datos usados para propagar las filas, como se describe a continuación.

  • numOrArray: puede ser un número o un arreglo:
    • Número: Es un número que especifica cuántas filas nuevas y sin propagar agregar a la lista.
    • Arreglo: un arreglo de objetos row que se usa para propagar un conjunto de filas nuevas. Cada fila es un objeto, como se describe en addRow(). Usa null o una entrada de arreglo vacía para una celda vacía.

Ejemplo:

data.addRows([
  ['Ivan', new Date(1977,2,28)],
  ['Igor', new Date(1962,7,5)],
  ['Felix', new Date(1983,11,17)],
  ['Bob', null] // No date set for Bob.
]);

Consulta también: insertRows

clone() Tabla de datos Muestra un clon de la tabla de datos. El resultado es una copia profunda de la tabla de datos, excepto las propiedades de celda, las propiedades de fila, las propiedades de tabla y las propiedades de columna, que son copias superficiales; esto significa que las propiedades no básicas se copian por referencia, pero las propiedades básicas se copian por valor.
getColumnId(columnIndex) String Muestra el identificador de una columna específica especificada por el índice de columna en la tabla subyacente.
En las tablas de datos que se recuperan mediante consultas, la fuente de datos establece el identificador de columna y puede usarse para hacer referencia a columnas cuando se usa el lenguaje de consulta.
Consulta también: Query.setQuery
getColumnIndex(columnIdentifier) String, Número Muestra el índice de una columna determinada especificada por el índice, el ID o la etiqueta de columna si existe en esta tabla; de lo contrario, muestra -1. Cuando columnIdentifier es una string, se usa para buscar la columna por su ID primero y, luego, por su etiqueta.
Consulta también: getColumnId, getColumnLabel
getColumnLabel(columnIndex) String Muestra la etiqueta de una columna dada especificada por el índice de columna en la tabla subyacente.
Por lo general, la etiqueta de la columna se muestra como parte de la visualización. Por ejemplo, la etiqueta de la columna puede mostrarse como un encabezado de columna en una tabla o como la etiqueta de leyenda en un gráfico circular.
En las tablas de datos que se recuperan mediante consultas, la etiqueta de la columna se establece por la fuente de datos o por la cláusula label del lenguaje de consulta.
Consulta también: setColumnLabel
getColumnPattern(columnIndex) String

Muestra el patrón de formato que se usó para formatear los valores de la columna especificada.

  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().

Para las tablas de datos que se recuperan mediante consultas, el patrón de columna se establece mediante la fuente de datos o la cláusula format del lenguaje de consulta. Un ejemplo de patrón es '#,##0.00'. Para obtener más información sobre los patrones, consulta la referencia del lenguaje de consulta.

getColumnProperties(columnIndex) Objeto

Muestra un mapa de todas las propiedades de la columna especificada. Ten en cuenta que el objeto de propiedades se muestra como referencia, por lo que cambiar los valores del objeto recuperado también los modifica en el DataTable.

  • columnIndex es el índice numérico de la columna para la que se recuperan las propiedades.
getColumnProperty(columnIndex, name) Automático

Muestra el valor de una propiedad con nombre o null si esa propiedad no está configurada para la columna especificada. El tipo de datos que se muestra varía según la propiedad.

  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().
  • name es el nombre de la propiedad, como una string.

Consulta también: setColumnProperty setColumnProperties

getColumnRange(columnIndex) Objeto

Muestra los valores mínimos y máximos de los valores de una columna especificada. El objeto que se muestra tiene las propiedades min y max. Si el rango no tiene valores, min y max contendrán null.

columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().

getColumnRole(columnIndex) String Muestra la función de la columna especificada.
getColumnType(columnIndex) String

Muestra el tipo de una columna determinada especificada por el índice de la columna.

  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().

El tipo de columna que se muestra puede ser uno de los siguientes: 'string', 'number', 'boolean', 'date', 'datetime', y 'timeofday'.

getDistinctValues(columnIndex) Arreglo de objetos

Muestra los valores únicos en una columna determinada, en orden ascendente.

  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().

El tipo de objetos mostrados es el mismo que el que muestra el método getValue.

getFilteredRows(filters) Arreglo de objetos

Muestra los índices de fila de las filas que coinciden con todos los filtros indicados. Los índices se muestran en orden ascendente. El resultado de este método puede usarse como entrada en DataView.setRows() para cambiar el conjunto de filas que se muestra en una visualización.

filters: Es un array de objetos que describe un valor de celda aceptable. Este método muestra un índice de fila si coincide con todos los filtros indicados. Cada filtro es un objeto con una propiedad column numérica que especifica el índice de la columna en la fila que se evaluará, más una de las siguientes opciones:

  • Una propiedad value con un valor que debe coincidir exactamente con la celda de la columna especificada El valor debe ser del mismo tipo que la columna; o
  • Una o ambas de las siguientes propiedades, del mismo tipo que la columna que se filtra:
    • minValue: un valor mínimo para la celda. El valor de la celda en la columna especificada debe ser mayor o igual que este valor.
    • maxValue: un valor máximo para la celda. El valor de la celda en la columna especificada debe ser menor o igual que este valor.
    Un valor nulo o indefinido para minValue (o maxValue) significa que no se aplicará el límite inferior (o superior) del rango.

Otra propiedad opcional, test, especifica una función para combinar con el filtrado de valores o rangos. Se llama a la función con el valor de la celda, los índices de fila y columna, y la tabla de datos. Debería mostrar falso si la fila debe excluirse del resultado.

Ejemplo: getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}]) muestra un arreglo que contiene, en orden ascendente, los índices de todas las filas en las que la cuarta columna (índice 3 de la columna) es exactamente 42, y la tercera columna (índice 2 de la columna) está entre “bar” y “foo” (inclusive).

getFormattedValue(rowIndex, columnIndex) String

Muestra el valor con formato de la celda en los índices de fila y de columna especificados.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • ColumnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().

Para obtener más información sobre el formato de los valores de la columna, consulta la referencia del lenguaje de consulta.

Consulta también: setFormattedValue

getNumberOfColumns() Number Muestra el número de columnas en la tabla.
getNumberOfRows() Number Muestra el número de filas en la tabla.
getProperties(rowIndex, columnIndex) Objeto

Muestra un mapa de todas las propiedades de la celda especificada. Ten en cuenta que el objeto de propiedades se muestra como referencia, por lo que cambiar los valores en el objeto recuperado también los cambia en DataTable.

  • rowIndex es el índice de fila de la celda.
  • columnIndex es el índice de columna de la celda.
getProperty(rowIndex, columnIndex, name) Automático

Muestra el valor de una propiedad con nombre o null si esa propiedad no está configurada para la celda especificada. El tipo de datos que se muestra varía según la propiedad.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().
  • name es una string con el nombre de la propiedad.

Consulta también: setCell setProperties setProperty

getRowProperties(rowIndex) Objeto

Muestra un mapa de todas las propiedades de la fila especificada. Ten en cuenta que el objeto de propiedades se muestra como referencia, por lo que cambiar los valores del objeto recuperado también los modifica en el DataTable.

  • rowIndex es el índice de la fila para la que se recuperan las propiedades.
getRowProperty(rowIndex, name) Automático

Muestra el valor de una propiedad con nombre o null si esa propiedad no está configurada para la fila especificada. El tipo de datos que se muestra varía según la propiedad.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • name es una string con el nombre de la propiedad.

Consulta también: setRowProperty setRowProperties

getSortedRows(sortColumns) Arreglo de números

Muestra una versión ordenada de la tabla sin modificar el orden de los datos subyacentes. Para ordenar los datos subyacentes de forma permanente, llama a sort(). Puedes especificar el ordenamiento de varias maneras, según el tipo que pases al parámetro sortColumns:

  • Un solo número especifica el índice de la columna por la que se desea ordenar. Se ordenará de forma ascendente. Ejemplo: sortColumns(3) ordenará por la cuarta columna, en orden ascendente.
  • Un solo objeto que contiene el número del índice de columna por el que se desea ordenar y una propiedad booleana opcional desc. Si desc está configurado como verdadero, la columna específica se ordenará de forma descendente; de lo contrario, el orden es ascendente. Ejemplos: sortColumns({column: 3}) ordenará por la cuarta columna, en orden ascendente; sortColumns({column: 3, desc: true}) ordenará por la cuarta columna, en orden descendente.
  • Un arreglo de números de los índices de columna según los que se ordenará. El primer número es la columna principal por la cual ordenar, el segundo es el secundario, y así sucesivamente. Esto significa que cuando dos valores en la primera columna son iguales, los valores en la siguiente columna se comparan, y así sucesivamente. Ejemplo: sortColumns([3, 1, 6]) ordenará primero por la cuarta columna (en orden ascendente), luego por la segunda columna (en orden ascendente) y, por último, la séptima columna (en orden ascendente).
  • Un arreglo de objetos, cada uno con el número del índice de la columna que se debe ordenar, y una propiedad booleana opcional desc. Si desc se establece como verdadero, la columna específica se ordenará de forma descendente (el orden predeterminado es ascendente). El primer objeto es la columna principal según la cual se debe ordenar, el segundo es el secundario, y así sucesivamente. Esto significa que cuando dos valores en la primera columna son iguales, los valores en la siguiente columna se comparan, y así sucesivamente. Ejemplo: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) se ordenará primero por la cuarta columna (en orden ascendente), luego, la columna 2 en orden descendente y, por último, la columna 7 en orden descendente.

El valor que se muestra es un arreglo de números; cada número es un índice de una fila DataTable. La iteración en las filas DataTable por el orden del arreglo que se muestra dará como resultado filas ordenadas por el sortColumns especificado. El resultado se puede usar como entrada en DataView.setRows() para cambiar con rapidez el conjunto de filas que se muestra en una visualización.

Ten en cuenta que se garantiza que el orden sea estable: esto significa que, si ordenas el mismo valor de dos filas, el mismo orden mostrará las filas en el mismo orden cada vez.
Consulta también: ordenar

Ejemplo: Para iterar en las filas ordenadas según la tercera columna, usa:

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}
getTableProperties Objeto Muestra un mapa de todas las propiedades de la tabla.
getTableProperty(name) Automático

Muestra el valor de una propiedad con nombre o de null si no se configura esa propiedad para la tabla. El tipo de datos que se muestra varía según la propiedad.

  • name es una string con el nombre de la propiedad.

Consulta también: setTableProperties setTableProperty

getValue(rowIndex, columnIndex) Objeto

Muestra el valor de la celda en los índices de fila y columna especificados.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().

El tipo del valor que se muestra depende del tipo de columna (consulta getColumnType):

  • Si el tipo de columna es “string”, el valor es una string.
  • Si el tipo de columna es “número”, el valor es un número.
  • Si el tipo de columna es “boolean”, el valor es booleano.
  • Si el tipo de columna es “date” o “datetime”, el valor es un objeto de fecha.
  • Si el tipo de columna es “timeofday”, el valor es un arreglo de cuatro números: [hora, minuto, segundo, milisegundos].
  • Si el valor de la celda es un valor nulo, muestra null.
insertColumn(columnIndex, type [,label [,id]]) Ninguno

Inserta una columna nueva en la tabla de datos, en el índice especificado. Todas las columnas existentes en el índice especificado o después de él se pasan a un índice más alto.

  • columnIndex es un número con el índice requerido de la nueva columna.
  • type debe ser una string con el tipo de datos de los valores de la columna. El tipo puede ser uno de los siguientes: 'string', 'number', 'boolean', 'date', 'datetime', y 'timeofday'..
  • label debe ser una string con la etiqueta de la columna. La etiqueta de columna suele mostrarse como parte de la visualización, por ejemplo, como un encabezado de columna en una tabla o como una etiqueta de leyenda en un gráfico circular. Si no se especifica ningún valor, se asigna una string vacía.
  • id debe ser una string con un identificador único para la columna. Si no se especifica ningún valor, se asigna una string vacía.

Consulta también: addColumn

insertRows(rowIndex, numberOrArray) Ninguno

Inserta la cantidad de filas especificada en el índice de fila especificado.

  • rowIndex es el número de índice en el que se insertan las filas nuevas. Se agregarán filas a partir del número de índice especificado.
  • numberOrArray es una cantidad de filas nuevas y vacías que se agregan o un arreglo de una o más filas propagadas para agregar al índice. Consulta addRows() para ver la sintaxis que se usa a fin de agregar un arreglo de objetos de fila.

Consulta también: addRows

removeColumn(columnIndex) Ninguno

Quita la columna del índice especificado.

  • columnIndex debe ser un número con un índice de columna válido.

Consulta también: removeColumns

removeColumns(columnIndex, numberOfColumns) Ninguno

Quita la cantidad especificada de columnas a partir de la columna en el índice especificado.

  • numberOfColumns es la cantidad de columnas que se quitarán.
  • columnIndex debe ser un número con un índice de columna válido.

Consulta también: removeColumn

removeRow(rowIndex) Ninguno

Quita la fila del índice especificado.

  • rowIndex debe ser un número con un índice de fila válido.

Consulta también: removeRows

removeRows(rowIndex, numberOfRows) Ninguno

Quita la cantidad especificada de filas de la fila en el índice especificado.

  • numberOfRows es la cantidad de filas que se quitarán.
  • rowIndex debe ser un número con un índice de fila válido.

Consulta también: removeRow

setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]]) Ninguno

Establece el valor, el valor con formato o las propiedades de una celda.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().
  • value (opcional) es el valor asignado a la celda especificada. Para evitar reemplazar este valor, establece este parámetro en undefined. Para borrar este valor, configúralo en null. El tipo del valor depende del tipo de columna (consulta getColumnType()):
    • Si el tipo de columna es “string”, el valor debe ser una string.
    • Si el tipo de columna es “número”, el valor debe ser un número.
    • Si el tipo de columna es “booleano”, el valor debe ser booleano.
    • Si el tipo de columna es “date” o “datetime”, el valor debe ser un objeto Date.
    • Si el tipo de columna es “timeofday”, el valor debe ser un arreglo de cuatro números: [hora, minuto, segundo, milisegundos].
  • formattedValue (opcional) es una string con el valor con formato como una string. Para evitar reemplazar este valor, establece este parámetro en undefined. Para borrar este valor y hacer que la API aplique el formato predeterminado a value según sea necesario, configúralo en null; para establecer de forma explícita un valor con formato vacío, configúralo en una string vacía. Por lo general, las visualizaciones usan el valor con formato para mostrar las etiquetas de valor. Por ejemplo, el valor con formato puede aparecer como texto de etiqueta dentro de un gráfico circular.
  • properties (opcional) es un Object (un nombre/valor de mapa) con propiedades adicionales para esta celda. Para evitar reemplazar este valor, establece este parámetro en undefined; para borrarlo, configúralo en null. Algunas visualizaciones admiten propiedades de filas, columnas o celdas para modificar su visualización o comportamiento. Consulta la documentación de visualización para ver qué propiedades se admiten.

Consulta también: setValue(), setFormattedValue(), setProperty(), setProperties().

setColumnLabel(columnIndex, label) Ninguno

Establece la etiqueta de una columna.

  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().
  • label es una string con la etiqueta que se asignará a la columna. Por lo general, la etiqueta de la columna se muestra como parte de la visualización. Por ejemplo, la etiqueta de columna se puede mostrar como un encabezado de columna en una tabla o como la etiqueta de leyenda en un gráfico circular.

Consulta también: getColumnLabel

setColumnProperty(columnIndex, name, value) Ninguno

Establece una sola propiedad de columna. Algunas visualizaciones admiten propiedades de filas, columnas o celdas para modificar su visualización o comportamiento. Consulta la documentación de visualización para ver qué propiedades son compatibles.

  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().
  • name es una string con el nombre de la propiedad.
  • value es un valor de cualquier tipo para asignar a la propiedad con nombre especificada de la columna especificada.

Consulta también:setColumnProperties getColumnProperty

setColumnProperties(columnIndex, properties) Ninguno

Establece varias propiedades de columna. Algunas visualizaciones admiten propiedades de filas, columnas o celdas para modificar su visualización o comportamiento. Consulta la documentación de visualización para ver qué propiedades son compatibles.

  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().
  • properties es un Object (mapa del nombre/valor) con propiedades adicionales para esta columna. Si se especifica null, se quitarán todas las propiedades adicionales de la columna.

Consulta también: setColumnProperty getColumnProperty

setFormattedValue(rowIndex, columnIndex, formattedValue) Ninguno

Establece el valor con formato de una celda.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().
  • formattedValue es una string con el valor con formato para mostrar. Para borrar este valor y hacer que la API aplique el formato predeterminado al valor de celda según sea necesario, configúralo con formattedValue null; para establecer explícitamente un valor de formato vacío, configúralo en una string vacía.

Consulta también: getFormattedValue

setProperty(rowIndex, columnIndex, name, value) Ninguno

Establece una propiedad de la celda. Algunas visualizaciones admiten propiedades de filas, columnas o celdas para modificar su visualización o comportamiento. Consulta la documentación de visualización para ver qué propiedades son compatibles.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().
  • name es una string con el nombre de la propiedad.
  • value es un valor de cualquier tipo para asignar a la propiedad con nombre especificada de la celda especificada.

Consulta también: setCell setProperties getProperty

setProperties(rowIndex, columnIndex, properties) Ninguno

Establece varias propiedades de celda. Algunas visualizaciones admiten propiedades de filas, columnas o celdas para modificar su visualización o comportamiento. Consulta la documentación de visualización para ver qué propiedades son compatibles.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns().
  • properties es un Object (mapa de nombre/valor) con propiedades adicionales para esta celda. Si se especifica null, se quitarán todas las propiedades adicionales de la celda.

Consulta también: setCell setProperty getProperty

setRowProperty(rowIndex, name, value) Ninguno

Establece una propiedad de fila. Algunas visualizaciones admiten propiedades de filas, columnas o celdas para modificar su visualización o comportamiento. Consulta la documentación de visualización para ver qué propiedades son compatibles.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • name es una string con el nombre de la propiedad.
  • value es un valor de cualquier tipo para asignar a la propiedad con nombre especificada de la fila especificada.

Consulta también: setRowProperties getRowProperty

setRowProperties(rowIndex, properties) Ninguno

Configura varias propiedades de fila. Algunas visualizaciones admiten propiedades de filas, columnas o celdas para modificar su visualización o comportamiento. Consulta la documentación de visualización para ver qué propiedades son compatibles.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • properties es un Object (mapa del nombre/valor) con propiedades adicionales para esta fila. Si se especifica null, se quitarán todas las propiedades adicionales de la fila.

Consulta también: setRowProperty getRowProperty

setTableProperty(name, value) Ninguno

Establece una sola propiedad de tabla. Algunas visualizaciones admiten propiedades de tablas, filas, columnas o celdas para modificar su visualización o comportamiento. Consulta la documentación de visualización para ver qué propiedades son compatibles.

  • name es una string con el nombre de la propiedad.
  • value es un valor de cualquier tipo para asignar a la propiedad con nombre especificada de la tabla.

Consulta también: setTableProperties getTableProperty

setTableProperties(properties) Ninguno

Configura varias propiedades de la tabla. Algunas visualizaciones admiten propiedades de tablas, filas, columnas o celdas para modificar su visualización o comportamiento. Consulta la documentación de visualización para ver qué propiedades son compatibles.

  • properties es una Object (nombre/mapa de valor) con propiedades adicionales para la tabla. Si se especifica null, se quitarán todas las propiedades adicionales de la tabla.

Consulta también: setTableProperty getTableProperty

setValue(rowIndex, columnIndex, value) Ninguno

Establece el valor de una celda. Además de reemplazar cualquier valor de celda existente, este método borra cualquier valor y propiedades con formato de la celda.

  • rowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().
  • columnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns(). Este método no te permite establecer un valor con formato para esta celda. Para ello, llama a setFormattedValue().
  • value es el valor asignado a la celda especificada. El tipo del valor que se muestra depende del tipo de columna (consulta getColumnType):
    • Si el tipo de columna es “string”, el valor debe ser una string.
    • Si el tipo de columna es “número”, el valor debe ser un número.
    • Si el tipo de columna es “booleano”, el valor debe ser booleano.
    • Si el tipo de columna es “date” o “datetime”, el valor debe ser un objeto Date.
    • Si el tipo de columna es “timeofday”, el valor debe ser un arreglo de cuatro números: [hora, minuto, segundo, milisegundos].
    • Para cualquier tipo de columna, el valor se puede establecer en null.

Consulta también: setCell, setFormattedValue, setProperty, setProperties

sort(sortColumns) Ninguno Ordena las filas según las columnas de orden especificadas. Este método modifica la DataTable. Consulta getSortedRows() para obtener una descripción de los detalles de ordenamiento. Este método no muestra los datos ordenados.
Consulta también: getSortedRows
Ejemplo: Para ordenar por la tercera columna y, luego, por la segunda columna, usa: data.sort([{column: 2}, {column: 1}]);
toJSON() String Muestra una representación JSON del DataTable que se puede pasar al constructor de DataTable. Por ejemplo:
{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

Formato del parámetro data de JavaScript Lite del constructor

Para inicializar un DataTable, pasa un objeto literal de string de JavaScript al parámetro data. A este objeto lo llamaremos data. Puedes codificar este objeto de forma manual, según la descripción de abajo, o puedes usar una biblioteca auxiliar de Python si sabes cómo usar Python y tu sitio puede usarlo. Sin embargo, si deseas construir el objeto a mano, en esta sección se describirá la sintaxis.

Primero, veamos un ejemplo de un objeto JavaScript simple que describe una tabla con tres filas y tres columnas (tipos de string, número y fecha):

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

Ahora, describamos la sintaxis:

El objeto data consta de dos propiedades de nivel superior requeridas, cols y rows, y una propiedad opcional p que es un mapa de valores arbitrarios.

Nota: Todos los nombres de propiedad y las constantes de string que se muestran distinguen entre mayúsculas y minúsculas. Además, las propiedades descritas como que toman un valor de string deben tener su valor entre comillas. Por ejemplo, si deseas especificar que la propiedad de tipo sea un número, se expresará de la siguiente manera: type: 'number', pero el valor en sí, como numérico, se expresaría de la siguiente manera: v: 42

Propiedad de cols

cols es un arreglo de objetos que describe el ID y el tipo de cada columna. Cada propiedad es un objeto con las siguientes propiedades (con distinción de mayúsculas y minúsculas):

  • type (obligatorio): tipo de datos de la columna. Admite los siguientes valores de string (por ejemplo: la propiedad v: se describe más adelante):
    • "boolean": el valor booleano de JavaScript ("true" o "false"). Valor de ejemplo: v:'true'
    • 'número': Valor del número de JavaScript. Valores de ejemplo: v:7, v:3.14, v:-55
    • "string": Valor de string JavaScript. Valor de ejemplo: v:'hello'
    • 'date': Objeto de fecha JavaScript (mes basado en cero), con el tiempo truncado. Valor de ejemplo: v:new Date(2008, 0, 15)
    • "datetime": objeto de fecha de JavaScript que incluye la hora. Valor de ejemplo: v:new Date(2008, 0, 15, 14, 30, 45)
    • “timeofday”: Arreglo de tres números y un cuarto opcional, que representa la hora (0 indica la medianoche), un minuto, un segundo y un milisegundo opcional. Valores de ejemplo: v:[8, 15, 0], v: [6, 12, 1, 144]
  • id (opcional): Es el ID de string de la columna. Debe ser único en la tabla. Usa caracteres alfanuméricos básicos a fin de que la página de alojamiento no requiera caracteres de escape sofisticados para acceder a la columna en JavaScript. Tenga cuidado de no elegir una palabra clave de JavaScript. Ejemplo: id:'col_1'
  • label (opcional): Es el valor de la string que algunas visualizaciones muestran para esta columna. Ejemplo: label:'Height'
  • pattern (opcional): Es el patrón de string que usa una fuente de datos para formatear los valores numéricos, de fecha o de columna de tiempo. Esto es solo de referencia. Es probable que no necesites leer el patrón y no sea necesario existir. El cliente de Visualización de Google no usa este valor (lee el valor con formato de la celda). Si el DataTable proviene de una fuente de datos en respuesta a una consulta con una cláusula format, el patrón que especificaste en esa cláusula probablemente se muestre en este valor. Los estándares de patrones recomendados son ICU DecimalFormat y SimpleDateFormat .
  • p [Opcional] Un objeto que es un mapa de valores personalizados aplicados a la celda. Estos valores pueden ser de cualquier tipo JavaScript. Si la visualización admite propiedades a nivel de la celda, las describirá; de lo contrario, se ignorará esta propiedad.Ejemplo: p:{style: 'border: 1px solid green;'}.

Ejemplo de cols

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows Propiedad

La propiedad rows contiene un arreglo de objetos de fila.

Cada objeto de fila tiene una propiedad obligatoria llamada c, que es un array de celdas en esa fila. También tiene una propiedad p opcional que define un mapa de valores personalizados arbitrarios para asignar a toda la fila. Si tu visualización admite propiedades a nivel de las filas, las describirá; de lo contrario, se ignorará esta propiedad.

Objetos de celda

Un objeto con las siguientes propiedades describe cada celda de la tabla:

  • v (opcional): Es el valor de la celda. El tipo de datos debe coincidir con el tipo de datos de columna. Si la celda es nula, la propiedad v debe ser nula, aunque aún puede tener propiedades f y p.
  • f (opcional): Es una versión de string del valor v, con formato para mostrar. Por lo general, los valores coincidirán, aunque no es necesario, por lo que si especificas Date(2008, 0, 1) para v, debes especificar "1 de enero de 2008" o alguna string similar para esta propiedad. Este valor no se compara con el valor v. La visualización no usará este valor para el cálculo, solo como una etiqueta para la visualización. Si se omite, se generará de forma automática una versión de string de v con el formateador predeterminado. Los valores f se pueden modificar mediante tu propio formateador, se pueden configurar con setFormattedValue() o setCell(), o se pueden recuperar con getFormattedValue().
  • p [Opcional] Un objeto que es un mapa de valores personalizados aplicados a la celda. Estos valores pueden ser de cualquier tipo JavaScript. Si la visualización admite propiedades a nivel de la celda, se describirán. Estas propiedades se pueden recuperar mediante los métodos getProperty() y getProperties(). Ejemplo: p:{style: 'border: 1px solid green;'}.

Las celdas del arreglo de filas deben estar en el mismo orden que las descripciones de columnas en cols. Para indicar una celda nula, puedes especificar null, dejar en blanco para una celda en un arreglo o omitir los miembros del arreglo finales. Por lo tanto, a fin de indicar una fila con un valor nulo para las dos primeras celdas, puedes especificar [ , , {cell_val}] o [null, null, {cell_val}].

A continuación, se muestra un ejemplo de objeto de tabla con tres columnas, llena de tres filas de datos:

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

Propiedad de p

La propiedad p a nivel de tabla es un mapa de valores personalizados aplicados a toda la DataTable. Estos valores pueden ser de cualquier tipo JavaScript. Si la visualización admite propiedades a nivel de la tabla de datos, se describirán; de lo contrario, esta propiedad estará disponible para su uso en la aplicación. Ejemplo: p:{className: 'myDataTable'}.

Clase DataView

Vista de solo lectura de una DataTable subyacente. Un DataView permite seleccionar solo un subconjunto de las columnas o filas. También permite reordenar columnas y filas, además de duplicar columnas o filas.

Una vista es una ventana activa en el DataTable subyacente, no una instantánea estática de los datos. Sin embargo, debes tener cuidado cuando cambies la estructura de la tabla, como se describe a continuación:

  • Agregar o quitar columnas de la tabla subyacente no se verá reflejada en la vista, y esto podría provocar un comportamiento inesperado en ella. Tendrás que crear un nuevo DataView desde DataTable para registrar estos cambios.
  • Es seguro agregar o quitar filas de la tabla subyacente y los cambios se propagarán a la vista de inmediato (pero debes llamar a draw() en todas las visualizaciones después de este cambio para que se renderice la fila nueva). Ten en cuenta que, si la vista filtró las filas mediante una llamada a uno de los métodos setRows() or hideRows(), y agregas o quitas filas de la tabla subyacente, el comportamiento será inesperado; deberás crear una DataView nueva para reflejar la tabla nueva.
  • Cambiar los valores de celda en las celdas existentes es seguro, y los cambios se propagan de inmediato a DataView (pero debes llamar a draw() en las visualizaciones después de este cambio para que se rendericen los nuevos valores de celda).

También es posible crear un DataView a partir de otro DataView. Ten en cuenta que cada vez que se menciona una tabla o vista subyacente, se refiere al nivel que está justo debajo de este. En otras palabras, se refiere al objeto de datos que se usó para construir esta DataView.

DataView también admite columnas calculadas; estas son columnas cuyo valor se calcula sobre la marcha mediante una función que proporcionas. Por ejemplo, puedes incluir una columna que sea la suma de dos columnas anteriores o una columna que calcule y muestre el trimestre calendario de una fecha a partir de otra columna. Consulta setColumns() para obtener más información.

Cuando modificas un objeto DataView ocultando o mostrando las filas o las columnas, la visualización no se verá afectada hasta que vuelvas a llamar a draw() en la visualización.

Puedes combinar DataView.getFilteredRows() con DataView.setRows() para crear un DataView con un subconjunto de datos interesante, como se muestra a continuación:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
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));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

Constructores

Existen dos maneras de crear una instancia DataView nueva:

Constructor 1

var myView = new google.visualization.DataView(data)
data
Es un objeto DataTable o DataView que se usa para inicializar la vista. De forma predeterminada, la vista contiene todas las columnas y filas de la tabla o vista de datos subyacente, en el orden original. Para ocultar o mostrar las filas o columnas de esta vista, llama a los métodos set...() o hide...() apropiados.

También:

setColumns(), hideColumns(), setRows(), hideRows().

 

Constructor 2

Este constructor crea un DataView nuevo cuando asigna un DataView serializado a un DataTable. Te ayuda a recrear el DataView que serializaste con DataView.toJSON().

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)
datos
El objeto DataTable que usaste para crear el DataView, en el que llamaste a DataView.toJSON(). Si esta tabla es diferente de la tabla original, obtendrás resultados impredecibles.
verAsJson
La string JSON que muestra DataView.toJSON(). Esta es una descripción de las filas que se ocultan o se muestran en la tabla de datos data.

Métodos

Método Valor de retorno Descripción
Consulta las descripciones en DataTable. Igual que los métodos DataTable equivalentes, con la excepción de que los índices de filas y columnas hacen referencia al índice en la vista y no a la tabla o vista subyacente.
getTableColumnIndex(viewColumnIndex) Number

Muestra el índice en la tabla subyacente (o vista) de una columna especificada por el índice en esta vista. viewColumnIndex debe ser un número mayor o igual que cero y menor que el número de columnas que muestra el método getNumberOfColumns(). Muestra -1 si esta es una columna generada.

Ejemplo: Si ya se llamó a setColumns([3, 1, 4]), getTableColumnIndex(2) mostrará 4.

getTableRowIndex(viewRowIndex) Number

Muestra el índice en la tabla subyacente (o vista) de una fila dada especificada por su índice en esta vista. viewRowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows().

Ejemplo: Si ya se llamó a setRows([3, 1, 4]), getTableRowIndex(2) mostrará 4.

getViewColumnIndex(tableColumnIndex) Number

Muestra el índice en esta vista que se asigna a una columna determinada especificada por su índice en la tabla subyacente (o vista). Si existe más de un índice de este tipo, muestra el primero (el más pequeño). Si no existe tal índice (la columna especificada no está en la vista), muestra -1. tableColumnIndex debe ser un número mayor o igual que cero y menor que la cantidad de columnas que muestra el método getNumberOfColumns() de la tabla o vista subyacente.

Ejemplo: Si ya se llamó a setColumns([3, 1, 4]), getViewColumnIndex(4) mostrará 2.

getViewColumns() Arreglo de números

Muestra las columnas en esta vista, en orden. Es decir, si llamas a setColumns con algún arreglo y, luego, llamas a getViewColumns(), deberías obtener un arreglo idéntico.

getViewRowIndex(tableRowIndex) Number

Muestra el índice en esta vista que se asigna a una fila determinada especificada por su índice en la tabla (o vista) subyacente. Si existe más de un índice de este tipo, muestra el primero (el más pequeño). Si no existe tal índice (la fila especificada no está en la vista), muestra -1. tableRowIndex debe ser un número mayor o igual que cero y menor que la cantidad de filas que muestra el método getNumberOfRows() de la tabla o vista subyacente.

Ejemplo: Si ya se llamó a setRows([3, 1, 4]), getViewRowIndex(4) mostrará 2.

getViewRows() Arreglo de números

Muestra las filas en esta vista, en orden. Es decir, si llamas a setRows con algún arreglo y, luego, llamas a getViewRows(), deberías obtener un arreglo idéntico.

hideColumns(columnIndexes) ninguno

Oculta las columnas especificadas de la vista actual. columnIndexes es un arreglo de números que representa los índices de las columnas que se ocultarán. Estos índices son números de la tabla o vista subyacente. Los números en columnIndexes no tienen que estar en orden (es decir, [3,4,1] es correcto). Las columnas restantes conservan su orden de índices cuando iteras en ellas. Ingresar un número de índice para una columna que ya está oculta no es un error, pero ingresar un índice que no existe en la tabla o vista subyacente arrojará un error. Para mostrar las columnas, llama a setColumns().

Ejemplo: Si tienes una tabla con 10 columnas, llamas a setColumns([2,7,1,7,9]) y, luego, a hideColumns([7,9]), las columnas en la vista serán [2,1].

hideRows(min, max) Ninguno

Oculta todas las filas con índices que se encuentren entre mín. y máx. (inclusive) en la vista actual. Esta es una sintaxis de conveniencia para hideRows(rowIndexes), arriba. Por ejemplo, hideRows(5, 10) es equivalente a hideRows([5, 6, 7, 8, 9, 10]).

hideRows(rowIndexes) Ninguno

Oculta las filas especificadas de la vista actual. rowIndexes es un arreglo de números que representa los índices de las filas que se ocultarán. Estos índices son los números de la tabla o vista subyacente. Los números en rowIndexes no tienen que estar en orden (es decir, [3,4,1] es correcto). Las filas restantes conservan su orden de índice. Ingresar un número de índice para una fila ya oculta no es un error, pero ingresar un índice que no existe en la tabla o vista subyacente arrojará un error. Para mostrar filas, llama a setRows().

Ejemplo: Si tienes una tabla con 10 filas, llamas a setRows([2,7,1,7,9]) y, luego, a hideRows([7,9]), las filas de la vista serán [2,1].

setColumns(columnIndexes) Ninguno

Especifica qué columnas se pueden ver en esta vista. Se ocultarán las columnas que no se especifiquen. Este es un arreglo de índices de columna en la tabla o vista subyacente, o columnas calculadas. Si no llamas a este método, el valor predeterminado es mostrar todas las columnas. El arreglo también puede contener duplicados para mostrar la misma columna varias veces. Las columnas se mostrarán en el orden especificado.

  • columnIndexes: Es un array de números y objetos (puede mezclarse):
    • Los números especifican el índice de la columna de datos de origen que se incluye en la vista. Los datos no se modifican. Si necesitas definir de forma explícita una función o propiedades de columna adicionales, especifica un objeto con una propiedad sourceColumn.
    • Los objetos especifican una columna calculada. Una columna calculada crea un valor en el momento para cada fila y lo agrega a la vista. El objeto debe tener las siguientes propiedades:
      • calc [función]: Función que se llamará para cada fila en la columna a fin de calcular un valor para esa celda. La firma de la función es func(dataTable, row), en la que dataTable es la fuente DataTable, y row es el índice de la fila de datos de origen. La función debe mostrar un valor único del tipo especificado por type.
      • type [string]: el tipo de JavaScript del valor que muestra la función calc.
      • label (Opcional, string): Es una etiqueta opcional para asignar a esta columna generada. Si no se especifica, la columna de vista no tendrá ninguna etiqueta.
      • id [Opcional, string]: un ID opcional para asignar a esta columna generada.
      • sourceColumn [Opcional, número]: Es la columna de origen que se usará como valor. Si se especifica, no especifiques la propiedad calc ni la propiedad type. Esto es similar a pasar un número en lugar de un objeto, pero te permite especificar una función y propiedades para la columna nueva.
      • properties (opcional, objeto): Es un objeto que contiene las propiedades arbitrarias que se asignarán a esta columna. Si no se especifica, la columna de vista no tendrá propiedades.
      • role (Opcional, string): Una función para asignar a esta columna. Si no se especifica, no se importará la función existente.

Ejemplos:

// Show some columns directly from the underlying data.
// Shows column 3 twice.
view.setColumns([3, 4, 3, 2]);

// Underlying table has a column specifying a value in centimeters.
// The view imports this directly, and creates a calculated column
// that converts the value into inches.
view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);
function cmToInches(dataTable, rowNum){
  return Math.floor(dataTable.getValue(rowNum, 1) / 2.54);
}
setRows(min, max) Ninguno

Configura las filas de esta vista para que sean todos los índices (en la tabla o vista subyacente) que se encuentran entre el mínimo y el máximo (inclusive). Esta es una sintaxis de conveniencia para setRows(rowIndexes) a continuación. Por ejemplo, setRows(5, 10) es equivalente a setRows([5, 6, 7, 8, 9, 10]).

setRows(rowIndexes) Ninguno

Establece las filas visibles en esta vista en función de los números de índice de la tabla o vista subyacente. rowIndexes debe ser un arreglo de números de índice que especifique qué filas se mostrarán en la vista. El arreglo especifica el orden en el que se muestran las filas y se pueden duplicar. Ten en cuenta que solo se mostrarán las filas especificadas en rowIndexes; este método borra todas las demás filas de la vista. El array también puede contener duplicados, lo que duplica de manera efectiva la fila especificada en esta vista (por ejemplo, setRows([3, 4, 3, 2]) hará que la fila 3 aparezca dos veces en esta vista). Por lo tanto, el arreglo proporciona una asignación de las filas de la tabla o vista subyacente a esta vista. Puedes usar getFilteredRows() o getSortedRows() a fin de generar entradas para este método.

Ejemplo: Para crear una vista con las filas tres y cero de una tabla o vista subyacente: view.setRows([3, 0])

toDataTable() Tabla de datos Muestra un objeto DataTable propagado con las filas y columnas visibles de DataView.
toJSON() string Muestra una representación de string de esta DataView. Esta string no contiene los datos reales; solo contiene la configuración específica de DataView, como las filas y columnas visibles. Puedes almacenar esta string y pasarla al constructor de DataView.fromJSON() estático para volver a crear esta vista. Esto no incluirá las columnas generadas.

Clase ChartWrapper

Se usa una clase ChartWrapper para unir tu gráfico y controlar todas las consultas de carga, dibujo y fuente de datos de tu gráfico. La clase expone métodos convenientes para configurar valores en el gráfico y dibujarlos. Esta clase simplifica la lectura desde una fuente de datos, porque no tienes que crear un controlador de devolución de llamada de consulta. También puede usarlo para guardar un gráfico fácilmente y volver a utilizarlo.

Otra ventaja de usar ChartWrapper es que puedes reducir la cantidad de cargas de biblioteca mediante la carga dinámica. Además, no necesitas cargar los paquetes de forma explícita, ya que ChartWrapper se encargará de buscar y cargar los paquetes de gráficos. Consulta los siguientes ejemplos para obtener más detalles.

Sin embargo, por el momento, ChartWrapper solo propaga un subconjunto de eventos que arrojan los gráficos: selectos, listos y con errores. Otros eventos no se transmiten a través de la instancia ChartWrapper. Para obtener otros eventos, debes llamar a getChart() y suscribirte a eventos directamente en el controlador del gráfico, como se muestra aquí:

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

Constructor

ChartWrapper(opt_spec)
opt_spec [opt_spec]
(opcional): Es un objeto JSON que define el gráfico o una versión serializada de ese objeto. El formato de este objeto se muestra en la documentación de drawChart(). Si no se especifica, debes establecer todas las propiedades adecuadas mediante los métodos set... que expone este objeto.

Métodos

ChartWrapper expone los siguientes métodos adicionales:

Método Tipo de datos que se muestra Descripción
draw(opt_container_ref) Ninguno

Dibuja el gráfico. Debes llamar a este método después de cualquier cambio que realices en el gráfico o en los datos para que se muestren los cambios.

  • opt_container_ref [opcional]: una referencia a un elemento de contenedor válido en la página. Si se especifica, el gráfico se dibujará allí. De lo contrario, el gráfico se dibujará en el elemento con el ID que especifica containerId.
toJSON() String Muestra una versión de string de la representación JSON del gráfico.
clone() ChartWrapper Muestra una copia profunda del wrapper del gráfico.
getDataSourceUrl() String Si este gráfico obtiene sus datos de una fuente de datos, muestra la URL de esta fuente de datos. De lo contrario, muestra un valor nulo.
getDataTable() google.visualization.DataTable.

Si este gráfico obtiene sus datos de un DataTable definido localmente, mostrará una referencia al DataTable del gráfico. Si este gráfico obtiene sus datos de una fuente de datos, mostrará un valor nulo.

Cualquier cambio que realices en el objeto mostrado se reflejará en el gráfico la próxima vez que llames a ChartWrapper.draw().

getChartType() String El nombre de clase del gráfico unido. Si se trata de un gráfico de Google, el nombre no se calificará con google.visualization. Por ejemplo, si este fuera un gráfico de árbol, mostraría "Treemap" en lugar de "google.visualization.treemap".
getChartName() String Muestra el nombre del gráfico que asignó setChartName().
getChart() Referencia del objeto de gráfico Muestra una referencia al gráfico creado por este ChartWrapper, por ejemplo, un google.visualization.BarChart o un google.visualization.ColumnChart . El resultado será nulo hasta que hayas llamado a draw() en el objeto ChartWrapper y arrojará un evento listo. Los métodos llamados en el objeto mostrado se reflejarán en la página.
getContainerId() String El ID del elemento contenedor del DOM del gráfico.
getQuery() String La string de consulta para este gráfico, si tiene una y consulta una fuente de datos.
getRefreshInterval() Number Cualquier intervalo de actualización para este gráfico, si se consulta una fuente de datos Cero indica que no hay actualización.
getOption(key, opt_default_val) De cualquier tipo

Devuelve el valor de la opción de gráfico especificada.

  • key: el nombre de la opción para recuperar. Puede ser un nombre calificado, como 'vAxis.title'.
  • opt_default_value [opcional]: Si el valor especificado es indefinido o nulo, se muestra este valor.
getOptions() Objeto Muestra el objeto de opciones para este gráfico.
getView() Objeto O arreglo Muestra el objeto inicializador DataView, en el mismo formato que dataview.toJSON(), o un arreglo de esos objetos.
setDataSourceUrl(url) Ninguno Configura la URL de una fuente de datos que se usará en este gráfico. Si también configuras una tabla de datos para este objeto, se ignorará la URL de la fuente de datos.
setDataTable(table) Ninguno Establece la DataTable para el gráfico. Pasa una de las siguientes opciones: null; un objeto DataTable; una representación JSON de una DataTable, o un arreglo después de la sintaxis de arrayToDataTable().
setChartType(type) Ninguno Establece el tipo de gráfico. Pasa el nombre de clase del gráfico unido. Si este es un gráfico de Google, no lo califiques con google.visualization. Por ejemplo, para un gráfico circular, pasa “PieChart”.
setChartName(name) Ninguno Establece un nombre arbitrario para el gráfico. Esto no se muestra en ninguna parte del gráfico, a menos que un gráfico personalizado esté diseñado de manera explícita para usarlo.
setContainerId(id) Ninguno Establece el ID del elemento DOM que lo contiene.
setQuery(query_string) Ninguno Establece una cadena de consulta, si este gráfico consulta una fuente de datos. También debes establecer la URL de la fuente de datos si especificas este valor.
setRefreshInterval(interval) Ninguno Establece el intervalo de actualización para este gráfico, si se consulta una fuente de datos. También debes establecer una URL de la fuente de datos si especificas este valor. Cero indica que no hay actualizaciones.
setOption(key, value) Ninguno Establece un valor de opción de gráfico único, en el que key es el nombre de la opción y value es el valor. Para anular la configuración de una opción, pasa un valor nulo para el valor. Ten en cuenta que key puede ser un nombre calificado, como 'vAxis.title'.
setOptions(options_obj) Ninguno Establece un objeto de opciones completo para un gráfico.
setView(view_spec) Ninguno Establece un objeto inicializador DataView, que actúa como un filtro sobre los datos subyacentes. El wrapper de gráfico debe tener datos subyacentes de una DataTable o una fuente de datos a los que se aplique esta vista. Puedes pasar una string o un objeto inicializador DataView, como el que muestra dataview.toJSON(). También puedes pasar un arreglo de objetos inicializadores DataView, en cuyo caso el primer DataView del arreglo se aplica a los datos subyacentes para crear una tabla de datos nueva, el segundo DataView se aplica a la tabla de datos resultante de la aplicación del primer DataView, y así sucesivamente.

Eventos

El objeto ChartWrapper arroja los siguientes eventos. Ten en cuenta que debes llamar a ChartWrapper.draw() antes de que se muestren los eventos.

Nombre Descripción Propiedades
error Se activa cuando se produce un error cuando se intenta procesar el gráfico. id, mensaje
ready El gráfico está listo para las llamadas a métodos externos. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método draw y llamarlo solo después de que se active el evento. Ninguno
select Se activa cuando el usuario hace clic en una barra o leyenda. Cuando se selecciona un elemento de gráfico, se selecciona la celda correspondiente en la tabla de datos. Cuando se selecciona una leyenda, se selecciona la columna correspondiente en la tabla de datos. Para saber qué elementos se seleccionaron, llama a ChartWrapper.getChart().getSelection(). Ten en cuenta que solo se mostrará cuando el tipo de gráfico subyacente arroje un evento de selección. Ninguno

Ejemplo

Los siguientes dos fragmentos crean un gráfico de líneas equivalente. En el primer ejemplo, se usa la notación literal JSON para definir el gráfico; en el segundo, se usan los métodos ChartWrapper para establecer estos valores.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

El mismo gráfico, ahora con métodos set:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

Clase Editor

La clase ChartEditor se usa para abrir un cuadro de diálogo dentro de la página que le permite al usuario personalizar una visualización en el momento.

Para usar ChartEditor:

  1. Carga el paquete charteditor. En google.charts.load(), carga el paquete “charteditor”. No es necesario cargar los paquetes para el tipo de gráfico que procesas en el editor, ya que este cargará todo el paquete por ti según sea necesario.
  2. Crea un objeto ChartWrapper que defina el gráfico que el usuario podrá personalizar. Este gráfico se mostrará en el diálogo, y el usuario usará el editor para volver a diseñarlo, cambiar los tipos de gráfico o incluso cambiar los datos de origen.
  3. Crea una instancia nueva de ChartEditor y regístrate para escuchar el evento "ok". Este evento se genera cuando el usuario hace clic en el botón “Aceptar” en el diálogo. Cuando recibas la llamada, debes llamar a ChartEditor.getChartWrapper() para recuperar el gráfico modificado por el usuario.
  4. Llama a ChartEditor.openDialog() y pasa el elemento ChartWrapper. Se abrirá el cuadro de diálogo. Los botones de diálogo permiten al usuario cerrar el editor. La instancia ChartEditor está disponible mientras esté dentro del alcance; no se destruye automáticamente después de que el usuario cierra el diálogo.
  5. Para actualizar el gráfico en el código, llama a setChartWrapper().

Métodos

Método Valor de retorno Descripción
openDialog(chartWrapper, opt_options) null

Abre el editor de gráficos como un cuadro de diálogo incorporado en la página. La función muestra un resultado de inmediato; no espera a que se cierre el diálogo. Si no pierdes el alcance de la instancia, puedes volver a llamar a openDialog() para volver a abrir el cuadro de diálogo, aunque debes volver a pasar un objeto ChartWrapper.

  • chartWrapper: Un objeto ChartWrapper que define el gráfico inicial para renderizar en la ventana. El gráfico debe tener un DataTable propagado o estar conectado a una fuente de datos válida. Este wrapper se copia internamente en el editor de gráficos, por lo que los cambios posteriores que realices en el controlador de ChartWrapper no se reflejarán en la copia del editor de gráficos.
  • opt_options: [opcional] Un objeto que contiene cualquier opción para el editor de gráficos. Consulta la tabla de opciones a continuación.
getChartWrapper() ChartWrapper Muestra un ChartWrapper que representa el gráfico, con modificaciones de usuario.
setChartWrapper(chartWrapper) null

Usa este método para actualizar el gráfico procesado en el editor.

chartWrapper: Un objeto ChartWrapper que representa el nuevo gráfico que se renderizará. El gráfico debe tener un DataTable propagado o estar conectado a una fuente de datos válida.

closeDialog() null Cierra el cuadro de diálogo del editor del gráfico.

Opciones

El editor de gráficos admite las siguientes opciones:

Nombre Tipo Predeterminado Descripción
dataSourceInput Controlador de elementos o "urlbox" null

Usa esta opción a fin de permitir que el usuario especifique una fuente de datos para el gráfico. Esta propiedad puede ser uno de dos valores:

  • 'urlbox': Muestra la URL de la fuente de datos del gráfico en el cuadro de diálogo en un cuadro de texto editable. El usuario puede modificarlo y el gráfico se volverá a dibujar según la nueva fuente de datos.
  • DOM element: Te permite proporcionar un elemento HTML personalizado para seleccionar una fuente de datos. Pasa un controlador a un elemento HTML, ya sea creado en el código o copiado de la página. Este elemento se mostrará en el cuadro de diálogo. Usa esto como una forma de permitir que el usuario elija la fuente de datos del gráfico. Por ejemplo, crea un cuadro de lista que contenga varias URL de fuente de datos o nombres fáciles de usar para el usuario. El elemento debe implementar un controlador de selección y usarlo para cambiar la fuente de datos del gráfico. Por ejemplo, puede cambiar el DataTable subyacente o modificar el campo dataSourceUrl del gráfico.

Eventos

El editor de gráficos muestra los siguientes eventos:

Nombre Descripción Propiedades
ok Se activa cuando el usuario hace clic en el botón "Aceptar" del cuadro de diálogo. Después de recibir este método, debes llamar a getChartWrapper() para recuperar el gráfico configurado por el usuario. ninguno
cancel Se activa cuando el usuario hace clic en el botón "Cancelar" en el cuadro de diálogo. ninguno

Ejemplo

El siguiente código de ejemplo abre un cuadro de diálogo del editor del gráfico con un gráfico de líneas propagado. Si el usuario hace clic en "Aceptar", el gráfico editado se guardará en el <div> especificado en la página.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

Métodos de manipulación de datos

El espacio de nombres google.visualization.data contiene métodos estáticos para realizar operaciones similares a las de SQL en objetos DataTable, por ejemplo, unirlos o agrupar por valor de columna.

El espacio de nombres google.visualization.data expone los siguientes métodos:

Método Descripción
google.visualization.data.group Realiza una acción GROUP BY de SQL para mostrar una tabla agrupada por valores en columnas especificadas.
google.visualization.data.join Une dos tablas de datos en una o más columnas de clave.

group()

Toma un objeto DataTable propagado y realiza una operación GROUP BY similar a la de SQL, que muestra una tabla con filas agrupadas por los valores de columna especificados. Ten en cuenta que esto no modifica el DataTable de entrada.

La tabla que se muestra incluye una fila para cada combinación de valores en las columnas de claves especificadas. Cada fila incluye las columnas de claves, además de una columna con un valor de columna agregado en todas las filas que coinciden con la combinación de claves (por ejemplo, una suma o recuento de todos los valores en la columna especificada).

El espacio de nombres google.visualization.data incluye varios valores de agregación útiles (por ejemplo, sum y count), pero puedes definir los tuyos propios (por ejemplo, standardDeviation o secondHighest). Las instrucciones para definir tu propio agregador se proporcionan después de la descripción del método.

Sintaxis

google.visualization.data.group(data_table, keys, columns)
tabla_de_datos
Es la entrada DataTable. Esto no se modificará llamando a group().
keys
Un arreglo de números y objetos que especifican qué columnas agrupar. La tabla de resultados incluye todas las columnas de este arreglo, así como todas las columnas de las columnas. Si es un número, este es el índice de la columna de la entrada DataTable que se agrupará. Si un objeto incluye una función que puede modificar la columna especificada (por ejemplo, agrega 1 al valor de esa columna). El objeto debe tener las siguientes propiedades:
  • columna: un número que es un índice de columna de dt en el que se aplica la transformación.
  • modificador: una función que acepta un valor (el valor de la celda en esa columna para cada fila) y muestra el valor modificado. Esta función se usa para modificar el valor de la columna a fin de contribuir al agrupamiento: por ejemplo, llamando a una función whatQuarter que calcula un trimestre a partir de una columna de fecha, de modo que la API pueda agrupar filas por trimestre. El valor calculado se muestra en las columnas clave de la tabla que se muestra. Esta función se puede declarar intercalada dentro de este objeto o puede ser una función que definas en otro lugar del código (debe estar dentro del alcance de la llamada). La API proporciona una función de modificador simple. Aquí encontrarás instrucciones para crear tus propias funciones más útiles. Debes conocer el tipo de datos que puede aceptar esta función y llamarla solo en las columnas de ese tipo. También debes conocer el tipo de datos que se muestra de esta función y declararla en la propiedad type que se describe a continuación.
  • tipo: el tipo que muestra la función modificador. Debe ser un nombre de tipo de string JavaScript, por ejemplo: "número" o "booleano".
  • etiqueta [opcional]: una etiqueta de string para asignar esta columna en el DataTable que se muestra.
  • id - [Opcional] Un ID de string para asignar esta columna en el DataTable que se muestra.

Ejemplos: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]
columnas
[Opcional] Te permite especificar qué columnas, además de las columnas clave, deseas incluir en la tabla de salida. Debido a que todas las filas del grupo de filas se comprimen en una sola fila de salida, debes determinar qué valor mostrar para ese grupo de filas. Por ejemplo, puedes elegir mostrar el valor de la columna de la primera fila del conjunto o un promedio de todas las filas de ese grupo. columns es un arreglo de objetos con las siguientes propiedades:
  • columna: Número que especifica el índice de la columna que se mostrará.
  • agregación: Es una función que acepta un arreglo de todos los valores de esta columna en este grupo de filas y muestra un solo valor para mostrar en la fila de resultados. El valor que se muestra debe ser del tipo que especifica la propiedad type del objeto. A continuación, se proporcionan los detalles sobre cómo crear tu propia función de agregación. Debes saber qué tipos de datos acepta este método y solo llamarlos en las columnas del tipo adecuado. La API proporciona varias funciones de agregación útiles. Consulta Funciones de agregación proporcionadas a continuación para obtener una lista o Crea una función de agregación a fin de aprender a escribir tu propia función de agregación.
  • tipo: el tipo de datos que se muestra de la función de agregación. Debe ser un nombre de tipo de string JavaScript, por ejemplo: "número" o "booleano".
  • etiqueta [opcional]: una etiqueta de string para aplicar a esta columna en la tabla que se muestra.
  • id - [Opcional] Un ID de string para aplicar a esta columna en la tabla que se muestra.

Valor que se muestra

Un DataTable con una columna para cada columna enumerada en claves y una columna para cada columna enumerada en columnas La tabla está ordenada por filas de claves, de izquierda a derecha.

Ejemplo

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

Funciones de modificador proporcionadas

La API proporciona las siguientes funciones modificadores que puedes pasar a las claves. modifier para personalizar el comportamiento de la agrupación.

Function Tipo de arreglo de entrada Tipo de datos que se muestra Descripción
google.visualization.data.month Fecha número Dada una fecha, mostrará el valor de mes basado en cero (0, 1, 2, etc.).

Funciones de agregación proporcionadas

La API proporciona las siguientes funciones de agregación que puede pasar a las columnas. aggregation.

Function Tipo de arreglo de entrada Tipo de datos que se muestra Descripción
google.visualization.data.avg número número El valor promedio del arreglo que se pasó.
google.visualization.data.count Cualquier tipo número El recuento de filas en el grupo. Se cuentan los valores nulos y duplicados.
google.visualization.data.max número, string, fecha número, string, fecha, nulo El valor máximo del arreglo. En el caso de las strings, este es el primer elemento de la lista lexicográficamente clasificada; para los valores de fecha, es la fecha más reciente. Los valores nulos se ignoran. El resultado es nulo si no hay un máximo.
google.visualization.data.min número, string, fecha número, string, fecha, nulo El valor mínimo en el arreglo. En las strings, este es el último elemento de una lista lexicográficamente organizada. En el caso de los valores de fecha, es la fecha más antigua. Los valores nulos se ignoran. El resultado es nulo si no hay un mínimo.
google.visualization.data.sum número número Suma de todos los valores del arreglo

Crea una función modificadora

Puedes crear una función modificadora para realizar una transformación simple de valores clave antes de que la función group() agrupe tus filas. Esta función toma un valor de celda único, realiza una acción en él (por ejemplo, agrega 1 al valor) y lo muestra. No es necesario que los tipos de entrada y resultado sean del mismo tipo, pero el emisor debe conocer los tipos de entrada y salida. Aquí tienes un ejemplo de una función que acepta una fecha y muestra el trimestre:

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

Crea una función de agregación

Puedes crear una función de agregación que acepte un conjunto de valores de columna en un grupo de filas y muestre un solo número; por ejemplo, si muestra un recuento o un promedio de valores. A continuación, se muestra una implementación de la función de agregación de recuento proporcionada, que muestra un recuento de cuántas filas hay en el grupo de filas:

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

join()

Este método une dos tablas de datos (objetos DataTable o DataView) en una sola tabla de resultados, similar a una instrucción JOIN de SQL. Especificas uno o más pares de columnas (columnas key) entre las dos tablas, y la tabla de salida incluye las filas según un método de unión que especifiques: solo filas en las que coinciden ambas claves, todas las filas de una tabla o todas las filas de ambas, sin importar si coinciden. En la tabla de resultados, se incluyen solo las columnas de claves, además de las columnas adicionales que especifiques. Ten en cuenta que dt2 no puede tener claves duplicadas, pero dt1 sí. El término “clave” significa la combinación de todos los valores de columna de clave, no un valor de columna de clave específico. Por lo tanto, si una fila tiene valores de celda A | B | C y las columnas 0 y 1 son columnas de clave, entonces la clave para esa fila es AB.

Sintaxis

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);
dt1
Un DataTable propagado para unirse con dt2.
dt2
Es un DataTable propagado para unirse con dt1. Esta tabla no puede tener varias claves idénticas (cuando una clave es una combinación de valores de columna de clave).
joinMethod
Es una string que especifica el tipo de unión. Si dt1 tiene varias filas que coinciden con una fila dt2, la tabla de salida incluirá todas las filas de dt1 que coincidan. Elige entre los siguientes valores:
  • “Completo”: La tabla de salida incluye todas las filas de ambas tablas, sin importar si las claves coinciden. Las filas no coincidentes tendrán entradas de celda nulas; las filas coincidentes se unen.
  • “Interior”: Es la unión completa filtrada para incluir solo las filas donde coinciden las claves.
  • “left”: La tabla de salida incluye todas las filas de dt1, sin importar si hay o no filas coincidentes de dt2.
  • “derecha”: La tabla de salida incluye todas las filas de dt2, sin importar si hay o no filas coincidentes de dt1.
keys
Un arreglo de columnas de claves para comparar desde ambas tablas. Cada par es un arreglo de dos elementos. El primero es una clave en dt1 y el segundo es una clave en dt2. Este arreglo puede especificar columnas por su índice, ID o etiqueta. Consulta getColumnIndex.
Las columnas deben ser del mismo tipo en ambas tablas. Todas las claves especificadas deben coincidir según la regla dada por joinMethod para incluir una fila de la tabla. Las columnas de clave siempre se incluyen en la tabla de salida. Solo la dt1, la tabla de la izquierda, puede incluir claves duplicadas; las claves en dt2 deben ser únicas. El término “clave” en este caso hace referencia a un conjunto único de columnas de clave, no a valores de columna individuales. Por ejemplo, si tus columnas de clave fueran A y B, la siguiente tabla solo tendría valores de clave únicos (y, por lo tanto, podría usarse como dt2):
R. B
Jén Rojo
Jén Azul
Fred Rojo
Ejemplo: [[0,0], [2,1]] compara los valores de la primera columna en ambas tablas y la tercera columna de dt1 con la segunda columna de dt2.
dt1Columnas
Un arreglo de columnas de dt1 para incluir en la tabla de salida, además de las columnas clave de dt1. Este arreglo puede especificar columnas por su índice, ID o etiqueta. Consulta getColumnIndex.
dt2Columnas
Un arreglo de columnas de dt2 para incluir en la tabla de salida, además de las columnas clave de dt2. Este arreglo puede especificar columnas por su índice, ID o etiqueta. Consulta getColumnIndex.

Valor que se muestra

Un DataTable con las columnas clave, dt1Columns y dt2Columns. Esta tabla está ordenada por columnas clave, de izquierda a derecha. Cuando joinMethod es “inner”, todas las celdas clave deben propagarse. En el caso de otros métodos de unión, si no se encuentra una clave que coincida, la tabla tendrá un valor nulo para las celdas de claves que no coincidan.

Ejemplos

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

Formateadores

La API de visualización de Google proporciona formateadores que se pueden usar para cambiar el formato de los datos en una visualización. Estos formateadores cambian el valor de formato de la columna especificada en todas las filas. Ten en cuenta lo siguiente:

  • Los formateadores solo modifican los valores formateados, no los valores subyacentes. Por ejemplo, el valor que se muestra sería "$1,000.00", pero el valor subyacente sería "1000".
  • Los formateadores solo afectan a una columna a la vez. Para volver a formatear varias columnas, aplica un formateador a cada columna que desees cambiar.
  • Si también usas formateadores definidos por el usuario, algunos formateadores de Visualización de Google anularán todos los formateadores definidos por el usuario.
  • El formato real aplicado a los datos se deriva de la configuración regional con la que se cargó la API. Para obtener más información, consulta Cómo cargar gráficos con una configuración regional específica.

    Importante: Los formateadores solo se pueden usar con un DataTable; no se pueden usar con un DataView (los objetos DataView son de solo lectura).

    Estos son los pasos generales para usar un formateador:

    1. Obtén el objeto DataTable propagado.
    2. Para cada columna a la que quieras cambiarle el formato, haz lo siguiente:
      1. Crea un objeto que especifique todas las opciones para tu formateador. Este es un objeto JavaScript básico con un conjunto de propiedades y valores. Consulta la documentación del formateador para ver qué propiedades son compatibles. (De manera opcional, puedes pasar un objeto de notación literal de objetos que especifique tus opciones).
      2. Crea tu formateador y pasa el objeto de opciones.
      3. Llama a formatter.format(table, colIndex) y pasa el número de columna DataTable (basado en cero) de los datos a los que se les debe volver a dar formato. Ten en cuenta que solo puedes aplicar un solo formateador a cada columna. Aplicar un segundo formateador simplemente reemplazará los efectos de la primera.
        Importante: Muchos formateadores requieren etiquetas HTML para mostrar un formato especial. Si tu visualización admite una opción allowHtml, debes establecerla como verdadera.

    A continuación, se muestra un ejemplo de cómo cambiar los valores de fecha con formato de una columna de fecha para usar un formato de fecha largo ("1 de enero de 2009"):

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Employee Name');
    data.addColumn('date', 'Start Date');
    data.addRows(3);
    data.setCell(0, 0, 'Mike');
    data.setCell(0, 1, new Date(2008, 1, 28));
    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));
    
    // Create a formatter.
    // This example uses object literal notation to define the options.
    var formatter = new google.visualization.DateFormat({formatType: 'long'});
    
    // Reformat our data.
    formatter.format(data, 1);
    
    // Draw our data
    var table = new google.visualization.Table(document.getElementById('dateformat_div'));
    table.draw(data, {showRowNumber: true});

    La mayoría de los formateadores exponen los dos métodos siguientes:

    Método Descripción
    google.visualization.formatter_name(options)

    Constructor, en el que formatter_name es un nombre de clase formadora específico.

    • options: Un objeto JavaScript genérico que especifica las opciones para ese formateador. Este es un objeto genérico con pares propiedad-valor con propiedades específicas de ese formateador. Consulta la documentación de tu formateador específico para saber qué opciones son compatibles. A continuación, se muestran dos ejemplos de formas de llamar al constructor para el objeto DateFormat y pasar dos propiedades:
    // Object literal technique
    var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5});
    
    // Equivalent property setting technique
    var options = new Object();
    options['formatType'] = 'long';
    options['timeZone'] = -5;
    var formatter = new google.visualization.DateFormat(options);
    format(data, colIndex)

    Vuelve a formatear los datos en la columna especificada.

    • datos: Un DataTable que contiene los datos a los que se les debe volver a dar formato. No puedes usar una DataView aquí.
    • índice: el índice basado en cero de la columna a la que se va a aplicar el formato. Para dar formato a varias columnas, debes llamar a este método varias veces, con valores diferentes de colIndex.

     

    La API de visualización de Google proporciona los siguientes formateadores:

    Nombre del formateador Descripción
    Formato de flecha Agrega una flecha hacia arriba o hacia abajo, que indica si el valor de la celda es superior o inferior a un valor especificado.
    Formato de barra Agrega una barra de color. La dirección y el color indican si el valor de la celda es superior o inferior a un valor especificado.
    ColorColor Colorea una celda según si los valores se encuentran dentro de un intervalo especificado.
    Formato de fecha Aplica formato a un valor de fecha o de fecha y hora de varias maneras, como "1 de enero de 2009", "1 de enero de 2009" y "1 de enero de 2009".
    Formato de número Aplica formato a varios aspectos de los valores numéricos.
    Formato de patrón Concatena los valores de la celda en la misma fila en una celda específica, junto con texto arbitrario.

    Formato de flecha

    Agrega una flecha hacia arriba o hacia abajo a una celda numérica, según si el valor es superior o inferior a un valor base especificado. Si es igual al valor base, no se muestra ninguna flecha.

    Opciones

    ArrowFormat admite las siguientes opciones que se pasan al constructor:

    Opción Descripción
    base

    Número que indica el valor base, que se utiliza para compararlo con el valor de la celda. Si el valor de la celda es más alto, la celda incluye una flecha hacia arriba de color verde; si el valor es menor, incluye una flecha roja hacia abajo; si es igual, no tiene flecha.

    Código de muestra

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenues Change');
    data.addRows([
      ['Shoes', {v:12, f:'12.0%'}],
      ['Sports', {v:-7.3, f:'-7.3%'}],
      ['Toys', {v:0, f:'0%'}],
      ['Electronics', {v:-2.1, f:'-2.1%'}],
      ['Food', {v:22, f:'22.0%'}]
    ]);
    
    var table = new google.visualization.Table(document.getElementById('arrowformat_div'));
    
    var formatter = new google.visualization.ArrowFormat();
    formatter.format(data, 1); // Apply formatter to second column
    
    table.draw(data, {allowHtml: true, showRowNumber: true});

    Formato de barras

    Agrega una barra de color a una celda numérica que indica si el valor de la celda es superior o inferior a un valor base especificado.

    Opciones

    BarFormat admite las siguientes opciones que se pasan al constructor:

    Opción

    Ejemplo

    Descripción
    base Número que es el valor base con el que se compara el valor de la celda. Si el valor de la celda es mayor, se dibujará a la derecha de la base. Si es más bajo, se dibujará a la izquierda. El valor predeterminado es 0.
    colorNegative Una string que indica la sección de valor negativo de las barras. Los valores posibles son “rojo”, “verde” y “azul”. El valor predeterminado es “rojo”.
    colorPositive Una string que indica el color de la sección de valores positivos de las barras. Los valores posibles son “rojo”, “verde” y “azul”. El color predeterminado es "azul".
    drawZeroLine Un valor booleano que indica si se debe dibujar una línea base oscura de 1 píxel cuando hay valores negativos. La línea oscura permite mejorar la búsqueda visual de las barras. El valor predeterminado es “false”.
    max El valor de número máximo para el rango de barras. El valor predeterminado es el valor más alto de la tabla.
    min El valor de número mínimo para el rango de barras. El valor predeterminado es el valor más bajo de la tabla.
    showValue Si es verdadero, muestra valores y barras; si es falso, solo muestra barras. El valor predeterminado es verdadero.
    width Espesor de la barra, en píxeles. El valor predeterminado es 100.

    Código de muestra

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenues');
    data.addRows([
      ['Shoes', 10700],
      ['Sports', -15400],
      ['Toys', 12500],
      ['Electronics', -2100],
      ['Food', 22600],
      ['Art', 1100]
    ]);
    
    var table = new google.visualization.Table(document.getElementById('barformat_div'));
    
    var formatter = new google.visualization.BarFormat({width: 120});
    formatter.format(data, 1); // Apply formatter to second column
    
    table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    Formato de color

    Asigna colores al primer o segundo plano de una celda numérica, según el valor de la celda. Este formateador es inusual, ya que no toma sus opciones en el constructor. En su lugar, debes llamar a addRange() o addGradientRange() las veces que quieras para agregar rangos de color antes de llamar a format(). Los colores se pueden especificar en cualquier formato HTML aceptable, por ejemplo, "negro", "#000000" o "#000".

    Métodos

    ColorFormat admite los siguientes métodos:

    Método Descripción
    google.visualization.ColorFormat() Constructor. No acepta argumentos.
    addRange(from, to, color, bgcolor)

    Especifica un color de fondo o de color de fondo para una celda, según el valor de la celda. A todas las celdas con un valor en el rango especificado from, to se les asignarán color y bgcolor. Es importante tener en cuenta que el rango no es inclusivo, ya que crear un rango de 1 a 1,000 y un segundo de 1,000 a 2,000 no cubrirá el valor 1,000.

    • from: [String, Number, Date, DateTime, or TimeOfDay] El límite inferior (incluido) del rango, o nulo. Si es nulo, coincidirá con -∞. Los límites de string se comparan alfabéticamente con valores de string.
    • to: [String, Número, Fecha, Fecha y Hora o Hora de día] El límite alto (no inclusivo) del rango, o nulo. Si es nulo, coincidirá con +AAAA. Los límites de las strings se comparan alfabéticamente con valores de string.
    • color: Es el color que se aplica al texto en las celdas coincidentes. Los valores pueden ser valores de “#RRGGBB” o constantes de color definidas (por ejemplo, “#FF0000” o “red”).
    • color: color que se aplicará al fondo de las celdas coincidentes. Los valores pueden ser valores “#RRGGBB” o constantes de color definidas (por ejemplo, “#FF0000” o “rojo”).
    addGradientRange(from, to, color, fromBgColor, toBgColor)

    Asigna un color de fondo de un rango, según el valor de la celda. El color se escala para que coincida con el valor de la celda dentro de un rango de un color de límite inferior a un color de límite superior. Ten en cuenta que este método no puede comparar valores de string, como addRange(). Sugerencia: Los rangos de color suelen ser difíciles de medir con precisión para los espectadores. El rango más simple y fácil de leer es de un color completamente saturado a blanco (p. ej., #FF0000-FFFFFF).

    • from: [Número, Fecha, Fecha y hora, o Hora de día]: El límite inferior (incluido) del rango, o nulo. Si es nulo, coincidirá con -∞.
    • to: [Número, Fecha, Fecha y hora o Hora de día]: El límite superior (no inclusivo) del rango, o nulo. Si es nulo, coincidirá con +∞.
    • color: Es el color que se aplica al texto en las celdas coincidentes. Este color es el mismo para todas las celdas, independientemente de su valor.
    • fromBgColor: Color de fondo de las celdas que contienen valores en el extremo inferior del gradiente. Los valores pueden ser valores “#RRGGBB” o constantes de color definidas (por ejemplo, “#FF0000” o “rojo”).
    • toBgColor: Color de fondo de las celdas que contienen valores en el extremo superior del gradiente. Los valores pueden ser valores “#RRGGBB” o constantes de color definidas (por ejemplo, “#FF0000” o “rojo”).

     

    format(dataTable, columnIndex) El método format() estándar para aplicar el formato a la columna especificada

    Código de muestra

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenues');
    data.addRows([
      ['Shoes', 10700],
      ['Sports', -15400],
      ['Toys', 12500],
      ['Electronics', -2100],
      ['Food', 22600],
      ['Art', 1100]
    ]);
    
    var table = new google.visualization.Table(document.getElementById('colorformat_div'));
    
    var formatter = new google.visualization.ColorFormat();
    formatter.addRange(-20000, 0, 'white', 'orange');
    formatter.addRange(20000, null, 'red', '#33ff33');
    formatter.format(data, 1); // Apply formatter to second column
    
    table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    Formato de fecha

    Aplica formato a un valor de JavaScript Date de varias maneras, incluidas "1 de enero de 2016", "1/1/16" y "1 de enero de 2016".

    Opciones

    DateFormat admite las siguientes opciones que se pasan al constructor:

    Opción Descripción
    formatType

    Una opción de formato rápido para la fecha. Se admiten los siguientes valores de string y se cambiará el formato de la fecha del 28 de febrero de 2016, como se muestra a continuación:

    • "short": formato corto, p.ej., "28/02/16"
    • 'medium' [medio]: Formato medio, p.ej., "28 de febrero de 2016"
    • 'long' [largo]: Formato largo: p.ej., "28 de febrero de 2016"

    No puedes especificar formatType y pattern.

    pattern

    Patrón de formato personalizado para aplicar al valor, similar al formato de fecha y hora de ICU. Por ejemplo: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});.

    No puedes especificar formatType y pattern. Puedes obtener más información sobre los patrones en la siguiente sección.

    timeZone La zona horaria en la que se muestra el valor de fecha. Este es un valor numérico que indica GMT + la cantidad de zonas horarias (puede ser negativo). Los objetos de fecha se crean de forma predeterminada con la zona horaria asumida de la computadora en la que se crean; esta opción se usa para mostrar ese valor en una zona horaria diferente. Por ejemplo, si creaste un objeto de fecha de 5:00 p.m. en una computadora ubicada en Greenwich, Inglaterra, y especificaste timeZone para que sea -5 (options['timeZone'] = -5, o bien hora del Pacífico del este en EE.UU.), el valor que se muestra sería 12 medios.

    Métodos

    DateFormat admite los siguientes métodos:

    Método Descripción
    google.visualization.DateFormat(options)

    Constructor. Consulta la sección de opciones más arriba para obtener más información.

    format(dataTable, columnIndex) El método format() estándar para aplicar el formato a la columna especificada.
    formatValue(value)

    Muestra el valor con formato de un valor determinado. Este método no requiere un elemento DataTable.

    Código de muestra

    function drawDateFormatTable() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Employee Name');
      data.addColumn('date', 'Start Date (Long)');
      data.addColumn('date', 'Start Date (Medium)');
      data.addColumn('date', 'Start Date (Short)');
      data.addRows([
        ['Mike', new Date(2008, 1, 28, 0, 31, 26),
                 new Date(2008, 1, 28, 0, 31, 26),
                 new Date(2008, 1, 28, 0, 31, 26)],
        ['Bob', new Date(2007, 5, 1, 0),
                new Date(2007, 5, 1, 0),
                new Date(2007, 5, 1, 0)],
        ['Alice', new Date(2006, 7, 16),
                  new Date(2006, 7, 16),
                  new Date(2006, 7, 16)]
      ]);
    
      // Create three formatters in three styles.
      var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
      var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
      var formatter_short = new google.visualization.DateFormat({formatType: 'short'});
    
      // Reformat our data.
      formatter_long.format(data, 1);
      formatter_medium.format(data,2);
      formatter_short.format(data, 3);
    
      // Draw our data
      var table = new google.visualization.Table(document.getElementById('dateformat_div'));
      table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
    }

    Más información sobre los patrones de fechas

    A continuación, presentamos más detalles sobre los patrones compatibles:

    Los patrones son similares al formato de fecha y hora de ICU, pero aún no se admiten los siguientes patrones: A D F g Y u w W. Para evitar una colisión con los patrones, el texto literal que quieres que aparezca en el resultado debe estar entre comillas simples, excepto la comillas simples, que deben duplicarse, p.ej., "K 'o''clock.'".

    Patrón Descripción Resultado de ejemplo
    GG Designador de Era. “ANUNCIO”
    ay o aaaa año. 1996
    M

    Mes en año. Enero:

    • M produce 1
    • MM produce 01
    • MMM produce enero
    • MMMM produce enero

    "Julio"

    “07”

    d Día en mes. Los valores "d" adicionales sumarán ceros al comienzo. 10
    h Hora en escala de 12 horas. Los valores "h" adicionales agregarán ceros a la izquierda. 12
    H Hora en escala de 24 horas. Los valores hk adicionales agregarán ceros al comienzo. 0
    min Minuto en hora Los valores "M" adicionales agregarán ceros al comienzo. 30
    s Segundo en minuto. Los valores de "s" adicionales sumarán ceros al comienzo. 55
    4 Fracción de segundo. Los valores "S" adicionales se rellenarán a la derecha con ceros. 978
    1

    Día de la semana Resultados siguientes para "martes":

    • E produce T
    • EE o EEE produce tu o mar
    • EEEE produce productos el martes

    "Mar"

    "martes"

    AA a.m./p.m. "p.m."
    k Hora en día (1~24). Los valores 'k' adicionales agregarán ceros al comienzo. 24
    mil Hora en a.m./p.m. (0~11). Los valores 'k' adicionales agregarán ceros al comienzo. 0
    z

    Zona horaria. Para la zona horaria 5, genera "UTC+5".

    "UTC+5"
    Z

    Zona horaria en formato RFC 822. Para la zona horaria -5:

    Z, ZZ, producción de ZZZ -0500

    ZZZZ y más productos "GMT -05:00"

    "-0800"

    "GMT -05:00"

    v

    Zona horaria (genérica).

    "Etc/GMT-5"
    ' escape para texto 'Date='
    '' comilla simple 'yy'

    Formato de número

    Describe cómo se debe dar formato a las columnas numéricas. Las opciones de formato incluyen la especificación de un símbolo de prefijo (como un signo de dólar) o la puntuación que se usará como marcador de miles.

    Opciones

    NumberFormat admite las siguientes opciones que se pasan al constructor:

    Opción Descripción
    decimalSymbol

    Un carácter para usar como marcador decimal. El valor predeterminado es un punto (.).

    fractionDigits

    Un número que especifica cuántos dígitos mostrar después del decimal. El valor predeterminado es 2. Si especificas más dígitos de los que contiene el número, se mostrarán los ceros para los valores más pequeños. Los valores truncados se redondearán (5 hacia arriba).

    groupingSymbol Un carácter que se usa para agrupar dígitos a la izquierda del decimal en conjuntos de tres. El valor predeterminado es una coma (,).
    negativeColor El color de texto para los valores negativos. No hay un valor predeterminado. Los valores pueden ser cualquier valor de color HTML aceptable, como “rojo” o “#FF0000”.
    negativeParens Un valor booleano, donde true indica que los valores negativos deben estar entre paréntesis. El valor predeterminado es verdadero.
    pattern

    Una string de formato. Cuando se proporciona, se ignoran todas las demás opciones, excepto negativeColor.

    La string de formato es un subconjunto del conjunto de patrones de ICU. Por ejemplo, {pattern:'#,###%'} generará los valores de salida “1,000%”, “750%” y “50%” para los valores 10, 7.5 y 0.5.

    prefix Un prefijo de string para el valor, por ejemplo, “$”.
    suffix Un sufijo de string para el valor, por ejemplo, "%".

    Métodos

    NumberFormat admite los siguientes métodos:

    Método Descripción
    google.visualization.NumberFormat(options)

    Constructor. Consulta la sección de opciones más arriba para obtener más información.

    format(dataTable, columnIndex) El método format() estándar para aplicar el formato a la columna especificada
    formatValue(value)

    Muestra el valor con formato de un valor determinado. Este método no requiere un objeto DataTable.

    Código de muestra

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Department');
    data.addColumn('number', 'Revenues');
    data.addRows([
      ['Shoes', 10700],
      ['Sports', -15400],
      ['Toys', 12500],
      ['Electronics', -2100],
      ['Food', 22600],
      ['Art', 1100]
    ]);
    
    var table = new google.visualization.Table(document.getElementById('numberformat_div'));
    
    var formatter = new google.visualization.NumberFormat(
        {prefix: '$', negativeColor: 'red', negativeParens: true});
    formatter.format(data, 1); // Apply formatter to second column
    
    table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    Formato de patrón

    Permite combinar los valores de las columnas designadas en una sola columna, junto con el texto arbitrario. Por ejemplo, si tienes una columna para el nombre y una para el apellido, puedes propagar la tercera columna con {last name}, {first name}. Este formateador no sigue las convenciones del constructor y el método format(). Consulta la sección Métodos a continuación para obtener instrucciones.

    Métodos

    PatternFormat admite los siguientes métodos:

    Método Descripción
    google.visualization.PatternFormat(pattern)

    Constructor. No toma un objeto options. En su lugar, toma un parámetro pattern de string. Esta es una string que describe qué valores de columna colocar en la columna de destino, junto con cualquier texto arbitrario. Incorpora marcadores de posición en tu string para indicar un valor de otra columna a fin de incorporarlo. Los marcadores de posición son {#}, en los que # es el índice de una columna de origen que se usará. El índice es un índice del arreglo srcColumnIndices del método format() que se muestra a continuación. Para incluir un carácter literal { or }, grábalo de la siguiente manera: \{ o \}. Para incluir un literal \ mark, escríbelo como \\.

    Código de muestra

    En el siguiente ejemplo, se muestra un constructor para un patrón que crea un elemento de anclaje, con el primer y el segundo elemento tomado del método format():

    var formatter = new google.visualization.PatternFormat(
      '<a href="mailto:{1}">{0}</a>');
    format(dataTable, srcColumnIndices, opt_dstColumnIndex)

    La llamada de formato estándar, con algunos parámetros adicionales:

    • dataTable: la tabla de datos en la que se operará.
    • srcColumnIndices: un arreglo de uno o más índices de columna (basados en cero) para extraer como las fuentes de la DataTable subyacente. Este se usará como fuente de datos para el parámetro pattern en el constructor. No es necesario que los números de las columnas estén en orden de clasificación.
    • opt_dstColumnIndex [opcional]: Es la columna de destino para colocar el resultado de la manipulación pattern. Si no se especifica, el primer elemento en srcColumIndices se usará como destino.

    Consulta los ejemplos de formato después de la tabla.

    Estos son algunos ejemplos de entradas y salidas para una tabla de cuatro columnas.

    Row before formatting (4 columns, last is blank):
    John  |  Paul  |  Jones  |  [empty]
    
    var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
    formatter.format(data, [0,1,2], 3);
    Output:
      John  |  Paul  |  Jones  |  John Paul Jones
    
    var formatter = new google.visualization.PatternFormat("{1}, {0}");
    formatter.format(data, [0,2], 3);
    Output:
      John  |  Paul  |  Jones  |  Jones, John

    Código de muestra

    En el siguiente ejemplo, se muestra cómo combinar datos de dos columnas para crear una dirección de correo electrónico. Usa un objeto DataView para ocultar las columnas fuente originales:

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Email');
    data.addRows([
      ['John Lennon', 'john@beatles.co.uk'],
      ['Paul McCartney', 'paul@beatles.co.uk'],
      ['George Harrison', 'george@beatles.co.uk'],
      ['Ringo Starr', 'ringo@beatles.co.uk']
    ]);
    
    var table = new google.visualization.Table(document.getElementById('patternformat_div'));
    
    var formatter = new google.visualization.PatternFormat(
        '<a href="mailto:{1}">{0}</a>');
    // Apply formatter and set the formatted value of the first column.
    formatter.format(data, [0, 1]);
    
    var view = new google.visualization.DataView(data);
    view.setColumns([0]); // Create a view with the first column only.
    
    table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    GadgetAsistente

    Clase de ayuda para simplificar la escritura de Gadgets que usan la API de visualización de Google.

    Constructor

    google.visualization.GadgetHelper()

    Métodos

    Método Valor de retorno Descripción
    createQueryFromPrefs(prefs) google.visualization.Query Estático. Crea una nueva instancia de google.visualization.Query y establece sus propiedades de acuerdo con los valores de las preferencias de gadget. El tipo de parámetro prefs es _IG_Prefs
    1. La preferencia _table_query_url se usa para establecer la URL de la fuente de datos de consulta.
    2. La preferencia _table_query_refresh_interval se usa para establecer el intervalo de actualización de consultas (en segundos).
    validateResponse(response) Booleano Estático. El parámetro response es del tipo google.visualization.QueryResponse. Muestra true si la respuesta contiene datos. Muestra false si la ejecución de la consulta falló y la respuesta no contiene datos. Si se produjo un error, este método mostrará un mensaje de error.

    Clases de consulta

    Los siguientes objetos están disponibles para enviar consultas de datos a una fuente de datos externa, como las Hojas de cálculo de Google.

    • Consulta: Envuelve la solicitud de datos saliente.
    • QueryResponse: maneja la respuesta de la fuente de datos.

    Búsqueda

    Representa una consulta que se envía a una fuente de datos.

    Constructor

    google.visualization.Query(dataSourceUrl, opt_options)

    Parámetros

    dataSourceUrl.
    [Obligatorio, String] a la que se enviará la consulta. Consulta la documentación de gráficos y hojas de cálculo para obtener hojas de cálculo de Google.
    opciones_opt
    [Opcional, objeto] Un mapa de opciones para la solicitud. Nota: Si accedes a una fuente de datos restringida, no debes usar este parámetro. Estas son las propiedades admitidas:
    • sendMethod: [opcional, string] especifica el método que se usa para enviar la consulta. Elige uno de los siguientes valores de string:
      • 'xhr': Envía la consulta mediante XmlHttpRequest.
      • 'scriptInjection': Se envía la consulta mediante la inyección de secuencias de comandos.
      • 'makeRequest': [Disponible solo para los gadgets que dejaron de estar disponibles] Envía la consulta con el método makeRequest() de la API de Gadget. Si se especifica, también debes especificar makeRequestParams.
      • 'auto': Usa el método especificado por el parámetro tqrt de la URL de la fuente de datos. tqrt puede tener los siguientes valores: “xhr”, “scriptInjection” o “makeRequest”. Si falta tqrt o tiene un valor no válido, el valor predeterminado es “xhr” para solicitudes del mismo dominio y “scriptInjection” para solicitudes de varios dominios.
    • makeRequestParams: [objeto] Un mapa de parámetros para una consulta makeRequest(). Se usa y se requiere solo si sendMethod es "makeRequest".

    Métodos

    Método Valor de retorno Descripción
    abort() Ninguno Detiene el envío de consultas automáticas que se iniciaron con setRefreshInterval().
    setRefreshInterval(seconds) Ninguno

    Configura la consulta para llamar automáticamente al método send cada duración especificada (cantidad de segundos), a partir de la primera llamada explícita a send. seconds es un número superior o igual a cero.

    Si usas este método, debes llamarlo antes de llamar al método send.

    Para cancelar este método, vuelve a llamarlo con cero (el valor predeterminado) o llama a abort().

    setTimeout(seconds) Ninguno Configura la cantidad de segundos que se debe esperar hasta que la fuente de datos responda antes de generar un error de tiempo de espera. seconds es un número mayor que cero.
    El tiempo de espera predeterminado es de 30 segundos. Si se usa, se debe llamar a este método antes de llamar al método send.
    setQuery(string) Ninguno Configura la cadena de consulta. El valor del parámetro string debe ser una consulta válida.
    Si se usa, se debe llamar a este método antes de llamar al método send. Obtén más información sobre el lenguaje de consulta.
    send(callback) Ninguno Envía la consulta a la fuente de datos. callback debe ser una función que se llamará cuando la fuente de datos responda. La función de devolución de llamada recibirá un solo parámetro de tipo google.visualization.QueryResponse.

    Respuesta de consulta

    Representa la respuesta de una ejecución de consulta, tal como se recibió desde la fuente de datos. Se pasa una instancia de esta clase como un argumento a la función de devolución de llamada que se estableció cuando se llamó a Query.send.

    Métodos

    Método Valor de retorno Descripción
    getDataTable() Tabla de datos Muestra la tabla de datos tal como la muestra la fuente de datos. Muestra null si la ejecución de la consulta falló y no se mostraron datos.
    getDetailedMessage() String Muestra un mensaje de error detallado para las consultas que fallaron. Si la ejecución de la consulta se realizó de forma correcta, este método muestra una string vacía. El mensaje que se muestra es un mensaje dirigido a desarrolladores y puede contener información técnica, por ejemplo, “La columna {salary} no existe”.
    getMessage() String Muestra un mensaje de error corto para las consultas que fallaron. Si la consulta se ejecutó de forma correcta, este método mostrará una string vacía. El mensaje que se muestra es un mensaje corto dirigido a los usuarios finales, por ejemplo, “Consulta no válida” o “Acceso denegado”.
    getReasons() Arreglo de strings Muestra un arreglo de cero de más entradas. Cada entrada es una string corta con un código de error o advertencia que se generó durante la ejecución de la consulta. Códigos posibles:
    • access_denied El usuario no tiene permisos para acceder a la fuente de datos.
    • invalid_query La consulta especificada tiene un error de sintaxis.
    • data_truncated Una o más filas de datos que coinciden con la selección de la consulta no se mostraron debido a los límites de tamaño de salida. (advertencia).
    • timeout La consulta no respondió en el tiempo esperado.
    hasWarning() Booleano Muestra true si la ejecución de la consulta tiene algún mensaje de advertencia.
    isError() Booleano Muestra true si la ejecución de la consulta falló y la respuesta no contiene ninguna tabla de datos. Muestra <false> si la consulta se ejecutó correctamente y la respuesta contiene una tabla de datos.

    Error de visualización

    La API proporciona varias funciones para ayudarte a mostrar mensajes de error personalizados a tus usuarios. Para usar estas funciones, proporciona un elemento contenedor en la página (por lo general un <div>), al que la API dibujará un mensaje de error con formato. Este contenedor puede ser el elemento de contenedor de visualización o un contenedor solo para errores. Si especificas el elemento que contiene la visualización, el mensaje de error se mostrará encima de la visualización. Luego, llama a la función correspondiente que aparece a continuación para mostrar o quitar el mensaje de error.

    Todas las funciones son estáticas en el espacio de nombres google.visualization.errors.

    Muchas visualizaciones pueden arrojar un evento de error; consulta el evento de error a continuación para obtener más información sobre eso.

    Puedes ver un ejemplo de un error personalizado en el Ejemplo de wrapper de consulta.

    Function Valor de retorno Descripción
    addError(container, message, opt_detailedMessage, opt_options) Es el valor de ID de string que identifica el objeto de error creado. Este es un valor único en la página y se puede usar para quitar el error o buscar su elemento contenedor.

    Agrega un bloque de visualización de error al elemento de página especificado, con el texto y el formato especificados.

    • contenedor: El elemento DOM en el que se inserta el mensaje de error. Si no se puede encontrar el contenedor, la función arrojará un error de JavaScript.
    • mensaje: Mensaje de string para mostrar.
    • opt_detailedMessage: una string opcional de mensaje detallado. De forma predeterminada, este es el texto del mouse, pero se puede cambiar en la propiedad opt_options.showInToolTip que se describe a continuación.
    • opt_options: Un objeto opcional con propiedades que establecen varias opciones de visualización para el mensaje. Se admiten las siguientes opciones:
      • showInTooltip: un valor booleano en el que verdadero muestra el mensaje detallado solo como texto de información sobre la herramienta y falso muestra el mensaje detallado en el cuerpo del contenedor después del mensaje corto. El valor predeterminado es verdadero.
      • type: String que describe el tipo de error, que determina los estilos de CSS que se deben aplicar a este mensaje. Los valores admitidos son "error" y "warning". El valor predeterminado es "error".
      • estilo: String de estilo para el mensaje de error. Este estilo anulará cualquier estilo aplicado al tipo de advertencia (opt_options.type). Ejemplo: 'background-color: #33ff99; padding: 2px;' El valor predeterminado es una string vacía.
      • removible: Un valor booleano. Verdadero significa que el mensaje puede cerrarse con un clic del usuario. El valor predeterminado es "falso".
    addErrorFromQueryResponse(container, response)

    Es el valor de ID de string que identifica el objeto de error creado o nulo si la respuesta no indicó un error. Este es un valor único en la página y se puede usar para quitar el error o buscar su elemento contenedor.

    Pasa un contenedor de respuesta de consulta y mensaje de error a este método: si la respuesta de consulta indica un error de consulta, muestra un mensaje de error en el elemento de la página especificado. Si la respuesta a la consulta es nula, el método generará un error de JavaScript. Pasa la QueryResponse que recibiste en el controlador de consultas a este mensaje para mostrar un error. También configurará el estilo de la pantalla según el tipo (error o advertencia, similar a addError(opt_options.type)).

    • contenedor: El elemento DOM en el que se inserta el mensaje de error. Si no se puede encontrar el contenedor, la función arrojará un error de JavaScript.
    • respuesta: Un objeto QueryResponse que recibe el controlador de consultas en respuesta a una consulta. Si es nulo, el método generará un error de JavaScript.
    removeError(id) Booleano: verdadero si se quitó el error. De lo contrario, es falso.

    Quita de la página el error especificado por el ID.

    • id: Es el ID de string de un error creado con addError() o addErrorFromQueryResponse().
    removeAll(container) Ninguno

    Quita todos los bloques de errores de un contenedor especificado. Si el contenedor especificado no existe, se mostrará un error.

    • contenedor: El elemento DOM que contiene las strings de error que se quitarán. Si no se puede encontrar el contenedor, la función arrojará un error de JavaScript.
    getContainer(errorId) Controlador de un elemento DOM que contiene el error especificado, o nulo si no se lo puede encontrar.

    Recupera un controlador para el elemento contenedor que contiene el error especificado por errorID.

    • errorId: ID de string de un error creado con addError() o addErrorFromQueryResponse().

    Eventos

    La mayoría de las visualizaciones activan eventos para indicar que ocurrió algo. Como usuario del gráfico, a menudo querrás escuchar estos eventos. Si codificas tu propia visualización, también te recomendamos que actives esos eventos por tu cuenta.

    Los siguientes métodos permiten a los desarrolladores detectar eventos, quitar controladores de eventos existentes o activar eventos desde una visualización.

    addListener()

    Llame a este método para registrarse y recibir eventos activados por una visualización alojada en su página. Debes documentar qué argumentos de evento, si los hubiera, se pasarán a la función de control.

    google.visualization.events.addListener(source_visualization,
      event_name, handling_function)
    source_visualization.
    Es un controlador para la instancia de visualización de origen.
    event_name
    Corresponde al nombre del string del evento que se debe escuchar. Una visualización debe documentar qué eventos arroja.
    función_preparación
    Corresponde al nombre de la función local de JavaScript que se llamará cuando source_visualization active el evento event_name. La función de administración recibirá los argumentos de eventos como parámetros.

    Qué muestra

    Un controlador de objetos de escucha para el objeto de escucha nuevo. El controlador se puede usar para quitar este objeto de escucha si es necesario llamando a google.visualization.events.removeListener().

    Ejemplo

    Este es un ejemplo de registro para recibir el evento de selección

    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, options);
    
    google.visualization.events.addListener(table, 'select', selectHandler);
    
    function selectHandler() {
      alert('A table row was selected');
    }

    addOneTimeListener()

    Esto es idéntico a addListener(), pero está diseñado para eventos que solo deben escucharse una vez. Los lanzamientos posteriores del evento no invocarán la función de control.

    Un ejemplo de cuándo esto es útil: cada dibujo genera un evento ready. Si solo deseas que el primer ready ejecute tu código, te recomendamos addOneTimeListener en lugar de addListener.

    removeListener()

    Llama a este método para anular el registro de un objeto de escucha de eventos existente.

    google.visualization.events.removeListener(listener_handler)
    listener_handler.
    El controlador de objetos de escucha que se quitará, como lo muestra google.visualization.events.addListener().

    removeAllListeners()

    Llama a este método para anular el registro de todos los objetos de escucha de eventos de una instancia de visualización específica.

    google.visualization.events.removeAllListeners(source_visualization)
    source_visualization.
    Un controlador de la instancia de visualización de origen de la que se deben quitar todos los objetos de escucha de eventos.

    trigger()

    Los implementadores de visualización los llaman. Llama a este método desde la visualización para activar un evento con un nombre arbitrario y un conjunto de valores.

    google.visualization.events.trigger(source_visualization, event_name,
      event_args)
    source_visualization.
    Un controlador para la instancia de visualización de origen. Si llamas a esta función desde un método definido por la visualización de envío, simplemente puedes pasar la palabra clave this.
    event_name
    Corresponde a un nombre de string para llamar al evento. Puedes elegir cualquier valor de string que desees.
    event_args.
    (opcional): Es un mapa de pares nombre/valor para pasar al método receptor. Por ejemplo:{message: "Hello there!", puntaje: 10, nombre: "Fred"}. Puedes pasar un valor nulo si no se necesitan eventos; el receptor debe estar preparado para aceptar valores nulos para este parámetro.

    Ejemplo

    Este es un ejemplo de una visualización que arroja un método llamado "select" cuando se llama a su método onclick. No pasa ningún valor.

    MyVisualization.prototype.onclick = function(rowIndex) {
      this.highlightRow(this.selectedRow, false); // Clear previous selection
      this.highlightRow(rowIndex, true); // Highlight new selection
    
      // Save the selected row index in case getSelection is called.
      this.selectedRow = rowIndex;
    
      // Trigger a select event.
      google.visualization.events.trigger(this, 'select', null);
    }

    Propiedades y métodos de visualización estándar

    Cada visualización debe exponer el siguiente conjunto de métodos y propiedades obligatorios y opcionales. Sin embargo, ten en cuenta que no hay verificaciones de tipo para aplicar estos estándares, por lo que debes leer la documentación de cada visualización.

    Nota: Estos métodos están en el espacio de nombres de la visualización, no en el espacio de nombres google.visualization.

    Constructor

    El constructor debe tener el nombre de tu clase de visualización y mostrar una instancia de esa clase.

    visualization_class_name(dom_element)
    dom_element
    Un puntero a un elemento DOM donde se debe incorporar la visualización.

    Ejemplo

    var org = new google.visualization.OrgChart(document.getElementById('org_div')); 

    draw()

    Dibuja la visualización de la página. En segundo plano, se puede obtener un gráfico de un servidor o crear un gráfico en la página con el código de visualización vinculado. Debes llamar a este método cada vez que cambien los datos o las opciones. El objeto se debe dibujar dentro del elemento DOM que se pasa al constructor.

    draw(data[, options])
    datos
    Es un DataTable o un DataView que contiene los datos que se usarán para dibujar el gráfico. No hay un método estándar para extraer una DataTable de un gráfico.
    options
    [Opcional] Un mapa de pares nombre/valor de opciones personalizadas. Algunos ejemplos son la altura y el ancho, los colores de fondo y los subtítulos. La documentación de visualización debe detallar las opciones disponibles y admitir las opciones predeterminadas si no especificas este parámetro. Puedes usar la sintaxis literal de objeto de JavaScript para pasar un mapa de opciones, p.ej., {x:100, y:200, title:'An Example'}

    Ejemplo

    chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

    getAction()

    Opcionalmente, esto se expone mediante visualizaciones que tienen información sobre la herramienta y permiten acciones con información sobre la herramienta.

    Muestra el objeto de acción de información sobre la herramienta con el actionID solicitado.

    Ejemplo:

    // Returns the action object with the ID 'alertAction'.
    chart.getAction('alertAction');

    getSelection()

    Opcionalmente, esto se expone mediante visualizaciones que quieren permitirte acceder a los datos seleccionados en el gráfico.

    selection_array getSelection()

    Qué muestra

    selection_array: Es un arreglo de objetos seleccionados, cada uno de los cuales describe un elemento de datos en la tabla subyacente que se usa para crear la visualización (un DataView o un DataTable). Cada objeto tiene las propiedades row o column, con el índice de la fila o columna del elemento seleccionado en el DataTable subyacente. Si la propiedad row es nula, entonces la selección es una columna. Si la propiedad column es nula, entonces la selección es una fila. Si ambas no son nulas, entonces es un elemento de datos específico. Puedes llamar al método DataTable.getValue() para obtener el valor del elemento seleccionado. El arreglo recuperado se puede pasar a setSelection().

    Ejemplo

    function myClickHandler(){
      var selection = myVis.getSelection();
      var message = '';
    
      for (var i = 0; i < selection.length; i++) {
        var item = selection[i];
        if (item.row != null && item.column != null) {
          message += '{row:' + item.row + ',column:' + item.column + '}';
        } else if (item.row != null) {
          message += '{row:' + item.row + '}';
        } else if (item.column != null) {
          message += '{column:' + item.column + '}';
        }
      }
      if (message == '') {
        message = 'nothing';
      }
      alert('You selected ' + message);
    }

    removeAction()

    Opcionalmente, esto se expone mediante visualizaciones que tienen información sobre la herramienta y permiten acciones con información sobre la herramienta.

    Quita el objeto de acción de información sobre la herramienta con el elemento actionID solicitado del gráfico.

    Ejemplo:

    // Removes an action from chart with the ID of 'alertAction'.
    chart.removeAction('alertAction');

    setAction()

    Opcionalmente, esto se expone mediante visualizaciones que tienen información sobre la herramienta y permiten acciones con información sobre la herramienta. Solo funciona para los gráficos principales (barra, columna, línea, área, dispersión, combinación, burbuja, gráfico, anillo, candelabro, histograma, área escalonada).

    Establece una acción de información sobre la herramienta que se ejecutará cuando el usuario haga clic en el texto de la acción.

    setAction(action object)

    El método setAction toma un objeto como su parámetro de acción. Este objeto debe especificar 3 propiedades: id (el ID de la acción que se establece), text (el texto que debe aparecer en la información sobre la herramienta de la acción) y action (la función que se debe ejecutar cuando un usuario hace clic en el texto de la acción).

    Todas las acciones de información sobre la herramienta se deben configurar antes de llamar al método draw() del gráfico.

    Ejemplo:

    // Sets a tooltip action which will pop an alert box on the screen when triggered.
    chart.setAction({
      id: 'alertAction',
      text: 'Trigger Alert',
      action: function() {
        alert('You have triggered an alert');
      }
    });

    El método setAction también puede definir dos propiedades adicionales: visible y enabled. Estas propiedades deben ser funciones que muestren valores boolean que indiquen si la acción de información sobre la herramienta será visible o habilitada.

    Ejemplo:

    // The visible/enabled functions can contain any logic to determine their state
    // as long as they return boolean values.
    chart.setAction({
      id: 'alertAction',
      text: 'Trigger Alert',
      action: function() {
        alert('You have triggered an alert');
      },
      visible: function() {
        return true;
      },
      enabled: function() {
        return true;
      }
    });

    setSelection()

    De manera opcional, selecciona una entrada de datos en la visualización; por ejemplo, un punto en un gráfico de áreas o una barra en un gráfico de barras. Cuando se llama a este método, la visualización debe indicar visualmente cuál es la nueva selección. La implementación de setSelection() no debe activar un evento de "selección". Las visualizaciones pueden ignorar parte de la selección. Por ejemplo, una tabla en la que solo se pueden mostrar las filas seleccionadas puede ignorar los elementos de celda o de columna en su implementación de setSelection(), o puede seleccionar la fila completa.

    Cada vez que se llama a este método, se anula la selección de todos los elementos seleccionados y se debe aplicar la nueva lista de selección que se pasa. No hay una forma explícita de anular la selección de elementos individuales. Para anular la selección de elementos individuales, llama a setSelection() con los elementos a continuar seleccionados. Para anular la selección de todos los elementos, llama a setSelection(), setSelection(null) o setSelection([]).

    setSelection(selection_array)
    matriz_de_selección
    Un arreglo de objetos, cada uno con una fila numérica o propiedad de columna. row y column son el número de columna o fila basado en cero de un elemento en la tabla de datos para seleccionar. Para seleccionar una columna completa, establece row en nulo; para seleccionar una fila completa, establece column en nulo. Ejemplo: setSelection([{row:0,column:1},{row:1, column:null}]) selecciona la celda en (0,1) y toda la fila 1.

    Métodos estáticos variados

    Esta sección contiene varios métodos útiles expuestos en el espacio de nombres google.visualization.

    arrayToDataTable()

    Este método toma un arreglo de dos dimensiones y lo convierte en un DataTable.

    Los tipos de datos de la columna se determinan automáticamente según los datos proporcionados. Los tipos de datos de columnas también se pueden especificar mediante la notación de literales de objetos de la primera fila (la fila del encabezado de la columna) del arreglo (es decir, {label: 'Start Date', type: 'date'}). También se pueden usar las funciones de datos opcionales, pero deben definirse de forma explícita con la notación literal de objetos. La notación literal de objeto también se puede usar para cualquier celda, lo que te permite definir Objetos de celda.

    Sintaxis

    google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)
    dosDArray
    Un arreglo bidimensional en el que cada fila representa una fila en la tabla de datos. Si opt_firstRowIsData es falso (el valor predeterminado), la primera fila se interpretará como etiquetas de encabezado. Los tipos de datos de cada columna se interpretan automáticamente a partir de los datos proporcionados. Si una celda no tiene valor, especifica un valor nulo o vacío según corresponda.
    opt_firstRowIsData
    Define si la primera fila define una fila de encabezado o no. Si es verdadero, se supone que todas las filas son datos. Si es falso, se supone que la primera fila es una fila de encabezado y los valores se asignan como etiquetas de columna. El valor predeterminado es falso.

    Qué muestra

    Un nuevo DataTable.

    Ejemplos

    En el siguiente código, se muestran tres formas de crear el mismo objeto DataTable:

    // Version 1: arrayToDataTable method
    var data2 = google.visualization.arrayToDataTable([
      [{label: 'Country', type: 'string'},
       {label: 'Population', type: 'number'},
       {label: 'Area', type: 'number'},
       {type: 'string', role: 'annotation'}],
      ['CN', 1324, 9640821, 'Annotated'],
      ['IN', 1133, 3287263, 'Annotated'],
      ['US', 304, 9629091, 'Annotated'],
      ['ID', 232, 1904569, 'Annotated'],
      ['BR', 187, 8514877, 'Annotated']
    ]);
    
    // Version 2: DataTable.addRows
    var data3 = new google.visualization.DataTable();
    data3.addColumn('string','Country');
    data3.addColumn('number','Population');
    data3.addColumn('number','Area');
    data3.addRows([
      ['CN', 1324, 9640821],
      ['IN', 1133, 3287263],
      ['US', 304, 9629091],
      ['ID', 232, 1904569],
      ['BR', 187, 8514877]
    ]);
    
    // Version 3: DataTable.setValue
    var data = new google.visualization.DataTable();
    data.addColumn('string','Country');
    data.addColumn('number', 'Population');
    data.addColumn('number', 'Area');
    data.addRows(5);
    data.setValue(0, 0, 'CN');
    data.setValue(0, 1, 1324);
    data.setValue(0, 2, 9640821);
    data.setValue(1, 0, 'IN');
    data.setValue(1, 1, 1133);
    data.setValue(1, 2, 3287263);
    data.setValue(2, 0, 'US');
    data.setValue(2, 1, 304);
    data.setValue(2, 2, 9629091);
    data.setValue(3, 0, 'ID');
    data.setValue(3, 1, 232);
    data.setValue(3, 2, 1904569);
    data.setValue(4, 0, 'BR');
    data.setValue(4, 1, 187);
    data.setValue(4, 2, 8514877);

    drawChart().

    Este método crea un gráfico en una sola llamada. La ventaja de usar este método es que requiere un poco menos de código, y puedes serializar y guardar visualizaciones como strings de texto para volver a usar. Este método no muestra un controlador para el gráfico creado, por lo que no puedes asignar objetos de escucha de métodos para detectar eventos del gráfico.

    Sintaxis

    google.visualization.drawChart(chart_JSON_or_object)
    chart_JSON_or_object
    Es una string literal JSON o un objeto JavaScript, con las siguientes propiedades (distingue entre mayúsculas y minúsculas):
    Propiedad Tipo Obligatoria Predeterminado Descripción
    Tipo de gráfico String Obligatoria ninguno El nombre de clase de la visualización. Se puede omitir el nombre del paquete google.visualization en los gráficos de Google. Si aún no se cargó la biblioteca de visualización adecuada, este método cargará la biblioteca por ti si es una visualización de Google. Debes cargar las visualizaciones de terceros de forma explícita. Ejemplos: Table, PieChart, example.com.CrazyChart.
    ID de contenedor String Obligatoria ninguno El ID del elemento DOM en tu página que alojará la visualización.
    opciones Objeto Opcional ninguno Un objeto que describe las opciones de visualización. Puedes usar la notación literal de JavaScript o proporcionar un controlador para el objeto. Ejemplo: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
    tabla de datos Objeto Opcional Ninguno Un DataTable que se usa para propagar la visualización. Puede ser una representación de string JSON literal de un DataTable, como se describió antes, un controlador para un objeto google.visualization.DataTable propagado o un arreglo bidimensional como el que acepta arrayToDataTable(opt_firstRowIsData=false) . Debes especificar esta propiedad o la propiedad dataSourceUrl.
    URL de la fuente de datos String Opcional Ninguno Una consulta de fuente de datos para propagar los datos del gráfico (por ejemplo, una Hoja de cálculo de Google). Debes especificar esta propiedad o la propiedad dataTable.
    búsqueda String Opcional Ninguno Si especificas dataSourceUrl, tienes la opción de especificar una string de consulta similar a SQL mediante el lenguaje de consulta de visualización para filtrar o manipular los datos.
    intervalo de actualización Number Opcional Ninguno Con qué frecuencia, en segundos, la visualización debe actualizar su fuente de consultas. Usa esto solo cuando especifiques dataSourceUrl.
    vista Objeto O arreglo Opcional Ninguno Configura un objeto inicializador DataView, que actúa como un filtro sobre los datos subyacentes, como lo define el parámetro dataTable o dataSourceUrl. Puedes pasar una string o un objeto inicializador DataView, como el que muestra dataview.toJSON(). Ejemplo: "view": {"columns": [1, 2]} También puedes pasar un arreglo de objetos inicializadores DataView, en cuyo caso el primer DataView del arreglo se aplica a los datos subyacentes para crear una tabla de datos nueva, el segundo DataView se aplica a la tabla de datos que resulta de la aplicación de la primera DataView, y así sucesivamente.

    Ejemplos

    Crea un gráfico de tabla basado en una fuente de datos de hoja de cálculo y, además, incluye la consulta SELECT A,D WHERE D > 100 ORDER BY D

    <script type="text/javascript">
      google.charts.load('current');  // Note: No need to specify chart packages.
      function drawVisualization() {
        google.visualization.drawChart({
          "containerId": "visualization_div",
          "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
          "query":"SELECT A,D WHERE D > 100 ORDER BY D",
          "refreshInterval": 5,
          "chartType": "Table",
          "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
          }
       });
     }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>

    En el siguiente ejemplo, se crea la misma tabla, pero se crea un DataTable de forma local:

    <script type='text/javascript'>
      google.charts.load('current');
      function drawVisualization() {
        var dataTable = [
          ["Country", "Population Density"],
          ["Indonesia", 117],
          ["China", 137],
          ["Nigeria", 142],
          ["Pakistan", 198],
          ["India", 336],
          ["Japan", 339],
          ["Bangladesh", 1045]
        ];
        google.visualization.drawChart({
          "containerId": "visualization_div",
          "dataTable": dataTable,
          "refreshInterval": 5,
          "chartType": "Table",
          "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true,
          }
        });
      }
      google.charts.setOnLoadCallback(drawVisualization);
    </script>

    En este ejemplo, se pasa una representación de string JSON del gráfico, que puedes haber cargado desde un archivo:

    <script type="text/javascript">
      google.charts.load('current');
      var myStoredString = '{"containerId": "visualization_div",' +
        '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
        '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
        '"refreshInterval": 5,' +
        '"chartType": "Table",' +
        '"options": {' +
        '   "alternatingRowStyle": true,' +
        '   "showRowNumber" : true' +
        '}' +
      '}';
      function drawVisualization() {
        google.visualization.drawChart(myStoredString);
      }
      google.charts.setOnLoadCallback(drawVisualization);
    </script>

    drawToolbar()

    Este es el constructor para el elemento de la barra de herramientas que se puede adjuntar a muchas visualizaciones. Esta barra de herramientas permite al usuario exportar los datos de visualización en diferentes formatos o proporcionar una versión integrable de la visualización para usarla en diferentes lugares. Consulta la página de la barra de herramientas para obtener más información y un ejemplo de código.