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'}] ]);
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()
yaddRows()
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 |
---|---|---|
O
|
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 La primera firma tiene los siguientes parámetros:
La segunda firma tiene un solo parámetro de objeto con los siguientes miembros:
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.
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.
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.
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 |
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
|
getColumnProperty(columnIndex, name)
|
Automático |
Muestra el valor de una propiedad con nombre o
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
|
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.
El tipo de columna que se muestra puede ser uno de los siguientes: |
getDistinctValues(columnIndex) |
Arreglo de objetos |
Muestra los valores únicos en una columna determinada, en orden ascendente.
El tipo de objetos mostrados es el mismo que el que muestra el método |
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
Otra propiedad opcional,
Ejemplo: |
getFormattedValue(rowIndex, columnIndex)
|
String |
Muestra el valor con formato de la celda en los índices de fila y de columna especificados.
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
|
getProperty(rowIndex, columnIndex, name)
|
Automático |
Muestra el valor de una propiedad con nombre o
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
|
getRowProperty(rowIndex, name)
|
Automático |
Muestra el valor de una propiedad con nombre o
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
El valor que se muestra es un arreglo de números; cada número es un índice de una fila
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. 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
Consulta también: setTableProperties setTableProperty |
getValue(rowIndex, columnIndex) |
Objeto |
Muestra el valor de la celda en los índices de fila y columna especificados.
El tipo del valor que se muestra depende del tipo de columna (consulta getColumnType):
|
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.
Consulta también: addColumn |
insertRows(rowIndex, numberOrArray) |
Ninguno |
Inserta la cantidad de filas especificada en el índice de fila especificado.
Consulta también: addRows |
removeColumn(columnIndex) |
Ninguno |
Quita la columna del índice especificado.
Consulta también: removeColumns |
removeColumns(columnIndex, numberOfColumns)
|
Ninguno |
Quita la cantidad especificada de columnas a partir de la columna en el índice especificado.
Consulta también: removeColumn |
removeRow(rowIndex) |
Ninguno |
Quita la fila del índice especificado.
Consulta también: removeRows |
removeRows(rowIndex, numberOfRows) |
Ninguno |
Quita la cantidad especificada de filas de la fila en el índice especificado.
Consulta también: removeRow |
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])
|
Ninguno |
Establece el valor, el valor con formato o las propiedades de una celda.
Consulta también: setValue(), setFormattedValue(), setProperty(), setProperties(). |
setColumnLabel(columnIndex, label)
|
Ninguno |
Establece la etiqueta de una columna.
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.
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.
Consulta también: setColumnProperty getColumnProperty |
setFormattedValue(rowIndex, columnIndex, formattedValue)
|
Ninguno |
Establece el valor con formato de una celda.
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.
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.
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.
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.
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.
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.
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.
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]
-
"boolean": el valor booleano de JavaScript ("true" o "false"). Valor de ejemplo:
-
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 elDataTable
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'}]
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.
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 propiedadv
debe ser nula, aunque aún puede tener propiedadesf
yp
. -
f
(opcional): Es una versión de string del valorv
, con formato para mostrar. Por lo general, los valores coincidirán, aunque no es necesario, por lo que si especificasDate(2008, 0, 1)
parav
, debes especificar "1 de enero de 2008" o alguna string similar para esta propiedad. Este valor no se compara con el valorv
. 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 dev
con el formateador predeterminado. Los valoresf
se pueden modificar mediante tu propio formateador, se pueden configurar consetFormattedValue()
osetCell()
, o se pueden recuperar congetFormattedValue()
. -
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étodosgetProperty()
ygetProperties()
. 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
desdeDataTable
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étodossetRows() or hideRows()
, y agregas o quitas filas de la tabla subyacente, el comportamiento será inesperado; deberás crear unaDataView
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 adraw()
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
oDataView
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étodosset...()
ohide...()
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 elDataView
, en el que llamaste aDataView.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.
Ejemplo: Si ya se llamó a |
getTableRowIndex(viewRowIndex) |
Number |
Muestra el índice en la tabla subyacente (o vista) de una fila dada especificada por su índice en esta vista.
Ejemplo: Si ya se llamó a |
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.
Ejemplo: Si ya se llamó a |
getViewColumns() |
Arreglo de números |
Muestra las columnas en esta vista, en orden. Es decir, si llamas a |
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.
Ejemplo: Si ya se llamó a |
getViewRows() |
Arreglo de números |
Muestra las filas en esta vista, en orden. Es decir, si llamas a |
hideColumns(columnIndexes) |
ninguno |
Oculta las columnas especificadas de la vista actual.
Ejemplo: Si tienes una tabla con 10 columnas, llamas a |
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) |
Ninguno |
Oculta las filas especificadas de la vista actual.
Ejemplo: Si tienes una tabla con 10 filas, llamas a |
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.
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) |
Ninguno |
Establece las filas visibles en esta vista en función de los números de índice de la tabla o vista subyacente.
Ejemplo: Para crear una vista con las filas tres y cero de una tabla o vista subyacente: |
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.
|
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
Cualquier cambio que realices en el objeto mostrado se reflejará en el gráfico la próxima vez que llames a |
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.
|
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:
-
Carga el paquete
charteditor
. Engoogle.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. -
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. -
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. -
Llama a
ChartEditor.openDialog()
y pasa el elementoChartWrapper
. Se abrirá el cuadro de diálogo. Los botones de diálogo permiten al usuario cerrar el editor. La instanciaChartEditor
está disponible mientras esté dentro del alcance; no se destruye automáticamente después de que el usuario cierra el diálogo. - 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
|
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 |
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:
|
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 agroup()
. - 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 [[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.
- Obtén el objeto
DataTable
propagado. - Para cada columna a la que quieras cambiarle el formato, haz lo siguiente:
- 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).
- Crea tu formateador y pasa el objeto de opciones.
-
Llama a
formatter
.format(table, colIndex)
y pasa el número de columnaDataTable
(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ónallowHtml
, debes establecerla como verdadera.
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:
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.
// 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.
|
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 | EjemploDescripció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.
|
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
|
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:
No puedes especificar |
pattern |
Patrón de formato personalizado para aplicar al valor, similar al formato de fecha y hora de ICU.
Por ejemplo:
No puedes especificar |
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 |
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:
|
"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":
|
"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
La string de formato es un subconjunto del conjunto de patrones de ICU.
Por ejemplo, |
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 |
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
Código de muestraEn 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 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:
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
|
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 faltatqrt
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".
-
sendMethod: [opcional, string] especifica el método que se usa para enviar la consulta. Elige uno de los siguientes valores de string:
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 Si usas este método, debes llamarlo antes de llamar al método
Para cancelar este método, vuelve a llamarlo con cero (el valor predeterminado) o llama a |
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:
|
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.
|
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
|
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.
|
removeAll(container) |
Ninguno |
Quita todos los bloques de errores de un contenedor especificado. Si el contenedor especificado no existe, se mostrará un error.
|
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.
|
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.
- google.visualization.events.addListener() y google.visualization.events.addOneTimeListener() detectan eventos.
- google.visualization.events.removeListener() quita un objeto de escucha existente.
- google.visualization.events.removeAllListeners() quita todos los objetos de escucha de un gráfico específico.
- google.visualization.events.trigger() activa un evento.
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.
- Constructor
- draw()
- getAction() [opcional]
- getSelection() [opcional]
- removeAction() [opcional]
- setAction() [opcional]
- setSelection() [opcional]
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 unDataView
que contiene los datos que se usarán para dibujar el gráfico. No hay un método estándar para extraer unaDataTable
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
ycolumn
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, establecerow
en nulo; para seleccionar una fila completa, establececolumn
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.