Referência da API de visualização do Google

Nesta página, listamos os objetos expostos pela API Google Visualization e os métodos padrão expostos por todas as visualizações.

Observação:o namespace da API de visualização do Google é google.visualization.*

1. Classe DataTable
2. Classe DataView
3. Classe ChartWrapper
4. Classe Editor de gráficos
5. Métodos de manipulação de dados
   1. group().
   2. join()
6. Formatadores
   1. ArrowFormat
   2. BarFormat
   3. ColorFormat
   4. DateFormat
   5. NumberFormat
   6. PatternFormat
7. Classe GadgetHelper
8. Classes de consulta
   1. Consulta
   2. QueryResponse
9. Classe de exibição de erros
10. Eventos
    1. google.visualization.events.addListener()
    2. google.visualization.events.addOneTimeListener()
    3. google.visualization.events.removeListener()
    4. google.visualization.events.removeAllListeners()
    5. google.visualization.events.trigger()
11. Métodos e propriedades de visualização padrão
    1. Construtor
    2. draw() (em inglês)
    3. getAction()
    4. getSelection()
    5. removeAction()
    6. setAction()
    7. setSelection()
12. Métodos estáticos variados
    1. arrayToDataTable()
    2. drawChart()
    3. drawToolbar()

Observação sobre matrizes

Alguns navegadores não lidam corretamente com vírgulas à direita em matrizes JavaScript, portanto, não as use. Não há problema em valores vazios no meio de uma matriz. Por exemplo:

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

Classe DataTable

Representa uma tabela de valores bidimensional e mutável. Para fazer uma cópia somente leitura de um DataTable (opcionalmente filtrado para mostrar valores, linhas ou colunas específicos), crie um DataView.

Cada coluna recebe um tipo de dados e várias propriedades opcionais, incluindo ID, rótulo e string de padrão.

Além disso, é possível atribuir propriedades personalizadas (pares de nome/valor) a qualquer célula, linha, coluna ou à tabela inteira. Algumas visualizações aceitam propriedades personalizadas específicas. Por exemplo, a visualização de tabela aceita uma propriedade de célula chamada "style", que permite atribuir uma string de estilo CSS in-line à célula da tabela renderizada. Uma visualização precisa descrever na documentação todas as propriedades personalizadas compatíveis.

Consulte também: QueryResponse.getDataTable

Construtor

Sintaxe

DataTable(opt_data, opt_version)

opt_data

[Opcional] Dados usados para inicializar a tabela. Pode ser o JSON retornado chamando DataTable.toJSON() em uma tabela preenchida ou um objeto JavaScript que contém dados usados para inicializar a tabela. A estrutura do objeto literal JavaScript é descrita aqui. Se esse parâmetro não for fornecido, uma nova tabela de dados vazia será retornada.

opt_version

[Opcional] Um valor numérico que especifica a versão do protocolo de transferência usado. Usado apenas por implementadores de fontes de dados de ferramentas de gráficos. A versão atual é 0.6.

Detalhes

O objeto DataTable é usado para armazenar os dados transmitidos em uma visualização. Uma DataTable é uma tabela bidimensional básica. Todos os dados em cada coluna precisam ter o mesmo tipo de dados. Cada coluna tem um descritor que inclui o tipo de dados, um rótulo para essa coluna (que pode ser exibido por uma visualização) e um ID, que pode ser usado para se referir a uma coluna específica (como alternativa ao uso de índices de coluna). O objeto DataTable também é compatível com um mapa de propriedades arbitrárias atribuídas a um valor específico, uma linha, uma coluna ou todo o DataTable. As visualizações podem usá-las para auxiliar recursos adicionais. Por exemplo, a visualização de tabela usa propriedades personalizadas para permitir que você atribua nomes ou estilos de classe arbitrários a células individuais.

Cada célula da tabela tem um valor. As células podem ter um valor nulo ou do tipo especificado pela coluna. Opcionalmente, as células podem ter uma versão "formatada" dos dados. Trata-se de uma versão em string dos dados, formatada para exibição por uma visualização. Uma visualização pode usar (mas não é obrigatório) a versão formatada para exibição, mas sempre usará os próprios dados para classificações ou cálculos feitos (como determinar em que parte de um gráfico colocar um ponto). Um exemplo pode ser atribuir os valores "baixo", "médio" e "alto" como valores formatados a valores numéricos de célula de 1, 2 e 3.

Para adicionar linhas de dados depois de chamar o construtor, você pode chamar addRow() para uma única linha ou addRows() para várias linhas. Também é possível adicionar colunas chamando os métodos addColumn(). Também existem métodos de remoção para linhas e colunas, mas, em vez de remover linhas ou colunas, crie uma DataView que seja uma visualização seletiva da DataTable.

Se você alterar valores em um DataTable depois de ele ser transmitido para o método draw() de uma visualização, as mudanças não mudarão imediatamente o gráfico. Chame draw() novamente para refletir as mudanças.

Observação: o Google Charts não executa nenhuma validação em tabelas de dados. Nesse caso, a renderização dos gráficos ficaria mais lenta. Se você fornecer um número em que sua coluna esteja esperando uma string, ou vice-versa, o Gráficos Google fará o seu melhor para interpretar o valor de uma forma que faça sentido, mas não sinalizará erros.

Exemplos

O exemplo a seguir demonstra como instanciar e preencher um DataTable com uma string literal, com os mesmos dados mostrados no exemplo de JavaScript acima:

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);

O exemplo a seguir cria um novo DataTable vazio e o preenche manualmente com os mesmos dados acima:

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'}]
]);

Devo criar meu DataTable em JavaScript ou em notação literal de objeto?

Você pode criar um DataTable chamando o construtor sem parâmetros e, em seguida, adicionando valores chamando os métodos addColumn()/addRows() listados abaixo ou transmitindo um objeto literal JavaScript preenchido para iniciá-lo. Os dois métodos são descritos abaixo. Qual delas você deve usar?

• Criar e preencher uma tabela em JavaScript chamando addColumn(), addRow() e addRows() é um código muito legível. Esse método é útil quando você precisa inserir o código manualmente. Ele é mais lento do que usar a notação literal de objeto (descrita a seguir), mas em tabelas menores (digamos, com 1.000 células), você provavelmente não notará muita diferença.
• A declaração direta do objeto DataTable usando a notação literal de objeto é consideravelmente mais rápida em tabelas grandes. No entanto, pode ser uma sintaxe complicada acertar. Use isso se for possível gerar a sintaxe literal do objeto no código, o que reduz a possibilidade de erros.

 

Métodos

Método	Valor de retorno	Descrição
addColumn(type, opt_label, opt_id) OU addColumn(description_object)	Número	Adiciona uma nova coluna à tabela de dados e retorna o índice da nova coluna. Todas as células da nova coluna recebem um valor null. Esse método tem duas assinaturas: A primeira assinatura tem os seguintes parâmetros: type: uma string com o tipo de dados dos valores da coluna. O tipo pode ser um dos seguintes: 'string', 'number', 'boolean', 'date', 'datetime', e 'timeofday'.. opt_label [opcional]: uma string com o rótulo da coluna. O rótulo da coluna normalmente é exibido como parte da visualização, por exemplo, como um cabeçalho de coluna em uma tabela ou como um rótulo de legenda em um gráfico de pizza. Se nenhum valor for especificado, será atribuída uma string vazia. opt_id - [Opcional] Uma string com um identificador exclusivo para a coluna. Se nenhum valor for especificado, será atribuída uma string vazia. A segunda assinatura tem um único parâmetro de objeto com os seguintes membros: type: string que descreve o tipo de dados da coluna. Mesmos valores que type acima. label - [Opcional, string] é um rótulo para a coluna. id - [Opcional, string] é um ID para a coluna. role - [opcional, string] é um papel para a coluna. pattern - [opcional, string] é uma string de formato de número (ou data) que especifica como exibir o valor da coluna. Consulte também: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole
addRow(opt_cellArray)	Número	Adiciona uma nova linha à tabela de dados e retorna o índice da nova linha. opt_cellArray [opcional] Um objeto de linha, na notação JavaScript, que especifica os dados para a nova linha. Se o parâmetro não for incluído, o método apenas adicionará uma linha nova e vazia ao final da tabela. Esse parâmetro é uma matriz de valores de célula: se você quiser especificar apenas um valor para uma célula, basta fornecer o valor da célula (por exemplo, 55 ou "hello". Se quiser especificar um valor e/ou propriedades formatados para a célula, use um objeto de célula, por exemplo, {v:55, f:'Cinquenta e cinco'}). É possível misturar valores simples e objetos de célula na mesma chamada de método. Use null ou uma entrada de matriz vazia para uma célula vazia. Exemplos: 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)	Número	Adiciona novas linhas à tabela de dados e retorna o índice da última linha adicionada. Você pode chamar esse método para criar novas linhas vazias ou com dados usados para preencher as linhas, conforme descrito abaixo. numOrArray: um número ou uma matriz: Número: um número que especifica quantas linhas novas não preenchidas serão adicionadas. Matriz: uma matriz de objetos row usados para preencher um conjunto de novas linhas. Cada linha é um objeto, conforme descrito em addRow(). Use null ou uma entrada de matriz vazia para uma célula vazia. Exemplo: 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. ]); Consulte também: insertRows
clone()	DataTable	Retorna um clone da tabela de dados. O resultado é uma cópia detalhada da tabela de dados, exceto as propriedades da célula, propriedades da linha, propriedades da tabela e propriedades da coluna, que são cópias superficiais. Isso significa que propriedades não primitivas são copiadas por referência, enquanto propriedades primitivas são copiadas por valor.
getColumnId(columnIndex)	String	Retorna o identificador de uma determinada coluna especificada pelo índice de colunas na tabela subjacente. Para tabelas de dados recuperadas por consultas, o identificador de coluna é definido pela fonte de dados e pode ser usado para se referir a colunas ao usar a linguagem de consulta. Consulte também: Query.setQuery
getColumnIndex(columnIdentifier)	String, número	Retorna o índice de uma determinada coluna especificada pelo índice, ID ou rótulo da coluna, se houver nesta tabela. Caso contrário, retorna -1. Quando columnIdentifier é uma string, ela é usada para encontrar a coluna primeiro pelo ID e depois pelo rótulo. Consulte também: getColumnId, getColumnLabel
getColumnLabel(columnIndex)	String	Retorna o rótulo de uma determinada coluna especificada pelo índice de colunas na tabela subjacente. O rótulo da coluna normalmente é exibido como parte da visualização. Por exemplo, o rótulo da coluna pode ser exibido como cabeçalho de coluna em uma tabela ou como rótulo de legenda em um gráfico de pizza. Para tabelas de dados recuperadas por consultas, o rótulo da coluna é definido pela fonte de dados ou pela cláusula label da linguagem da consulta. Consulte também: setColumnLabel
getColumnPattern(columnIndex)	String	Retorna o padrão de formatação usado para formatar os valores da coluna especificada. columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). Para tabelas de dados recuperadas por consultas, o padrão de coluna é definido pela fonte de dados ou pela cláusula format da linguagem de consulta. Um exemplo de padrão é '#,##0.00'. Para saber mais sobre padrões, consulte a referência de linguagem de consulta.
getColumnProperties(columnIndex)	Objeto	Retorna um mapa com todas as propriedades da coluna especificada. Observe que o objeto de propriedades é retornado por referência. Portanto, a alteração de valores no objeto recuperado os altera no DataTable. columnIndex é o índice numérico da coluna para a qual recuperar propriedades.
getColumnProperty(columnIndex, name)	Automático	Retorna o valor de uma propriedade nomeada ou null se essa propriedade não estiver definida para a coluna especificada. O tipo de retorno varia, dependendo da propriedade. columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). name é o nome da propriedade, como uma string. Consulte também: setColumnProperty setColumnProperties
getColumnRange(columnIndex)	Objeto	Retorna os valores mínimo e máximo dos valores em uma coluna especificada. O objeto retornado tem as propriedades min e max. Se o intervalo não tiver valores, min e max conterão null. columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns().
getColumnRole(columnIndex)	String	Retorna o role da coluna especificada.
getColumnType(columnIndex)	String	Retorna o tipo de determinada coluna especificada pelo índice da coluna. columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). O tipo de coluna retornado pode ser um dos seguintes: 'string', 'number', 'boolean', 'date', 'datetime', e 'timeofday'
getDistinctValues(columnIndex)	Matriz de objetos	Retorna os valores exclusivos de determinada coluna, em ordem crescente. columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). O tipo dos objetos retornados é o mesmo retornado pelo método getValue.
getFilteredRows(filters)	Matriz de objetos	Retorna os índices das linhas que correspondem a todos os filtros fornecidos. Os índices são retornados em ordem crescente. A saída desse método pode ser usada como entrada para DataView.setRows() a fim de alterar o conjunto de linhas exibido em uma visualização. filters: uma matriz de objetos que descrevem um valor de célula aceitável. Um índice de linha será retornado por esse método se corresponder a todos os filtros fornecidos. Cada filtro é um objeto com uma propriedade column numérica que especifica o índice da coluna na linha a ser avaliada, além de um dos seguintes itens: Uma propriedade value com um valor que precisa corresponder exatamente à célula na coluna especificada. O valor precisa ser do mesmo tipo da coluna; ou Uma ou ambas as propriedades a seguir, do mesmo tipo da coluna que está sendo filtrada: minValue: um valor mínimo para a célula. O valor da célula na coluna especificada precisa ser maior ou igual a esse valor. maxValue: um valor máximo para a célula. O valor da célula na coluna especificada precisa ser menor ou igual a esse valor. Um valor nulo ou indefinido para minValue (ou maxValue) significa que o limite inferior (ou superior) do intervalo não será aplicado. Outra propriedade opcional, test, especifica uma função a ser combinada com filtragem de valor ou intervalo. A função é chamada com o valor da célula, os índices de linhas e colunas e a tabela de dados. Ele retornará "false" se a linha precisar ser excluída do resultado. Exemplo: getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}]) retorna uma matriz contendo, em ordem crescente, os índices de todas as linhas em que a quarta coluna (índice de colunas 3) tem exatamente 42 e a terceira coluna (índice de colunas 2) está entre "bar" e "foo" (inclusive).
getFormattedValue(rowIndex, columnIndex)	String	Retorna o valor formatado da célula nos índices de linha e coluna especificados. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). ColumnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). Para saber mais sobre a formatação de valores de colunas, consulte a referência de linguagem de consulta. Consulte também: setFormattedValue
getNumberOfColumns()	Número	Retorna o número de colunas na tabela.
getNumberOfRows()	Número	Retorna o número de linhas na tabela.
getProperties(rowIndex, columnIndex)	Objeto	Retorna um mapa de todas as propriedades da célula especificada. O objeto de propriedades é retornado por referência. Portanto, a alteração de valores no objeto recuperado os altera no DataTable. rowIndex é o índice de linhas da célula. columnIndex é o índice de coluna da célula.
getProperty(rowIndex, columnIndex, name)	Automático	Retorna o valor de uma propriedade nomeada ou null, se nenhuma propriedade estiver definida para a célula especificada. O tipo de retorno varia, dependendo da propriedade. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). name é uma string com o nome da propriedade. Consulte também: setCell setProperties setProperty
getRowProperties(rowIndex)	Objeto	Retorna um mapa com todas as propriedades da linha especificada. Observe que o objeto de propriedades é retornado por referência. Portanto, a alteração de valores no objeto recuperado os altera no DataTable. rowIndex é o índice da linha para a qual as propriedades serão recuperadas.
getRowProperty(rowIndex, name)	Automático	Retorna o valor de uma propriedade nomeada ou null se essa propriedade não estiver definida para a linha especificada. O tipo de retorno varia, dependendo da propriedade. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). name é uma string com o nome da propriedade. Consulte também: setRowProperty setRowProperties
getSortedRows(sortColumns)	Matriz de números	Retorna uma versão classificada da tabela sem modificar a ordem dos dados subjacentes. Para classificar permanentemente os dados, chame sort(). É possível especificar a classificação de várias maneiras, dependendo do tipo transmitido ao parâmetro sortColumns: Um único número especifica o índice da coluna a ser classificada. A classificação será feita em ordem crescente. Exemplo: sortColumns(3) classificará pela 4a coluna, em ordem crescente. Um único objeto que contém o número do índice de colunas para classificação e uma propriedade booleana opcional desc. Se desc for definido como verdadeiro, a coluna específica será classificada em ordem decrescente. Caso contrário, a classificação será em ordem crescente. Exemplos: sortColumns({column: 3}) classificará pela quarta coluna, em ordem crescente, e sortColumns({column: 3, desc: true}) classificará pela quarta coluna, em ordem decrescente. Uma matriz de números dos índices de coluna para classificação. O primeiro número é a coluna principal pela qual fazer a classificação, o segundo é a secundária e assim por diante. Isso significa que, quando dois valores na primeira coluna são iguais, os valores da coluna seguinte são comparados e assim por diante. Exemplo: sortColumns([3, 1, 6]) classificará primeiro pela 4a coluna (em ordem crescente), depois pela segunda coluna (em ordem crescente) e, por fim, pela 7a coluna (em ordem crescente). Uma matriz de objetos, cada um com o número do índice de coluna para classificação e uma propriedade booleana opcional desc. Se desc for definido como verdadeiro, a coluna específica será classificada em ordem decrescente. O padrão é a ordem crescente. O primeiro objeto é a coluna principal de classificação, o segundo é o secundário e assim por diante. Isso significa que, quando dois valores na primeira coluna são iguais, os valores na coluna seguinte são comparados e assim por diante. Exemplo: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) classificará primeiro pela quarta coluna (em ordem crescente), depois a coluna 2 em ordem decrescente e a coluna 7 em ordem decrescente. O valor retornado é uma matriz de números. Cada número é um índice de uma linha DataTable. A iteração nas linhas DataTable pela ordem da matriz retornada resulta em linhas ordenadas pelo sortColumns especificado. A saída pode ser usada como entrada para DataView.setRows() a fim de mudar rapidamente o conjunto de linhas exibido em uma visualização. Observe que a classificação é estável: isso significa que, se você classificar em valores iguais de duas linhas, a mesma classificação retornará as linhas na mesma ordem todas as vezes. Confira também: classificar Exemplo: para iterar em linhas ordenadas pela terceira coluna, use: var rowInds = data.getSortedRows([{column: 2}]); for (var i = 0; i < rowInds.length; i++) { var v = data.getValue(rowInds[i], 2); }
getTableProperties	Objeto	Retorna um mapa com todas as propriedades da tabela.
getTableProperty(name)	Automático	Retorna o valor de uma propriedade nomeada ou null, se nenhuma propriedade estiver definida para a tabela. O tipo de retorno varia, dependendo da propriedade. name é uma string com o nome da propriedade. Consulte também: setTableProperties setTableProperty
getValue(rowIndex, columnIndex)	Objeto	Retorna o valor da célula nos índices de linha e coluna especificados. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). O tipo do valor retornado depende do tipo de coluna (consulte getColumnType): Se o tipo da coluna for "string", o valor será uma string. Se o tipo de coluna for "número", o valor será um número. Se o tipo da coluna for "booleano", o valor será booleano. Se o tipo da coluna for "date" ou "datetime", o valor será um objeto de data. Se o tipo de coluna for "timeofday", o valor será uma matriz de quatro números: [hora, minuto, segundo, milissegundos]. Se o valor da célula for nulo, ele retornará null.
insertColumn(columnIndex, type [,label [,id]])	Nenhum	Insere uma nova coluna na tabela de dados, no índice especificado. Todas as colunas atuais no índice especificado ou após esse índice são movidas para um índice mais alto. columnIndex é um número com o índice obrigatório da nova coluna. type precisa ser uma string com o tipo de dados dos valores da coluna. O tipo pode ser um dos seguintes: 'string', 'number', 'boolean', 'date', 'datetime', e 'timeofday'. label precisa ser uma string com o rótulo da coluna. O rótulo da coluna normalmente é exibido como parte da visualização. Por exemplo, como cabeçalho de coluna em uma tabela ou como rótulo de legenda em um gráfico de pizza. Se nenhum valor for especificado, será atribuída uma string vazia. id precisa ser uma string com um identificador exclusivo para a coluna. Se nenhum valor for especificado, será atribuída uma string vazia. Consulte também: addColumn
insertRows(rowIndex, numberOrArray)	Nenhum	Insere o número especificado de linhas no índice de linhas especificado. rowIndex é o número do índice onde as novas linhas serão inseridas. As linhas serão adicionadas, começando pelo número de índice especificado. numberOrArray é um número de linhas novas e vazias a serem adicionadas ou uma matriz de uma ou mais linhas preenchidas para adicionar ao índice. Consulte addRows() para saber a sintaxe para adicionar uma matriz de objetos de linha. Consulte também: addRows
removeColumn(columnIndex)	Nenhum	Remove a coluna no índice especificado. columnIndex precisa ser um número com um índice de coluna válido. Consulte também: removeColumns
removeColumns(columnIndex, numberOfColumns)	Nenhum	Remove o número especificado de colunas a partir da coluna no índice especificado. numberOfColumns é o número de colunas a serem removidas. columnIndex precisa ser um número com um índice de coluna válido. Consulte também: removeColumn
removeRow(rowIndex)	Nenhum	Remove a linha no índice especificado. rowIndex precisa ser um número com um índice de linhas válido. Consulte também: removeRows
removeRows(rowIndex, numberOfRows)	Nenhum	Remove o número especificado de linhas a partir da linha no índice especificado. numberOfRows é o número de linhas a serem removidas. rowIndex precisa ser um número com um índice de linhas válido. Consulte também: removeRow
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])	Nenhum	Define o valor, o valor formatado e/ou as propriedades de uma célula. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). value [opcional] é o valor atribuído à célula especificada. Para evitar a substituição desse valor, defina esse parâmetro como undefined. Para limpar esse valor, defina-o como null. O tipo do valor depende do tipo da coluna (consulte getColumnType()): Se o tipo da coluna for "string", o valor deverá ser uma string. Se o tipo de coluna for "número", o valor deverá ser um número. Se o tipo de coluna é "booleano", o valor precisa ser booleano. Se o tipo da coluna for "date" ou "datetime", o valor deverá ser um objeto de data. Se o tipo de coluna for "timeofday", o valor deverá ser uma matriz de quatro números: [hora, minuto, segundo, milissegundos]. formattedValue [opcional] é uma string com o valor formatado como uma string. Para evitar a substituição desse valor, defina esse parâmetro como undefined. Para limpar esse valor e fazer com que a API aplique a formatação padrão a value, conforme necessário, defina-o como null. Para definir explicitamente um valor formatado vazio, defina-o como uma string vazia. O valor formatado é normalmente usado por visualizações para exibir rótulos de valor. Por exemplo, o valor formatado pode aparecer como um texto de rótulo em um gráfico de pizza. properties [opcional] é um Object (um mapa de nome/valor) com propriedades adicionais para essa célula. Para evitar a substituição desse valor, defina esse parâmetro como undefined. Para limpar esse valor, defina-o como null. Algumas visualizações aceitam propriedades de linha, coluna ou célula para modificar a exibição ou o comportamento. Consulte a documentação da visualização para saber quais propriedades são compatíveis. Consulte também: setValue(), setFormattedValue(), setProperty(), setProperties().
setColumnLabel(columnIndex, label)	Nenhum	Define o rótulo de uma coluna. columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). label é uma string com o rótulo a ser atribuído à coluna. O rótulo da coluna normalmente é exibido como parte da visualização. Por exemplo, o rótulo da coluna pode ser exibido como o cabeçalho da coluna em uma tabela ou como o rótulo da legenda em um gráfico de pizza. Consulte também: getColumnLabel
setColumnProperty(columnIndex, name, value)	Nenhum	Define uma propriedade de coluna única. Algumas visualizações aceitam propriedades de linha, coluna ou célula para modificar a exibição ou o comportamento delas. Consulte a documentação da visualização para saber quais propriedades são compatíveis. columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). name é uma string com o nome da propriedade. value é um valor de qualquer tipo a ser atribuído à propriedade nomeada definida na coluna especificada. Consulte também:setColumnProperties getColumnProperty
setColumnProperties(columnIndex, properties)	Nenhum	Define várias propriedades de coluna. Algumas visualizações aceitam propriedades de linha, coluna ou célula para modificar a exibição ou o comportamento delas. Consulte a documentação da visualização para saber quais propriedades são compatíveis. columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). properties é um Object (mapa de nome/valor) com propriedades adicionais para essa coluna. Se null for especificado, todas as propriedades adicionais da coluna serão removidas. Consulte também: setColumnProperty getColumnProperty
setFormattedValue(rowIndex, columnIndex, formattedValue)	Nenhum	Define o valor formatado de uma célula. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). formattedValue é uma string com o valor formatado para exibição. Para limpar esse valor e fazer com que a API aplique a formatação padrão ao valor da célula conforme necessário, defina como formattedValue null. Para definir explicitamente um valor formatado vazio, defina-o como uma string vazia. Consulte também: getFormattedValue
setProperty(rowIndex, columnIndex, name, value)	Nenhum	Define uma propriedade de célula. Algumas visualizações aceitam propriedades de linha, coluna ou célula para modificar a exibição ou o comportamento delas. Consulte a documentação da visualização para saber quais propriedades são compatíveis. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). name é uma string com o nome da propriedade. value é um valor de qualquer tipo a ser atribuído à propriedade nomeada especificada na célula especificada. Consulte também: setCell setProperties getProperty
setProperties(rowIndex, columnIndex, properties)	Nenhum	Define várias propriedades de célula. Algumas visualizações aceitam propriedades de linha, coluna ou célula para modificar a exibição ou o comportamento delas. Consulte a documentação da visualização para saber quais propriedades são compatíveis. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). properties é um Object (mapa de nome/valor) com outras propriedades para essa célula. Se null for especificado, todas as propriedades adicionais da célula serão removidas. Consulte também: setCell setProperty getProperty
setRowProperty(rowIndex, name, value)	Nenhum	Define uma propriedade de linha. Algumas visualizações aceitam propriedades de linha, coluna ou célula para modificar a exibição ou o comportamento delas. Consulte a documentação da visualização para saber quais propriedades são compatíveis. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). name é uma string com o nome da propriedade. value é um valor de qualquer tipo a ser atribuído à propriedade nomeada especificada na linha especificada. Consulte também: setRowProperties getRowProperty
setRowProperties(rowIndex, properties)	Nenhum	Define várias propriedades de linha. Algumas visualizações aceitam propriedades de linha, coluna ou célula para modificar a exibição ou o comportamento delas. Consulte a documentação da visualização para saber quais propriedades são compatíveis. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). properties é um Object (mapa de nome/valor) com propriedades adicionais para essa linha. Se null for especificado, todas as propriedades adicionais da linha serão removidas. Consulte também: setRowProperty getRowProperty
setTableProperty(name, value)	Nenhum	Define uma única propriedade de tabela. Algumas visualizações são compatíveis com propriedades de tabela, linha, coluna ou célula para modificar a exibição ou o comportamento. Consulte a documentação da visualização para saber quais propriedades são compatíveis. name é uma string com o nome da propriedade. value é um valor de qualquer tipo a ser atribuído à propriedade nomeada especificada da tabela. Consulte também: setTableProperties getTableProperty
setTableProperties(properties)	Nenhum	Define várias propriedades da tabela. Algumas visualizações são compatíveis com propriedades de tabela, linha, coluna ou célula para modificar a exibição ou o comportamento. Consulte a documentação da visualização para saber quais propriedades são compatíveis. properties é um Object (mapa de nome/valor) com propriedades adicionais para a tabela. Se null for especificado, todas as propriedades adicionais da tabela serão removidas. Consulte também: setTableProperty getTableProperty
setValue(rowIndex, columnIndex, value)	Nenhum	Define o valor de uma célula. Além de substituir qualquer valor de célula existente, esse método também limpa todos os valores e propriedades formatados da célula. rowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). columnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). Esse método não permite definir um valor formatado para essa célula. Para fazer isso, chame setFormattedValue(). value é o valor atribuído à célula especificada. O tipo do valor retornado depende do tipo de coluna (consulte getColumnType): Se o tipo da coluna for "string", o valor deverá ser uma string. Se o tipo de coluna for "número", o valor deverá ser um número. Se o tipo de coluna é "booleano", o valor precisa ser booleano. Se o tipo da coluna for "date" ou "datetime", o valor deverá ser um objeto de data. Se o tipo de coluna for "timeofday", o valor deverá ser uma matriz de quatro números: [hora, minuto, segundo, milissegundos]. Para qualquer tipo de coluna, o valor pode ser definido como null. Consulte também: setCell, setFormattedValue, setProperty, setProperties
sort(sortColumns)	Nenhum	Classifica as linhas de acordo com as colunas de classificação especificadas. O DataTable é modificado por esse método. Consulte getSortedRows() para conferir uma descrição dos detalhes de classificação. Esse método não retorna os dados classificados. Consulte também: getSortedRows Exemplo: para classificar pela terceira coluna e depois pela segunda, use: data.sort([{column: 2}, {column: 1}]);
toJSON()	String	Retorna uma representação JSON do DataTable que pode ser transmitida ao construtor DataTable. Por exemplo: {"cols":[{"id":"Col1","label":"","type":"date"}], "rows":[ {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]}, {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]} ] }

Formato do parâmetro literal JavaScript data do construtor

Você pode inicializar um DataTable transmitindo um objeto literal de string JavaScript para o parâmetro data. Vamos chamar esse objeto de data. É possível codificar esse objeto manualmente, de acordo com a descrição abaixo, ou usar uma biblioteca auxiliar de Python se você souber e seu site puder usá-la. No entanto, se você quiser construir o objeto manualmente, esta seção descreverá a sintaxe.

Primeiro, vamos mostrar um exemplo de um objeto JavaScript simples que descreve uma tabela com três linhas e três colunas (tipos String, Number e Date):

{
  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!'}
}

Agora vamos descrever a sintaxe:

O objeto data consiste em duas propriedades de nível superior obrigatórias, cols e rows, e uma propriedade p opcional que é um mapa de valores arbitrários.

Observação:todos os nomes de propriedades e constantes de string mostrados diferenciam maiúsculas de minúsculas. Além disso, as propriedades descritas como tendo um valor de string precisam ter o valor entre aspas. Por exemplo, se você quiser especificar a propriedade "type" como número, ela será expressa da seguinte maneira: type: 'number', mas o valor em si, como numérico, seria expresso assim: v: 42

Propriedade cols

cols é uma matriz de objetos que descrevem o ID e o tipo de cada coluna. Cada propriedade é um objeto com as seguintes propriedades (diferencia maiúsculas de minúsculas):

• type [Obrigatório] Tipo de dados dos dados na coluna. Oferece suporte aos seguintes valores de string (exemplos incluem a propriedade v: descrita posteriormente):
  • "boolean" - valor booleano do JavaScript ("true" ou "false"). Exemplo de valor: v:'true'
  • "number" - valor do número JavaScript. Exemplos de valores: v:7, v:3.14, v:-55
  • "string" - valor da string JavaScript. Exemplo de valor: v:'hello'
  • "date" - objeto de data JavaScript (mês zero), com a hora truncada. Exemplo de valor: v:new Date(2008, 0, 15)
  • "datetime" - objeto de data JavaScript incluindo a hora. Exemplo de valor: v:new Date(2008, 0, 15, 14, 30, 45)
  • "timeofday": matriz de três números e um quarto opcional, representando hora (0 indica meia-noite), minuto, segundo e milissegundo opcional. Exemplos de valores: v:[8, 15, 0], v: [6, 12, 1, 144]
• id [opcional] ID da string da coluna. Precisa ser exclusivo na tabela. Use caracteres alfanuméricos básicos para que a página não precise de escapes complicados para acessar a coluna em JavaScript. Tenha cuidado para não escolher uma palavra-chave JavaScript. Exemplo: id:'col_1'
• label [Opcional] Valor de string que algumas visualizações exibem para esta coluna. Exemplo: label:'Height'
• pattern [Opcional] Padrão de string que foi usado por uma fonte de dados para formatar valores de coluna numéricos, de data ou de hora. Isso é apenas para referência. Você provavelmente não precisará ler o padrão, e ele não precisa existir. O cliente da visualização do Google não usa esse valor (ele lê o valor formatado da célula). Se DataTable vier de uma fonte de dados em resposta a uma consulta com uma cláusula format, o padrão especificado nessa cláusula provavelmente será retornado nesse valor. Os padrões de padrão recomendados são a ICU DecimalFormat e SimpleDateFormat .
• p [Opcional] Um objeto que é um mapa de valores personalizados aplicados à célula. Esses valores podem ser de qualquer tipo JavaScript. Se a visualização for compatível com propriedades no nível da célula, elas serão descritas. Caso contrário, essa propriedade será ignorada. Exemplo:p:{style: 'border: 1px solid green;'}.

Exemplo do cols

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

Propriedade do rows

A propriedade rows contém uma matriz de objetos de linha.

Cada objeto de linha tem uma propriedade obrigatória chamada c, que é uma matriz de células nessa linha. Ele também tem uma propriedade p opcional que define um mapa de valores personalizados arbitrários a serem atribuídos à linha inteira. Se a visualização for compatível com propriedades no nível da linha, elas serão descritas. Caso contrário, essa propriedade será ignorada.

Objetos Células

Cada célula na tabela é descrita por um objeto com as seguintes propriedades:

• v [opcional] é o valor da célula. O tipo de dados precisa corresponder ao da coluna. Se a célula for nula, a propriedade v precisará ser nula, mas ainda poderá ter propriedades f e p.
• f [Opcional] Uma versão de string do valor v, formatada para exibição. Normalmente, os valores serão correspondentes, embora isso não seja necessário. Portanto, se você especificar Date(2008, 0, 1) para v, especifique "1o de janeiro de 2008" ou alguma string semelhante para essa propriedade. Esse valor não é comparado com o valor v. A visualização não vai usar esse valor para cálculo, apenas como um rótulo para exibição. Se omitido, uma versão de string de v será gerada automaticamente usando o formatador padrão. Os valores f podem ser modificados usando seu próprio formatador, definidos com setFormattedValue() ou setCell() ou recuperados com getFormattedValue().
• p [Opcional] Um objeto que é um mapa de valores personalizados aplicados à célula. Esses valores podem ser de qualquer tipo JavaScript. Se a visualização aceitar qualquer propriedade no nível da célula, ela vai descrevê-la. Essas propriedades podem ser recuperadas pelos métodos getProperty() e getProperties(). Exemplo: p:{style: 'border: 1px solid green;'}.

As células na matriz de linhas precisam estar na mesma ordem das descrições das colunas em cols. Para indicar uma célula nula, especifique null, deixe uma célula em branco em uma célula ou omita os membros à direita da matriz. Portanto, para indicar uma linha com nulo para as duas primeiras células, você pode especificar [ , , {cell_val}] ou [null, null, {cell_val}].

Aqui está um objeto de tabela de exemplo com três colunas, preenchidas com três linhas de dados:

{
  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'}
        ]}
  ]
}

Propriedade p

A propriedade p no nível da tabela é um mapa de valores personalizados aplicado a toda a DataTable. Esses valores podem ser de qualquer tipo JavaScript. Se a visualização for compatível com quaisquer propriedades no nível da tabela de dados, elas serão descritas. Caso contrário, essa propriedade estará disponível para uso do aplicativo. Exemplo: p:{className: 'myDataTable'}.

Classe DataView

Uma visualização somente leitura de um DataTable subjacente. Um DataView permite a seleção de apenas um subconjunto de colunas e/ou linhas. Ele também permite reordenar colunas/linhas e duplicar colunas/linhas.

Uma visualização é uma janela em tempo real na DataTable subjacente, não um snapshot estático dos dados. No entanto, você ainda precisa ter cuidado ao alterar a estrutura da própria tabela, conforme descrito aqui:

• A adição ou remoção de colunas da tabela não é refletida na visualização e pode causar um comportamento inesperado nela. Será necessário criar uma nova DataView no DataTable para capturar essas mudanças.
• Adicionar ou remover linhas da tabela subjacente é seguro, e as alterações serão propagadas para a visualização imediatamente. No entanto, é necessário chamar draw() em qualquer visualização após essa alteração para que o novo conjunto de linhas seja renderizado. Se a visualização tiver filtrado linhas chamando um dos métodos setRows() or hideRows(), e você adicionar ou remover linhas da tabela subjacente, o comportamento será inesperado. Será necessário criar um novo DataView para refletir a nova tabela.
• Alterar os valores de célula nas células existentes é seguro, e as alterações são imediatamente propagadas para DataView. No entanto, é necessário chamar draw() em qualquer visualização após essa alteração para que os novos valores de célula sejam renderizados.

Também é possível criar uma DataView usando outra DataView. Sempre que uma tabela ou visualização subjacente é mencionada, ela se refere ao nível imediatamente abaixo desse nível. Em outras palavras, ele se refere ao objeto de dados usado para construir esse DataView.

DataView também aceita colunas calculadas, que têm o valor calculado rapidamente usando uma função que você fornece. Por exemplo, você pode incluir uma coluna que seja a soma de duas colunas anteriores ou uma coluna que calcule e mostre o trimestre de uma data de outra coluna. Consulte setColumns() para mais detalhes.

Quando você oculta ou mostra linhas ou colunas para modificar um DataView, a visualização não é afetada até que você chame draw() na visualização novamente.

Você pode combinar DataView.getFilteredRows() com DataView.setRows() para criar um DataView com um subconjunto interessante de dados, como mostrado aqui:

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});

Construtores

Há duas maneiras de criar uma nova instância de DataView:

Construtor 1

var myView = new google.visualization.DataView(data)

data

Uma DataTable ou DataView usada para inicializar a visualização. Por padrão, a visualização contém todas as colunas e linhas na tabela ou visualização de dados subjacente, na ordem original. Para ocultar ou mostrar linhas ou colunas nessa visualização, chame os métodos apropriados set...() ou hide...().

Confira também:

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

 

Construtor 2

Este construtor cria um novo DataView atribuindo um DataView serializado a um DataTable. Ele ajuda a recriar o DataView que você serializado usando DataView.toJSON().

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

dados

O objeto DataTable usado para criar a DataView e em que você chamou DataView.toJSON(). Se essa tabela for diferente da original, você terá resultados imprevisíveis.

viewAsJson

A string JSON retornada por DataView.toJSON(). Esta é uma descrição de quais linhas mostrar ou ocultar na tabela de dados data.

Métodos

Método	Valor de retorno	Descrição
getColumnId getColumnLabel getColumnPattern getColumnProperty getColumnRange getColumnType getDistinctValues getFilteredRows getFormattedValue getNumberOfColumns getNumberOfRows getProperty getProperties getRowProperty getSortedRows getTableProperty getValue	Confira as descrições em DataTable.	Igual aos métodos DataTable equivalentes, exceto que os índices de linha/coluna se referem ao índice na visualização, e não à tabela/visualização relacionada.
getTableColumnIndex(viewColumnIndex)	Número	Retorna o índice na tabela subjacente (ou visualização) de uma determinada coluna especificada pelo índice nessa visualização. viewColumnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns(). Retorna -1 se for uma coluna gerada. Exemplo: se setColumns([3, 1, 4]) já foi chamado, então getTableColumnIndex(2) vai retornar 4.
getTableRowIndex(viewRowIndex)	Número	Retorna o índice na tabela (ou visualização) subjacente de uma linha especificada pelo índice nessa visualização. viewRowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows(). Exemplo: se setRows([3, 1, 4]) já foi chamado, então getTableRowIndex(2) vai retornar 4.
getViewColumnIndex(tableColumnIndex)	Número	Nessa visualização, retorna o índice que mapeia para uma determinada coluna especificada por seu índice na tabela (ou visualização) subjacente. Se houver mais de um índice desse tipo, retorna o primeiro (menor). Se esse índice não existir (a coluna especificada não está na visualização), retornará -1. tableColumnIndex precisa ser um número maior ou igual a zero e menor que o número de colunas retornado pelo método getNumberOfColumns() da tabela/visualização subjacente. Exemplo: se setColumns([3, 1, 4]) já foi chamado, então getViewColumnIndex(4) vai retornar 2.
getViewColumns()	Matriz de números	Retorna as colunas nessa visualização, em ordem. Ou seja, se você chamar setColumns com alguma matriz e depois chamar getViewColumns(), terá uma matriz idêntica.
getViewRowIndex(tableRowIndex)	Número	Nessa visualização, o índice é mapeado para uma determinada linha especificada pelo índice na tabela (ou visualização) subjacente. Se houver mais de um índice desse tipo, retorna o primeiro (menor). Se esse índice não existir (a linha especificada não está na visualização), retornará -1. tableRowIndex precisa ser um número maior ou igual a zero e menor que o número de linhas retornado pelo método getNumberOfRows() da tabela/visualização subjacente. Exemplo: se setRows([3, 1, 4]) já foi chamado, então getViewRowIndex(4) vai retornar 2.
getViewRows()	Matriz de números	Retorna as linhas nessa visualização, em ordem. Ou seja, se você chamar setRows com alguma matriz e depois chamar getViewRows(), terá uma matriz idêntica.
hideColumns(columnIndexes)	nenhum	Oculta as colunas especificadas da visualização atual. columnIndexes é uma matriz de números que representam os índices das colunas a serem ocultadas. Esses índices são os números do índice na tabela/visualização subjacente. Os números em columnIndexes não precisam estar em ordem (ou seja, [3,4,1] está bom). As colunas restantes mantêm a ordem do índice quando você as itera. Inserir um número de índice para uma coluna já oculta não é um erro, mas inserir um índice que não existe na tabela/visualização subjacente causará um erro. Para reexibir colunas, chame setColumns(). Exemplo: se você tiver uma tabela com 10 colunas e chamar setColumns([2,7,1,7,9]) e depois hideColumns([7,9]), as colunas na visualização serão [2,1].
hideRows(min, max)	Nenhum	Oculta todas as linhas com índices que estão entre o mínimo e o máximo (inclusive) da visualização atual. Essa é uma sintaxe conveniente para hideRows(rowIndexes) acima. Por exemplo, hideRows(5, 10) é equivalente a hideRows([5, 6, 7, 8, 9, 10]).
hideRows(rowIndexes)	Nenhum	Oculta as linhas especificadas da visualização atual. rowIndexes é uma matriz de números que representam os índices das linhas a serem ocultadas. Esses índices são os números do índice na tabela/visualização subjacente. Os números em rowIndexes não precisam estar em ordem (ou seja, [3,4,1] está bom). As linhas restantes mantêm a ordem do índice. Inserir um número de índice para uma linha já oculta não é um erro, mas inserir um índice que não existe na tabela/visualização subjacente causará um erro. Para reexibir linhas, chame setRows(). Exemplo: se você tiver uma tabela com 10 linhas e chamar setRows([2,7,1,7,9]) e depois hideRows([7,9]), as linhas na visualização serão [2,1].
setColumns(columnIndexes)	Nenhum	Especifica quais colunas são visíveis na visualização. Todas as colunas não especificadas ficarão ocultas. É uma matriz de índices de colunas na tabela/visualização subjacente ou em colunas calculadas. Se você não chamar esse método, o padrão será mostrar todas as colunas. A matriz também pode conter cópias para mostrar a mesma coluna várias vezes. As colunas serão exibidas na ordem especificada. columnIndexes: uma matriz de números e/ou objetos (pode ser combinada): Números especificam o índice da coluna de dados de origem a ser incluído na visualização. Os dados são trazidos sem modificações. Se for necessário definir explicitamente um papel ou outras propriedades de coluna, especifique um objeto com uma propriedade sourceColumn. Os objetos especificam uma coluna calculada. Uma coluna calculada cria um valor rapidamente para cada linha e o adiciona à visualização. O objeto precisa ter as seguintes propriedades: calc [função]: uma função que será chamada para cada linha na coluna para calcular um valor para essa célula. A assinatura da função é func(dataTable, row), em que dataTable é a DataTable de origem e row é o índice da linha de dados de origem. A função precisa retornar um único valor do tipo especificado por type. type [string]: o tipo JavaScript do valor que a função calc retorna. label [Opcional, string]: um rótulo opcional a ser atribuído à coluna gerada. Se não for especificada, a coluna de visualização não terá um rótulo. id [Opcional, string]: um ID opcional a ser atribuído à coluna gerada. sourceColumn - [Opcional, number] A coluna de origem a ser usada como valor. Se especificado, não especifique a propriedade calc ou type. Isso é semelhante a passar um número em vez de um objeto, mas permite que você especifique um papel e propriedades para a nova coluna. properties [opcional, objeto]: um objeto que contém as propriedades arbitrárias a serem atribuídas a essa coluna. Se não for especificada, a coluna de visualização não terá propriedades. role [opcional, string]: um papel a ser atribuído à coluna. Caso não seja especificado, o papel atual não será importado. Exemplos: // 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)	Nenhum	Define as linhas nessa visualização como todos os índices (na tabela/visualização subjacente) que estão entre o mínimo e o máximo (inclusive). Essa é uma sintaxe conveniente para o setRows(rowIndexes) abaixo. Por exemplo, setRows(5, 10) é equivalente a setRows([5, 6, 7, 8, 9, 10]).
setRows(rowIndexes)	Nenhum	Define as linhas visíveis nesta visualização, com base nos números de índice da tabela/visualização subjacente. rowIndexes precisa ser uma matriz de números de índice especificando quais linhas serão exibidas na visualização. A matriz especifica a ordem em que as linhas serão mostradas. As linhas podem ser duplicadas. Observe que apenas as linhas especificadas em rowIndexes serão mostradas. Esse método limpa todas as outras linhas da visualização. A matriz também pode conter cópias, o que duplica efetivamente a linha especificada nessa visualização. Por exemplo, setRows([3, 4, 3, 2]) fará com que a linha 3 apareça duas vezes nessa visualização. Assim, a matriz fornece um mapeamento das linhas da tabela/visualização subjacente para essa visualização. Use getFilteredRows() ou getSortedRows() para gerar uma entrada para esse método. Exemplo: para criar uma visualização com as linhas três e zero de uma tabela/visualização subjacente: view.setRows([3, 0])
toDataTable()	DataTable	Retorna um objeto DataTable preenchido com as linhas e colunas visíveis do DataView.
toJSON()	string	Retorna uma representação em string desse DataView. Essa string não contém os dados reais, mas contém apenas as configurações específicas de DataView, como linhas e colunas visíveis. Você pode armazenar essa string e transmiti-la ao construtor estático DataView.fromJSON() para recriar essa visualização. Isso não inclui as colunas geradas.

Classe ChartWrapper

Uma classe ChartWrapper é usada para unir o gráfico e processar todas as consultas de carregamento, desenho e fonte de dados do gráfico. A classe expõe métodos de conveniência para definir valores no gráfico e desenhá-lo. Essa classe simplifica a leitura de uma fonte de dados, porque não é necessário criar um gerenciador de callback de consulta. Também é possível usá-lo para salvar um gráfico facilmente para reutilização.

Outra vantagem de usar ChartWrapper é que você pode reduzir o número de carregamentos de biblioteca usando o carregamento dinâmico. Além disso, não é necessário carregar os pacotes explicitamente, já que o ChartWrapper processará a busca e o carregamento dos pacotes de gráficos para você. Confira mais detalhes nos exemplos abaixo.

No entanto, ChartWrapper atualmente propaga apenas um subconjunto de eventos gerados por gráficos: select, Ready e error. Outros eventos não são transmitidos pela instância do ChartWrapper. Para acessar outros eventos, chame getChart() e se inscreva nos eventos diretamente no identificador do gráfico, como mostrado aqui:

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!");
  }
}

Construtor

ChartWrapper(opt_spec)

opt_spec

[Opcional]: um objeto JSON que define o gráfico ou uma versão de string serializada desse objeto. O formato desse objeto é mostrado na documentação dodrawChart(). Se não for especificado, você precisará definir todas as propriedades apropriadas usando os métodos set... expostos por esse objeto.

Métodos

ChartWrapper expõe os seguintes métodos adicionais:

Método	Tipo de retorno	Descrição
draw(opt_container_ref)	Nenhum	Desenha o gráfico. É necessário chamar esse método depois de qualquer alteração feita no gráfico ou nos dados para mostrar as alterações. opt_container_ref [opcional]: uma referência a um elemento de contêiner válido na página. Se especificado, o gráfico será desenhado lá. Caso contrário, o gráfico será desenhado no elemento com o código especificado por containerId.
toJSON()	String	Retorna uma versão em string da representação JSON do gráfico.
clone()	ChartWrapper	Retorna uma cópia detalhada do wrapper do gráfico.
getDataSourceUrl()	String	Se esse gráfico receber os dados de uma fonte de dados, ele retornará o URL dessa fonte. Caso contrário, retorna nulo.
getDataTable()	google.visualization.DataTable	Se esse gráfico receber os dados de um DataTable definido localmente, ele retornará uma referência ao DataTable do gráfico. Se este gráfico receber dados de uma fonte de dados, ele retornará um valor nulo. Todas as alterações feitas no objeto retornado serão refletidas no gráfico na próxima vez que você chamar ChartWrapper.draw().
getChartType()	String	O nome da classe do gráfico encapsulado. Se for um gráfico do Google, o nome não será qualificado com google.visualization. Por exemplo, em um gráfico de mapa de árvore, ele retorna "Treemap" em vez de "google.visualization.treemap".
getChartName()	String	Retorna o nome do gráfico atribuído por setChartName().
getChart()	Referência de objeto de gráfico	Retorna uma referência ao gráfico criado por esse ChartWrapper, por exemplo, um google.visualization.BarChart ou um google.visualization.ColumnChart . Isso retornará um valor nulo até que você tenha chamado draw() no objeto ChartWrapper e gere um evento pronto. Os métodos chamados no objeto retornado serão refletidos na página.
getContainerId()	String	O ID do elemento contêiner DOM do gráfico.
getQuery()	String	A string de consulta deste gráfico, se houver uma, e consulta uma fonte de dados.
getRefreshInterval()	Número	Qualquer intervalo de atualização deste gráfico, se ele consultar uma fonte de dados. Zero indica que não há atualização.
getOption(key, opt_default_val)	Qualquer tipo	Retorna o valor da opção do gráfico especificado key: o nome da opção a ser recuperada. Pode ser um nome qualificado, como 'vAxis.title'. opt_default_value [opcional]: se o valor especificado for indefinido ou nulo, esse valor será retornado.
getOptions()	Objeto	Retorna o objeto de opções deste gráfico.
getView()	Objeto OU matriz	Retorna o objeto inicializador DataView, no mesmo formato que dataview.toJSON(), ou uma matriz desses objetos.
setDataSourceUrl(url)	Nenhum	Define o URL de uma fonte de dados a ser usado para este gráfico. Se você também definir uma tabela de dados para esse objeto, o URL da fonte de dados será ignorado.
setDataTable(table)	Nenhum	Define a tabela de dados do gráfico. Transmita um dos seguintes itens: nulo, um objeto DataTable, uma representação JSON de um DataTable ou uma matriz seguindo a sintaxe de arrayToDataTable().
setChartType(type)	Nenhum	Define o tipo de gráfico. Transmita o nome da classe do gráfico encapsulado. Se for um gráfico do Google, não o qualifique com google.visualization. Por exemplo, no caso de um gráfico de pizza, transmita "PieChart".
setChartName(name)	Nenhum	Define um nome arbitrário para o gráfico. Isso não aparece em nenhum lugar do gráfico, a menos que um gráfico personalizado seja explicitamente projetado para usá-lo.
setContainerId(id)	Nenhum	Define o ID do elemento DOM do gráfico.
setQuery(query_string)	Nenhum	Define uma string de consulta, se este gráfico consultar uma fonte de dados. Ao especificar esse valor, você também precisa definir o URL da fonte de dados.
setRefreshInterval(interval)	Nenhum	Define o intervalo de atualização deste gráfico, se ele consultar uma fonte de dados. Ao especificar esse valor, você também precisa definir um URL de fonte de dados. Zero indica que não há atualização.
setOption(key, value)	Nenhum	Define um único valor de opção de gráfico, em que key é o nome da opção e value é o valor. Para cancelar a definição de uma opção, transmita o valor nulo. key pode ser um nome qualificado, como 'vAxis.title'.
setOptions(options_obj)	Nenhum	Define um objeto de opções completo para um gráfico.
setView(view_spec)	Nenhum	Define um objeto inicializador DataView, que atua como um filtro sobre os dados subjacentes. O wrapper de gráfico precisa ter dados de um DataTable ou de uma fonte de dados para aplicar essa visualização. Você pode transmitir uma string ou um objeto inicializador DataView, como o retornado por dataview.toJSON(). Também é possível transmitir uma matriz de objetos inicializadores DataView. Nesse caso, o primeiro DataView na matriz é aplicado aos dados subjacentes para criar uma nova tabela de dados, o segundo DataView é aplicado à tabela de dados resultante da aplicação da primeira DataView e assim por diante.

Eventos

O objeto ChartWrapper lança os seguintes eventos. É necessário chamar ChartWrapper.draw() antes que qualquer evento seja gerado.

Nome	Descrição	Propriedades
error	Disparado quando ocorre um erro ao tentar renderizar o gráfico.	ID, mensagem
ready	O gráfico está pronto para chamadas de métodos externos. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método draw e chame-o somente depois que o evento for disparado.	Nenhum
select	Disparado quando o usuário clica em uma barra ou legenda. Quando um elemento do gráfico é selecionado, a célula correspondente na tabela de dados é selecionada. Quando uma legenda é selecionada, a coluna correspondente na tabela de dados é selecionada. Para saber o que foi selecionado, chame ChartWrapper.getChart(). getSelection(). Isso só é gerado quando o tipo de gráfico subjacente gera um evento de seleção.	Nenhum

Exemplo

Os dois snippets a seguir criam um gráfico de linhas equivalente. O primeiro exemplo usa a notação literal JSON para definir o gráfico. O segundo usa métodos ChartWrapper para definir esses 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>

O mesmo gráfico, agora usando métodos setter:

<!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>

Classe do ChartEditor

A classe ChartEditor é usada para abrir uma caixa de diálogo in-page que permite que um usuário personalize uma visualização rapidamente.

Para usar o ChartEditor:

1. Carregue o pacote charteditor. Em google.charts.load(), carregue o pacote 'charteditor'. Você não precisa carregar os pacotes para o tipo de gráfico renderizado no editor. O editor de gráficos carregará qualquer pacote para você, conforme necessário.
2. Crie um objeto ChartWrapper que defina o gráfico para o usuário personalizar. Esse gráfico será exibido na caixa de diálogo, e o usuário usará o editor para reprojetar o gráfico, alterar os tipos de gráfico ou até mesmo alterar os dados de origem.
3. Crie uma nova instância do ChartEditor e registre-se para detectar o evento "ok". Esse evento é lançado quando o usuário clica no botão "OK" da caixa de diálogo. Quando recebido, chame ChartEditor.getChartWrapper() para recuperar o gráfico modificado pelo usuário.
4. Chame ChartEditor.openDialog(), transmitindo o ChartWrapper. A caixa de diálogo será aberta. Os botões da caixa de diálogo permitem que o usuário feche o editor. A instância ChartEditor fica disponível enquanto estiver no escopo. Ela não é destruída automaticamente depois que o usuário fecha a caixa de diálogo.
5. Para atualizar o gráfico no código, chame setChartWrapper().

Métodos

Método	Valor de retorno	Descrição
openDialog(chartWrapper, opt_options)	null	Abre o editor de gráficos como uma caixa de diálogo incorporada na página. A função é retornada imediatamente. Ela não espera a caixa de diálogo ser fechada. Se você não perder o escopo da instância, poderá chamar openDialog() novamente para reabrir a caixa de diálogo, embora seja necessário transmitir novamente um objeto ChartWrapper. chartWrapper: um objeto ChartWrapper que define o gráfico inicial a ser renderizado na janela. O gráfico precisa ter um DataTable preenchido ou estar conectado a uma fonte de dados válida. Esse wrapper é copiado internamente para o editor de gráficos, portanto, alterações posteriores feitas no identificador ChartWrapper não serão refletidas na cópia do editor de gráficos. opt_options - [Opcional] Um objeto que contém todas as opções para o editor de gráficos. Consulte a tabela de opções abaixo.
getChartWrapper()	ChartWrapper	Retorna um ChartWrapper que representa o gráfico com modificações do usuário.
setChartWrapper(chartWrapper)	null	Use esse método para atualizar o gráfico renderizado no editor. chartWrapper: um objeto ChartWrapper que representa o novo gráfico a ser renderizado. O gráfico precisa ter um DataTable preenchido ou estar conectado a uma fonte de dados válida.
closeDialog()	null	Fecha a caixa de diálogo do editor de gráficos.

Opções

O editor de gráficos é compatível com as seguintes opções:

Nome	Tipo	Padrão	Descrição
dataSourceInput	Identificador do elemento ou "urlbox"	null	Use essa opção para permitir que o usuário especifique uma fonte de dados para o gráfico. Essa propriedade pode ter um destes dois valores: 'urlbox': mostra o URL da fonte de dados do gráfico na caixa de diálogo em uma caixa de texto editável. O usuário pode modificar isso, e o gráfico será redesenhado com base na nova fonte de dados. Elemento DOM: permite fornecer um elemento HTML personalizado para uso na seleção de uma fonte de dados. Transmita um handle para um elemento HTML, seja ele criado em código ou copiado da página. Este elemento será exibido na caixa de diálogo. Use isso para permitir que o usuário escolha a fonte de dados do gráfico. Por exemplo, crie uma caixa de listagem contendo vários URLs de fontes de dados ou nomes fáceis de usar que o usuário possa escolher. O elemento precisa implementar um gerenciador de seleção e usá-lo para mudar a fonte de dados do gráfico: por exemplo, mudar o DataTable subjacente ou modificar o campo dataSourceUrl do gráfico.

Eventos

O editor de gráficos gera os seguintes eventos:

Nome	Descrição	Propriedades
ok	Disparado quando o usuário clica no botão "OK" da caixa de diálogo. Depois de receber esse método, chame getChartWrapper() para recuperar o gráfico configurado pelo usuário.	nenhum
cancel	Disparado quando o usuário clica no botão "Cancelar" na caixa de diálogo.	nenhum

Exemplo

O código de exemplo a seguir abre uma caixa de diálogo do editor de gráficos com um gráfico de linhas preenchido. Se o usuário clicar em "OK", o gráfico editado será salvo no <div> especificado na 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 manipulação de dados

O namespace google.visualization.data contém métodos estáticos para executar operações semelhantes a SQL em objetos DataTable, por exemplo, juntando-os ou agrupando por valor da coluna.

O namespace google.visualization.data expõe os seguintes métodos:

Método	Descrição
google.visualization.data.group	Executa uma ação GROUP BY do SQL para retornar uma tabela agrupada por valores em colunas especificadas.
google.visualization.data.join	Mescla duas tabelas de dados em uma ou mais colunas de chave.

group()

Toma um objeto DataTable preenchido e executa uma operação GROUP BY semelhante a SQL, retornando uma tabela com linhas agrupadas pelos valores de coluna especificados. Isso não modifica a entrada DataTable.

A tabela retornada inclui uma linha para cada combinação de valores nas colunas-chave especificadas. Cada linha inclui as colunas de chave mais uma coluna com um valor de coluna agregado em todas as linhas que correspondem à combinação de chaves (por exemplo, uma soma ou contagem de todos os valores na coluna especificada).

O namespace google.visualization.data inclui vários valores de agregação úteis (por exemplo, sum e count), mas é possível definir seus próprios valores (por exemplo, standardDeviation ou secondHighest). As instruções sobre como definir seu próprio agregador são fornecidas após a descrição do método.

Sintaxe

google.visualization.data.group(data_table, keys, columns)

data_table

A entrada DataTable. Ele não será modificado chamando group().

keys

Uma matriz de números e/ou objetos que especifica as colunas que serão agrupadas. A tabela de resultados inclui todas as colunas nessa matriz, bem como todas as colunas em colunas. Se for um número, será um índice de colunas da entrada DataTable para agrupar. Se for um objeto, ele incluirá uma função que pode modificar a coluna especificada (por exemplo, adicionar 1 ao valor nessa coluna). O objeto precisa ter as seguintes propriedades:

• column: um número que é um índice de coluna de dt ao qual aplicar a transformação.
• modifier: uma função que aceita um valor (o valor da célula nessa coluna para cada linha) e retorna o valor modificado. Essa função é usada para modificar o valor da coluna para ajudar no agrupamento: por exemplo, chamando uma função qualQuarter que calcula um trimestre a partir de uma coluna de data, para que a API possa agrupar linhas por trimestre. O valor calculado é exibido nas colunas de chave na tabela retornada. Essa função pode ser declarada inline dentro desse objeto ou pode ser uma função que você define em outro lugar no código. Ela precisa estar dentro do escopo da chamada. A API oferece uma função modificadora simples. Confira estas instruções sobre como criar suas próprias funções mais úteis. Você precisa saber o tipo de dados que essa função pode aceitar e chamá-lo apenas em colunas desse tipo. Também é preciso saber o tipo de retorno dessa função e declará-lo na propriedade type descrita a seguir.
• type: o tipo retornado pela função modifier. Precisa ser um nome de tipo de string JavaScript, por exemplo: "número" ou "booleano".
• label: [opcional] um rótulo de string para atribuir essa coluna no DataTable retornado.
• id [opcional]: um ID de string para atribuir essa coluna no DataTable retornado.

Exemplos: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

colunas

[Opcional] Permite especificar quais colunas, além das colunas de chave, serão incluídas na tabela de saída. Como todas as linhas no grupo são compactadas em uma única linha de saída, é preciso determinar o valor a ser exibido para esse grupo. Por exemplo, é possível mostrar o valor da coluna da primeira linha do conjunto ou uma média de todas as linhas desse grupo. columns é uma matriz de objetos com as seguintes propriedades:

• coluna: um número que especifica o índice da coluna a ser exibida.
• aggregation: uma função que aceita uma matriz de todos os valores dessa coluna nesse grupo de linhas e retorna um único valor a ser exibido na linha de resultados. O valor de retorno precisa ser do tipo especificado pela propriedade type do objeto. Confira abaixo detalhes sobre como criar sua própria função de agregação. Você precisa saber quais tipos de dados esse método aceita e chamá-lo apenas em colunas do tipo apropriado. Ela oferece várias funções de agregação úteis. Consulte Funções de agregação fornecidas abaixo para ver uma lista ou Como criar uma função de agregação para saber como criar sua própria função de agregação.
• type: o tipo de retorno da função de agregação. Precisa ser um nome de tipo de string JavaScript, por exemplo: "número" ou "booleano".
• label: [opcional] um rótulo de string para aplicar a esta coluna na tabela retornada.
• id - [Opcional] Um ID de string a ser aplicado a essa coluna na tabela retornada.

Valor de retorno

Um DataTable com uma coluna para cada coluna listada em chaves e uma coluna para cada coluna listada em colunas. A tabela é classificada por linhas principais, da esquerda para a direita.

Exemplo

// 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

Funções modificadoras fornecidas

A API oferece as funções modificadoras abaixo que podem ser transmitidas para keys. modifier para personalizar o comportamento de agrupamento.

Função	Tipo de matriz de entrada	Tipo de retorno	Descrição
google.visualization.data.month	Data	number	Com uma data definida, ele retorna o valor do mês baseado em zero (0, 1, 2 e assim por diante).

Funções de agregação fornecidas

A API oferece as funções de agregação abaixo, que podem ser transmitidas para as colunas. aggregation do parâmetro.

Função	Tipo de matriz de entrada	Tipo de retorno	Descrição
google.visualization.data.avg	number	number	O valor médio da matriz transmitida.
google.visualization.data.count	qualquer tipo	number	A contagem de linhas no grupo. Os valores nulos e duplicados são contados.
google.visualization.data.max	número, string, data	number, string, Date, null	O valor máximo na matriz. Para strings, é o primeiro item em uma lista classificada lexicograficamente. Para valores de data, é a data mais recente. Os valores nulos são ignorados. Retornará nulo se não houver máximo.
google.visualization.data.min	número, string, data	number, string, Date, null	O valor mínimo na matriz. Para strings, é o último item em uma lista classificada lexicograficamente. Para valores de data, é a data mais antiga. Os valores nulos são ignorados. Retornará nulo se não houver mínimo.
google.visualization.data.sum	number	number	A soma de todos os valores na matriz.

Como criar uma função modificadora

É possível criar uma função modificadora para executar uma transformação simples em valores de chave antes que a função group() agrupe as linhas. Essa função usa um único valor de célula, executa uma ação nele (por exemplo, adiciona 1 ao valor) e o retorna. Os tipos de entrada e retorno não precisam ser do mesmo tipo, mas o autor da chamada precisa conhecer os tipos de entrada e saída. Veja um exemplo de função que aceita uma data e retorna o trimestre:

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

Como criar uma função de agregação

É possível criar uma função de agregação que aceite um conjunto de valores de coluna em um grupo de linhas e retorne um único número: por exemplo, retornando uma contagem ou média de valores. Veja a seguir uma implementação da função de agregação de contagem fornecida, que retorna uma contagem de quantas linhas há no grupo de linhas:

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

join()

Esse método mescla duas tabelas de dados (objetos DataTable ou DataView) em uma única tabela de resultados, semelhante a uma instrução SQL JOIN. Você especifica um ou mais pares de colunas (colunas key) entre as duas tabelas, e a tabela de saída inclui as linhas de acordo com um método de mesclagem especificado: somente linhas com correspondência de ambas as chaves, todas as linhas de uma tabela ou todas as linhas de ambas, independentemente de as chaves corresponderem ou não. A tabela de resultados inclui apenas as colunas de chave, mais as outras que você especificar. Observe que dt2 não pode ter chaves duplicadas, mas dt1 pode. O termo "chave" significa a combinação de todos os valores de coluna de chave, não um valor de coluna de chave específico. Portanto, se uma linha tiver valores de célula A | B | C e as colunas 0 e 1 forem colunas-chave, a chave para essa linha será AB.

Sintaxe

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

Uma DataTable preenchida para mesclar com dt2.

dt2

Um DataTable preenchido para mesclar com dt1. Essa tabela não pode ter várias chaves idênticas (quando uma chave é uma combinação de valores de colunas-chave).

joinMethod

Uma string que especifica o tipo de mesclagem. Se dt1 tiver várias linhas que correspondam a uma dt2, a tabela de saída incluirá todas as linhas dt1 correspondentes. Escolha entre estes valores:

• "full": a tabela de saída inclui todas as linhas das duas tabelas, independentemente da correspondência das chaves. As linhas sem correspondência terão entradas de célula nulas, e as linhas correspondentes serão mescladas.
• "inner" - a junção completa filtrada para incluir apenas as linhas em que as chaves são correspondentes.
• "left": a tabela de saída inclui todas as linhas de dt1, independentemente de haver ou não linhas correspondentes de dt2.
• "right" - A tabela de saída inclui todas as linhas de dt2, independentemente de haver ou não linhas correspondentes de dt1.

keys

Uma matriz de colunas de chave a serem comparadas nas duas tabelas. Cada par é uma matriz de dois elementos. O primeiro é uma chave em dt1 e o segundo é uma chave em dt2. Essa matriz pode especificar colunas por índice, ID ou rótulo. Consulte getColumnIndex.
As colunas precisam ser do mesmo tipo nas duas tabelas. Todas as chaves especificadas precisam corresponder de acordo com a regra fornecida por joinMethod para incluir uma linha da tabela. As colunas de chave são sempre incluídas na tabela de saída. Somente dt1, a tabela à esquerda, pode incluir chaves duplicadas. As chaves em dt2 precisam ser exclusivas. Aqui, o termo "chave" significa um conjunto exclusivo de colunas de chave, e não valores de coluna individuais. Por exemplo, se as colunas de chave fossem A e B, a tabela a seguir teria apenas chaves-valor exclusivas e, portanto, poderia ser usada como dt2:

R	B
Ana	Ruivo
Ana	Azul
Fred	Ruivo

Exemplo: [[0,0], [2,1]] compara valores da primeira coluna em ambas as tabelas e da terceira coluna de dt1 com a segunda coluna de dt1.

dt1Columns

Uma matriz de colunas de dt1 a serem incluídas na tabela de saída, além das colunas de chave de dt1. Esta matriz pode especificar colunas por índice, ID ou rótulo. Consulte getColumnIndex.

dt2Columns

Uma matriz de colunas de dt2 para incluir na tabela de saída, além das colunas de chave de dt2. Esta matriz pode especificar colunas por índice, ID ou rótulo. Consulte getColumnIndex.

Valor de retorno

Uma DataTable com as principais colunas, dt1Columns e dt2Columns. A tabela é classificada pelas principais colunas, da esquerda para a direita. Quando joinMethod for "inner", todas as células principais serão preenchidas. Para outros métodos de mesclagem, se nenhuma chave correspondente for encontrada, a tabela terá um valor nulo para todas as células-chave sem correspondência.

Exemplos

*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

Formatadores

A API de visualização do Google fornece formatadores que podem ser usados para reformatar dados em uma visualização. Esses formatadores alteram o valor formatado da coluna especificada em todas as linhas. Observações:

• Os formatadores modificam apenas os valores formatados, e não os subjacentes. Por exemplo, o valor exibido seria "US$ 1.000,00", mas o valor subjacente ainda seria "1000".
• Os formatadores afetam apenas uma coluna por vez. Para reformatar várias colunas, aplique um formatador a cada coluna que você quer alterar.
• Se você também usar formatadores definidos pelo usuário, alguns formatadores de visualização do Google substituirão todos os formatadores definidos pelo usuário.

A formatação real aplicada aos dados é derivada da localidade com que a API foi carregada. Para mais detalhes, consulte Como carregar gráficos com uma localidade específica .

Importante: os formatadores só podem ser usados com um DataTable. Eles não podem ser usados com um DataView (os objetos DataView são somente leitura).

Aqui estão as etapas gerais para usar um formatador:

1. Consiga o objeto DataTable preenchido.
2. Para cada coluna que você quer reformatar, faça o seguinte:
   1. Crie um objeto que especifique todas as opções para seu formatador. Esse é um objeto JavaScript básico com um conjunto de propriedades e valores. Consulte a documentação do formatador para saber quais propriedades são compatíveis. Você também pode passar um objeto de notação literal de objeto especificando suas opções.
   2. Crie seu formatador, transmitindo seu objeto de opções.
   3. Chame formatter.format(table, colIndex), transmitindo DataTable e o número da coluna (base em zero) dos dados a serem reformados. Só é possível aplicar um formatador a cada coluna. A aplicação de um segundo formatador simplesmente substitui os efeitos do primeiro.
      Importante: muitos formatadores exigem tags HTML para exibir formatação especial. Se sua visualização for compatível com uma opção allowHtml, defina-a como verdadeira.

Veja um exemplo de alteração dos valores de data formatados de uma coluna de data para usar um formato de data longo ("1o de janeiro 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});

A maioria dos formatadores expõe os dois métodos a seguir:

Método	Descrição
google.visualization.formatter_name(options)	Construtor, em que formatter_name é um nome de formatterclass específico. options: um objeto JavaScript genérico que especifica as opções para esse formatador. Esse objeto é um objeto genérico com pares de propriedades/valores com propriedades específicas para esse formatador. Consulte a documentação do seu formatador específico para saber quais opções são compatíveis. Veja dois exemplos de maneiras de chamar o construtor do objeto DateFormat, transmitindo duas propriedades: // 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)	Reformata os dados na coluna especificada. data: um DataTable contendo os dados a serem reformados. Não é possível usar um DataView aqui. colIndex: o índice baseado em zero da coluna a ser formatada. Para formatar várias colunas, você precisa chamar esse método várias vezes, com diferentes valores de colIndex.

 

A API de visualização do Google fornece os seguintes formatadores:

Nome do formatador	Descrição
ArrowFormat	Adiciona uma seta para cima ou para baixo, indicando se o valor da célula está acima ou abaixo de um valor especificado.
BarFormat	Adiciona uma barra colorida em que a direção e a cor indicam se o valor da célula está acima ou abaixo de um valor especificado.
ColorFormat	Colore a célula de acordo com os valores que se enquadram em um intervalo específico.
DateFormat	Formata um valor de Date ou DateTime de várias maneiras diferentes, incluindo "1 de janeiro de 2009", "1/1/09" e "1 de janeiro de 2009".
NumberFormat	Formata vários aspectos de valores numéricos.
PatternFormat	Concatena valores de célula da mesma linha em uma célula especificada, junto com texto arbitrário.

ArrowFormat

Adiciona uma seta para cima ou para baixo a uma célula numérica, dependendo se o valor está acima ou abaixo de um valor base especificado. Se for igual ao valor base, nenhuma seta será exibida.

Opções

ArrowFormat oferece suporte às seguintes opções, transmitidas para o construtor:

Option	Descrição
base	Um número que indica o valor de base, usado para comparação com o valor da célula. Se o valor da célula for maior, a célula incluirá uma seta verde para cima. Se o valor da célula for menor, ela incluirá uma seta vermelha para baixo. Se for a mesma, nenhuma seta.

Exemplo de código

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});

BarFormat

Adiciona uma barra colorida a uma célula numérica que indica se o valor da célula está acima ou abaixo de um valor base especificado.

Opções

BarFormat oferece suporte às seguintes opções, transmitidas para o construtor:

Option	Exemplo Descrição
base	Um número que é o valor base para comparar com o valor da célula. Se o valor da célula for maior, ela será desenhado à direita da base. Se for menor, será desenhado para a esquerda. O valor padrão é 0.
colorNegative	String que indica a seção de valor negativo das barras. Os valores possíveis são "red", "green" e "blue". O valor padrão é "red".
colorPositive	String que indica a cor da seção de valores positivos das barras. Os valores possíveis são "red", "green" e "blue". O padrão é "azul".
drawZeroLine	Um booleano que indica se é necessário desenhar uma linha de base escura de 1 pixel quando valores negativos estiverem presentes. A linha escura está ali para aprimorar a leitura visual das barras. O valor padrão é "falso".
max	O valor numérico máximo para o intervalo de barras. O valor padrão é o mais alto na tabela.
min	O valor do número mínimo do intervalo de barras. O valor padrão é o menor valor na tabela.
showValue	Se verdadeiro, mostra valores e barras; se falso, mostra apenas barras. O valor padrão é true.
width	Espessura de cada barra, em pixels. O valor padrão é 100.

Exemplo de código

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%'});

ColorFormat

Atribui cores ao primeiro ou segundo plano de uma célula numérica, dependendo do valor da célula. Esse formatador é incomum, porque não aceita as opções no construtor. Em vez disso, chame addRange() ou addGradientRange() quantas vezes quiser, para adicionar intervalos de cores, antes de chamar format(). As cores podem ser especificadas em qualquer formato HTML aceitável, por exemplo, "preto", "#000000" ou "#000".

Métodos

ColorFormat é compatível com os seguintes métodos:

Método	Descrição
google.visualization.ColorFormat()	Construtor. Não aceita argumentos.
addRange(from, to, color, bgcolor)	Especifica uma cor de primeiro plano e/ou de plano de fundo para uma célula, dependendo do valor dela. Qualquer célula com um valor no intervalo especificado de from para to receberá color e bgcolor. É importante perceber que o intervalo não é inclusivo, porque a criação de um intervalo de 1 a 1.000 e de 1.000 a 2.000 não cobrirá o valor de 1.000. from: [String, Number, Date, DateTime ou TimeOfDay]: o limite inferior (inclusive) do intervalo ou nulo. Se for nulo, corresponderá a -✕. Os limites de string são comparados alfabeticamente com os valores de string. to - [String, Number, Date, DateTime ou TimeOfDay]: o limite máximo (não inclusivo) do intervalo ou nulo. Se for nulo, corresponderá a +✕. Os limites de string são comparados em ordem alfabética com os valores de string. color: a cor a ser aplicada ao texto nas células correspondentes. Os valores podem ser "#RRGGBB" ou constantes de cor definidas, como "#FF0000" ou "vermelho". bgcolor - A cor a ser aplicada ao plano de fundo das células correspondentes. Os valores podem ser "#RRGGBB" ou constantes de cor definidas, como "#FF0000" ou "vermelho".
addGradientRange(from, to, color, fromBgColor, toBgColor)	Atribui uma cor de plano de fundo de um intervalo, de acordo com o valor da célula. A cor é dimensionada para corresponder ao valor da célula em um intervalo de cor de limite inferior a uma cor de limite superior. Esse método não pode comparar valores de string, como addRange() pode. Dica: geralmente, os intervalos de cores são difíceis para os espectadores avaliarem com precisão. O intervalo mais simples e fácil de ler é de uma cor totalmente saturada para branco (por exemplo, #FF0000—FFFFFF). from: [Number, Date, DateTime ou TimeOfDay]: o limite mínimo (inclusivo) do intervalo ou nulo. Se for nulo, corresponderá a -✕. to - [Number, Date, DateTime ou TimeOfDay]: o limite mais alto (não inclusivo) do intervalo, ou nulo. Se nulo, corresponderá a +✕. color: a cor a ser aplicada ao texto nas células correspondentes. Essa cor é a mesma para todas as células, independentemente do valor. fromBgColor: a cor de fundo das células que contêm valores na extremidade inferior do gradiente. Os valores podem ser "#RRGGBB" ou constantes de cor definidas, por exemplo, "#FF0000" ou "vermelho". toBgColor - a cor de fundo das células que contêm valores na extremidade superior do gradiente. Os valores podem ser "#RRGGBB" ou constantes de cor definidas, por exemplo, "#FF0000" ou "vermelho".
format(dataTable, columnIndex)	O método format() padrão para aplicar a formatação à coluna especificada.

Exemplo de código

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%'});

DateFormat

Formata um valor Date de JavaScript de várias maneiras, incluindo "1 de janeiro de 2016", "1/1/16" e "1o de janeiro de 2016".

Opções

DateFormat oferece suporte às seguintes opções, transmitidas para o construtor:

Option	Descrição
formatType	Uma opção de formatação rápida para a data. Os seguintes valores de string são aceitos, reformando a data de 28 de fevereiro de 2016 conforme mostrado: "short" - formato curto. Por exemplo, "28/02/16" "medium": é o formato médio. Por exemplo, "28 de fevereiro de 2016" "longo" - formato longo, ex.: "28 de fevereiro de 2016" Não é possível especificar formatType e pattern ao mesmo tempo.
pattern	Um padrão de formato personalizado para aplicar ao valor, semelhante ao formato de data e hora ICU. Por exemplo: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"}); Não é possível especificar formatType e pattern ao mesmo tempo. Leia mais detalhes sobre padrões na próxima seção.
timeZone	O fuso horário em que o valor de data será mostrado. Esse é um valor numérico, indicando GMT + esse número de fusos horários (pode ser negativo). Os objetos de data são criados por padrão com o fuso horário presumido do computador em que foram criados. Essa opção é usada para exibir o valor em um fuso horário diferente. Por exemplo, se você criou um objeto Date das 17h em um computador localizado em Greenwich, Inglaterra, e especificou o timeZone como -5 (options['timeZone'] = -5 ou Horário do Pacífico Oriental nos EUA), o valor exibido será 12h.

Métodos

DateFormat é compatível com os seguintes métodos:

Método	Descrição
google.visualization.DateFormat(options)	Construtor. Consulte a seção de opções acima para mais informações.
format(dataTable, columnIndex)	O método format() padrão para aplicar a formatação à coluna especificada.
formatValue(value)	Retorna o valor formatado de um determinado valor. Esse método não requer um DataTable.

Exemplo de código

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%'});
}

Mais sobre padrões de data

Confira mais alguns detalhes sobre os padrões compatíveis:

Os padrões são semelhantes ao formato de data e hora ICU, mas os seguintes padrões ainda não são compatíveis: A e D F g Y u w W. Para evitar colisão com padrões, qualquer texto literal que você queira que apareça na saída precisa estar entre aspas simples, exceto as aspas simples, que precisam ser duplicadas: por exemplo, "K 'o''clock.'".

Padrão	Descrição	Exemplo de saída
GG	Designador da era.	"ANÚNCIO"
yy ou aaaa	ano.	1996
M	Mês do ano. Para janeiro: M produz 1 MM produz 01 MMM produz em janeiro MMMM produz janeiro	"Julho" “07”
d	Dia do mês. Valores "d" extras acrescentam zeros à esquerda.	10
h	Hora na escala de 12 horas. Valores "h" extras acrescentam zeros à esquerda.	12
H	Hora na escala de 24 horas. Os valores de Hk extras adicionarão zeros à esquerda.	0
m	Minuto em uma hora. Valores "M" extras acrescentam zeros à esquerda.	30
s	Segundos em um minuto. Os valores de "s" extras acrescentam zeros à esquerda.	55
S	Segundo fracionário. Os valores “S” extras serão preenchidos à direita com zeros.	978
E	Dia da semana. As seguintes saídas para "terça-feira": E produz T Produtividade em EE ou EEE na terça ou terça-feira EEEE produz na terça-feira	"Ter" "Terça-feira"
aa	Período do dia	"PM"
k	Hora do dia (1 a 24). Valores "k" extras somam zeros à esquerda.	24
K	Hora do meio-dia (0 a 11). Valores "k" extras somam zeros à esquerda.	0
z	Fuso horário. Para o fuso horário 5, produz "UTC+5"	"UTC+5"
Z	Fuso horário no formato RFC 822. Para o fuso horário -5: Z, ZZ, ZZZ produzir, -0500 ZZZZ e mais produtos "GMT -05:00"	“-0800” "GMT -05:00"
v	Fuso horário (genérico).	"Etc/GMT-5"
.	escape para texto	'Data='
"	aspas simples	"aa"

NumberFormat

Descreve como colunas numéricas devem ser formatadas. As opções de formatação incluem especificar um símbolo de prefixo (como um cifrão) ou a pontuação a ser usada como um marcador de milhares.

Opções

NumberFormat oferece suporte às seguintes opções, transmitidas para o construtor:

Option	Descrição
decimalSymbol	Um caractere a ser usado como marcador decimal. O padrão é um ponto (.).
fractionDigits	Um número que especifica quantos dígitos serão exibidos após o decimal. O padrão é 2. Se você especificar mais dígitos do que o número, ele exibirá zeros para os valores menores. Valores truncados são arredondados (5 arredondados para cima).
groupingSymbol	Um caractere a ser usado para agrupar dígitos à esquerda do decimal em conjuntos de três. O padrão é uma vírgula (,).
negativeColor	A cor do texto para valores negativos. Nenhum valor padrão. Os valores podem ser qualquer valor de cor HTML aceitável, como "vermelho" ou "#FF0000".
negativeParens	Um booleano, em que "true" indica que os valores negativos precisam ser colocados entre parênteses. O padrão é verdadeiro.
pattern	Uma string de formato. Quando fornecidas, todas as outras opções são ignoradas, exceto negativeColor. A string de formato é um subconjunto do conjunto de padrões de ICU . Por exemplo, {pattern:'#,###%'} resultará nos valores de saída "1.000%", "750%" e "50%" para os valores 10, 7,5 e 0,5.
prefix	Um prefixo de string para o valor, por exemplo, "$".
suffix	Um sufixo de string para o valor, por exemplo, "%".

Métodos

NumberFormat é compatível com os seguintes métodos:

Método	Descrição
google.visualization.NumberFormat(options)	Construtor. Consulte a seção de opções acima para mais informações.
format(dataTable, columnIndex)	O método format() padrão para aplicar a formatação à coluna especificada.
formatValue(value)	Retorna o valor formatado de um determinado valor. Esse método não requer um DataTable.

Exemplo de código

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%'});

PatternFormat

Permite mesclar os valores das colunas designadas em uma única coluna, junto com texto arbitrário. Por exemplo, se você tiver uma coluna para o nome e outra para o sobrenome, preencha uma terceira coluna com {last name}, {first name}. Esse formatador não segue as convenções para o construtor e o método format(). Consulte a seção Métodos abaixo para mais instruções.

Métodos

PatternFormat é compatível com os seguintes métodos:

Método	Descrição
google.visualization.PatternFormat(pattern)	Construtor. Não aceita um objeto de opções. Em vez disso, ele usa um parâmetro de string pattern. Essa é uma string que descreve quais valores de coluna colocar na coluna de destino, junto com qualquer texto arbitrário. Incorpore marcadores na sua string para indicar um valor de outra coluna a ser incorporada. Os marcadores são {#}, em que # é o índice de uma coluna de origem a ser usada. O índice é um índice da matriz srcColumnIndices do método format() abaixo. Para incluir um caractere { ou } literal, faça o escape desta forma: \{ ou \}. Para incluir um caractere \ literal, faça o escape como \\. Exemplo de código O exemplo a seguir demonstra um construtor para um padrão que cria um elemento âncora, com o primeiro e o segundo elementos retirados do método format(): var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
format(dataTable, srcColumnIndices, opt_dstColumnIndex)	A chamada de formatação padrão, com alguns parâmetros adicionais: dataTable: a tabela de dados na qual operar. srcColumnIndices: uma matriz de um ou mais índices de coluna (baseados em zero) para extrair como as fontes da tabela de dados subjacente. Isso será usado como uma fonte de dados para o parâmetro pattern no construtor. Os números das colunas não precisam estar na ordem de classificação. opt_dstColumnIndex: [opcional] a coluna de destino para posicionar a saída da manipulação pattern. Se não for especificado, o primeiro elemento em srcColumIndices será usado como destino. Confira os exemplos de formatação após a tabela.

Aqui estão alguns exemplos de entradas e saídas para uma tabela de quatro colunas.

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

Exemplo de código

O exemplo a seguir demonstra como combinar dados de duas colunas para criar um endereço de e-mail. Ela usa um objeto DataView para ocultar as colunas de origem originais:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', '[e-mail]'],
  ['Paul McCartney', '[e-mail]'],
  ['George Harrison', '[e-mail]'],
  ['Ringo Starr', '[e-mail]']
]);

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%'});

GadgetHelper

Uma classe auxiliar para simplificar a criação de Gadgets que usam a API de visualização do Google.

Construtor

google.visualization.GadgetHelper()

Métodos

Método	Valor de retorno	Descrição
createQueryFromPrefs(prefs)	google.visualization.Query	Estático. Crie uma nova instância de google.visualization.Query e defina as propriedades dela de acordo com os valores das preferências do gadget. O tipo de parâmetro prefs é _IG_Prefs. A preferência _table_query_url é usada para definir o URL da origem dos dados de consulta. A preferência _table_query_refresh_interval é usada para definir o intervalo de atualização da consulta (em segundos).
validateResponse(response)	Booleano	Estático. O parâmetro response é do tipo google.visualization.QueryResponse. Retorna true se a resposta contém dados. Retornará false se a execução da consulta falhar e a resposta não contiver dados. Se ocorrer um erro, esse método exibirá uma mensagem de erro.

Classes de consulta

Os objetos a seguir estão disponíveis para enviar consultas de dados a uma fonte de dados externa, como as Planilhas Google.

• Consulta: encapsula a solicitação de dados de saída.
• QueryResponse: lida com a resposta da fonte de dados.

Consulta

Representa uma consulta enviada a uma fonte de dados.

Construtor

google.visualization.Query(dataSourceUrl, opt_options)

Parâmetros

dataSourceUrl

[Obrigatório, String] URL para enviar a consulta. Consulte a documentação sobre gráficos e planilhas das Planilhas Google.

opt_options

[Opcional, objeto] Um mapa de opções para a solicitação. Observação : se você estiver acessando uma fonte de dados restrita , não use esse parâmetro. Veja as propriedades compatíveis:

• sendMethod: [opcional, string] especifica o método a ser usado para enviar a consulta. Escolha um dos seguintes valores de string:
  • 'xhr': envie a consulta usando XmlHttpRequest.
  • 'scriptInjection': envia a consulta usando a injeção de script.
  • 'makeRequest': [disponível apenas para gadgets, que foram descontinuados] envie a consulta usando o método makeRequest() da API de gadgets. Se especificado, você também precisa especificar makeRequestParams.
  • "auto": usa o método especificado pelo parâmetro de URL tqrt no URL da fonte de dados. tqrt pode ter os seguintes valores: 'xhr', 'scriptInjection' ou 'makeRequest'. Se tqrt estiver ausente ou tiver um valor inválido, o padrão será "xhr" para solicitações de mesmo domínio e "scriptInjection" para solicitações entre domínios.
• makeRequestParams: [Object] um mapa de parâmetros para uma consulta makeRequest(). Usado e obrigatório somente se sendMethod for 'makeRequest'.

Métodos

Método	Valor de retorno	Descrição
abort()	Nenhum	Interrompe o envio automático de consultas iniciadas com setRefreshInterval().
setRefreshInterval(seconds)	Nenhum	Define a consulta para chamar automaticamente o método send a cada duração especificada (número de segundos), começando pela primeira chamada explícita a send. seconds é um número maior ou igual a zero. Se você usar esse método, chame-o antes de chamar o método send. Cancele esse método chamando-o novamente com zero (o padrão) ou chamando abort().
setTimeout(seconds)	Nenhum	Define o número de segundos de espera da fonte de dados antes de gerar um erro de tempo limite. seconds é um número maior que zero. O tempo limite padrão é de 30 segundos. Esse método, se usado, precisa ser chamado antes do método send.
setQuery(string)	Nenhum	Define a string de consulta. O valor do parâmetro string precisa ser uma consulta válida. Esse método, se usado, precisa ser chamado antes do método send. Saiba mais sobre a linguagem de consulta.
send(callback)	Nenhum	Envia a consulta para a fonte de dados. callback precisa ser uma função que será chamada quando a fonte de dados responder. A função de retorno de chamada receberá um único parâmetro do tipo google.visualization.QueryResponse.

QueryResponse

Representa uma resposta da execução de uma consulta conforme recebida da fonte de dados. Uma instância dessa classe é transmitida como um argumento para a função de retorno de chamada configurada quando Query.send foi chamado.

Métodos

Método	Valor de retorno	Descrição
getDataTable()	DataTable	Retorna a tabela de dados conforme retornado pela fonte de dados. Retornará null se a execução da consulta falhar e nenhum dado tiver sido retornado.
getDetailedMessage()	String	Retorna uma mensagem de erro detalhada para consultas que falharam. Se a execução da consulta for bem-sucedida, esse método retornará uma string vazia. A mensagem retornada é destinada a desenvolvedores e pode conter informações técnicas, por exemplo, "A coluna {salary} não existe".
getMessage()	String	Retorna uma breve mensagem de erro para consultas que falharam. Se a execução da consulta for bem-sucedida, esse método retornará uma string vazia. A mensagem retornada é uma mensagem curta destinada a usuários finais, por exemplo, "Consulta inválida" ou "Acesso negado".
getReasons()	Matriz de strings	Retorna uma matriz de zero ou mais entradas. Cada entrada é uma string curta com um código de erro ou aviso que foi gerado durante a execução da consulta. Códigos possíveis: access_denied O usuário não tem permissão para acessar a fonte de dados. invalid_query A consulta especificada tem um erro de sintaxe. data_truncated Uma ou mais linhas de dados que correspondem à seleção da consulta não foram retornadas devido a limites de tamanho de saída. (aviso). timeout A consulta não respondeu no tempo esperado.
hasWarning()	Booleano	Retorna true se a execução da consulta tiver alguma mensagem de aviso.
isError()	Booleano	Retornará true se a execução da consulta falhar e a resposta não contiver nenhuma tabela de dados. Retorna <false> se a execução da consulta foi bem-sucedida e a resposta contém uma tabela de dados.

Exibição de erros

A API oferece várias funções para ajudar você a exibir mensagens de erro personalizadas para os usuários. Para usar essas funções, forneça um elemento de contêiner na página (normalmente um <div>), em que a API exibirá uma mensagem de erro formatada. Esse contêiner pode ser o elemento de contêiner da visualização ou um contêiner apenas para erros. Se você especificar o elemento que contém a visualização, a mensagem de erro será exibida acima da visualização. Em seguida, chame a função apropriada abaixo para exibir ou remover a mensagem de erro.

Todas as funções são estáticas no namespace google.visualization.errors.

Muitas visualizações podem lançar um evento de erro; veja o evento de erro abaixo para saber mais sobre isso.

Confira um exemplo de erro personalizado no Exemplo de wrapper de consulta.

Função	Valor de retorno	Descrição
addError(container, message, opt_detailedMessage, opt_options)	Valor do ID da string que identifica o objeto de erro criado. Esse é um valor exclusivo na página e pode ser usado para remover o erro ou encontrar o elemento que o contém.	Adiciona um bloco de exibição de erro ao elemento de página especificado, com o texto e a formatação especificados. container: o elemento DOM em que a mensagem de erro será inserida. Se o contêiner não for encontrado, a função gerará um erro de JavaScript. message: uma mensagem de string a ser exibida. opt_detailedMessage: uma string de mensagem detalhada opcional. Por padrão, o texto usado é posicionado ao passar o mouse sobre ele, mas isso pode ser alterado na propriedade opt_options.showInToolTip descrita abaixo. opt_options: um objeto opcional com propriedades que definem várias opções de exibição para a mensagem. As seguintes opções são aceitas: showInTooltip: um valor booleano em que "true" mostra a mensagem detalhada somente como texto de dica, e "false" mostra a mensagem detalhada no corpo do contêiner após a mensagem curta. O valor padrão é true. type: uma string que descreve o tipo de erro, determina quais estilos CSS devem ser aplicados a essa mensagem. Os valores compatíveis são "error" e "warning". O valor padrão é "error". style: uma string de estilo para a mensagem de erro. Ele vai substituir os estilos aplicados ao tipo de aviso (opt_options.type). Exemplo: 'background-color: #33ff99; padding: 2px;' O valor padrão é uma string vazia. removable: um valor booleano, em que "true" significa que a mensagem pode ser fechada com um clique do mouse do usuário. O valor padrão é “false”.
addErrorFromQueryResponse(container, response)	Valor do ID de string que identifica o objeto de erro criado ou nulo se a resposta não indicar um erro. Esse é um valor exclusivo na página e pode ser usado para remover o erro ou encontrar o elemento que o contém.	Transmita uma resposta de consulta e um contêiner de mensagens de erro para este método: se a resposta da consulta indicar um erro de consulta, uma mensagem de erro será exibida no elemento de página especificado. Se a resposta da consulta for nula, o método gerará um erro de JavaScript. Transmita o QueryResponse recebido no gerenciador de consultas a essa mensagem para exibir um erro. Ele também definirá o estilo da tela adequado ao tipo (erro ou aviso, semelhante a addError(opt_options.type)). container: o elemento DOM em que a mensagem de erro será inserida. Se o contêiner não for encontrado, a função gerará um erro de JavaScript. response: um objeto QueryResponse recebido pelo gerenciador de consultas em resposta a uma consulta. Se esse valor for nulo, o método gerará um erro de JavaScript.
removeError(id)	Booleano: verdadeiro se o erro tiver sido removido; caso contrário, retorna falso.	Remove o erro especificado pelo ID da página. id: o ID da string de um erro criado usando addError() ou addErrorFromQueryResponse().
removeAll(container)	Nenhum	Remove todos os blocos de erro de um contêiner especificado. Se o contêiner especificado não existir, um erro será gerado. container: o elemento DOM que contém as strings de erro a serem removidas. Se o contêiner não for encontrado, a função gerará um erro de JavaScript.
getContainer(errorId)	Processar um elemento DOM que contém o erro especificado ou nulo se não for possível encontrá-lo.	Recupera um handle para o elemento do contêiner que contém o erro especificado por errorID. errorId: ID da string de um erro criado usando addError() ou addErrorFromQueryResponse().

Eventos

A maioria das visualizações dispara eventos para indicar que algo ocorreu. Como usuário do gráfico, muitas vezes você quer detectar esses eventos. Se você codifica sua própria visualização, acione esses eventos por conta própria.

Os métodos a seguir permitem que os desenvolvedores detectem eventos, removam manipuladores de eventos atuais ou acionem eventos de dentro de uma visualização.

• google.visualization.events.addListener() e google.visualization.events.addOneTimeListener() detectam eventos.
• google.visualization.events.removeListener() remove um listener existente.
• google.visualization.events.removeAllListeners() remove todos os listeners de um gráfico específico
• google.visualization.events.trigger() dispara um evento.

addListener()

Chame esse método para se registrar para receber eventos disparados por uma visualização hospedada em sua página. Documente quais argumentos do evento, se houver, serão transmitidos para a função de gerenciamento.

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

source_visualization

Um identificador para a instância de visualização de origem.

event_name

O nome da string do evento a ser detectado. As visualizações precisam documentar quais eventos são gerados.

handling_function

O nome da função JavaScript local que será chamada quando a source_visualization disparar o evento event_name. A função de gerenciamento recebe todos os argumentos de evento como parâmetros.

Retorna

Um gerenciador para o novo listener. O gerenciador pode ser usado para remover esse listener posteriormente, se necessário, chamando google.visualization.events.removeListener().

Exemplo

Este é um exemplo de inscrição para receber o evento de seleção

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()

Ele é idêntico a addListener(), mas destina-se a eventos que só devem ser ouvidos uma vez. Os acionamentos subsequentes do evento não invocarão a função de gerenciamento.

Um exemplo de quando isso é útil: todo desenho faz com que um evento ready seja gerado. Se você quiser que apenas o primeiro ready execute seu código, convém usar addOneTimeListener em vez de addListener.

removeListener()

Chame esse método para cancelar o registro de um listener de eventos.

google.visualization.events.removeListener(listener_handler)

listener_handler

O gerenciador do listener a ser removido, conforme retornado por google.visualization.events.addListener().

removeAllListeners()

Chame esse método para cancelar o registro de todos os listeners de eventos de uma instância de visualização específica.

google.visualization.events.removeAllListeners(source_visualization)

source_visualization

Um handle para a instância de visualização de origem da qual todos os listeners de eventos precisam ser removidos.

trigger().

Chamado pelos implementadores de visualizações. Chame esse método na sua visualização para disparar um evento com um nome e um conjunto de valores arbitrários.

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

source_visualization

Um identificador para a instância de visualização de origem. Se você estiver chamando essa função de um método definido pela visualização de envio, basta transmitir a palavra-chave this.

event_name

Um nome de string para chamar o evento. É possível escolher qualquer valor de string.

event_args

[opcional] Um mapa de pares de nome/valor a serem transmitidos ao método de recebimento. Por exemplo: {message: "Hello there!", score: 10, name: "Fred"}. Você poderá transmitir nulo se nenhum evento for necessário. O receptor precisa estar preparado para aceitar o valor nulo para esse parâmetro.

Exemplo

Veja um exemplo de visualização que gera um método chamado "select" quando o método "onclick" é chamado. Ela não transmite nenhum 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);
}

Métodos e propriedades de visualização padrão

Toda visualização deve expor o seguinte conjunto de métodos e propriedades obrigatórios e opcionais. No entanto, não há verificação de tipo para aplicar esses padrões. Portanto, leia a documentação de cada visualização.

• Construtor
• draw() (em inglês)
• getAction() [opcional]
• getSelection() [opcional]
• removeAction() [opcional]
• setAction() [opcional]
• setSelection() [opcional]

Observação : esses métodos estão no namespace da visualização, não no namespace google.visualization.

Construtor

O construtor precisa ter o nome da sua classe de visualização e retornar uma instância dessa classe.

visualization_class_name(dom_element)

dom_element

Um ponteiro para um elemento DOM em que a visualização precisa ser incorporada.

Exemplo

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

draw()

Desenha a visualização na página. Em segundo plano, isso pode ser buscar um gráfico de um servidor ou criar o gráfico na página usando o código de visualização vinculado. Chame esse método sempre que os dados ou as opções mudarem. O objeto precisa ser desenhado dentro do elemento DOM transmitido ao construtor.

draw(data[, options])

dados

Um DataTable ou DataView contendo os dados a serem usados para desenhar o gráfico. Não há um método padrão para extrair um DataTable de um gráfico.

options

[Opcional] Um mapa de pares de nome/valor de opções personalizadas. Exemplos incluem altura e largura, cores de fundo e legendas. A documentação da visualização deve listar quais opções estão disponíveis e oferecer suporte às opções padrão se você não especificar esse parâmetro. Você pode usar a sintaxe literal do objeto JavaScript para transmitir um mapa de opções. Por exemplo, {x:100, y:200, title:'An Example'}

Exemplo

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

getAction()

Isso pode ser exposto por visualizações que têm dicas e permitem ações de dica.

Retorna o objeto de ação da dica com o actionID solicitado.

Exemplo:

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

getSelection()

Isso pode ser exposto por visualizações que querem permitir o acesso aos dados selecionados no gráfico.

selection_array getSelection()

Retorna

selection_array Uma matriz de objetos selecionados, cada um descrevendo um elemento de dados na tabela subjacente usado para criar a visualização (um DataView ou um DataTable). Cada objeto tem as propriedades row e/ou column, com o índice da linha e/ou coluna do item selecionado no DataTable. Se a propriedade row for nula, a seleção será uma coluna. Se a propriedade column for nula, a seleção será uma linha. Se ambas forem não nulas, então será um item de dados específico. Você pode chamar o método DataTable.getValue() para receber o valor do item selecionado. A matriz recuperada pode ser transmitida para setSelection().

Exemplo

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()

Isso pode ser exposto por visualizações que têm dicas e permitem ações de dica.

Remove o objeto de ação da dica com o actionID solicitado do seu gráfico.

Exemplo:

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

setAction()

Isso pode ser exposto por visualizações que têm dicas e permitem ações de dica. Ela só funciona nos gráficos principais (barras, colunas, linhas, área, dispersão, combinação, bolha, pizza, rosca, vela, histograma, área em degraus).

Define uma ação de dica a ser executada quando o usuário clica no texto de ação.

setAction(action object)

O método setAction usa um objeto como parâmetro de ação. Esse objeto precisa especificar três propriedades: id, o ID da ação definida, text, o texto que aparecerá na dica da ação, e action, a função que será executada quando um usuário clicar no texto da ação.

Todas as ações de dica precisam ser definidas antes de chamar o método draw() do gráfico.

Exemplo:

// 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');
  }
});

O método setAction também pode definir duas propriedades adicionais: visible e enabled. Essas propriedades precisam ser funções que retornam valores boolean indicando se a ação da dica vai ficar visível e/ou ativada.

Exemplo:

// 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()

Opcionalmente, seleciona uma entrada de dados na visualização, por exemplo, um ponto em um gráfico de área ou uma barra em um gráfico de barras. Quando esse método é chamado, a visualização precisa indicar visualmente qual é a nova seleção. A implementação de setSelection() não deve disparar um evento "select". As visualizações podem ignorar parte da seleção. Por exemplo, uma tabela que mostra apenas linhas selecionadas pode ignorar elementos de célula ou coluna na implementação de setSelection() ou selecionar a linha inteira.

Toda vez que esse método é chamado, todos os itens selecionados são desmarcados, e a nova lista de seleção transmitida precisa ser aplicada. Não há uma maneira explícita de desmarcar itens individuais. Para fazer isso, chame setSelection() com os itens para permanecer selecionados. Para desmarcar todos os elementos, chame setSelection(), setSelection(null) ou setSelection([]).

setSelection(selection_array)

selection_array

Uma matriz de objetos, cada um com uma propriedade numérica de linha e/ou coluna. row e column são o número da linha ou coluna baseada em zero de um item na tabela de dados a ser selecionado. Para selecionar uma coluna inteira, defina row como nulo. Para selecionar uma linha inteira, defina column como nulo. Exemplo:setSelection([{row:0,column:1},{row:1, column:null}]) seleciona a célula em (0,1) e toda a linha 1.

Métodos estáticos variados

Esta seção contém vários métodos úteis expostos no namespace google.visualization.

arrayToDataTable()

Esse método recebe uma matriz bidimensional e a converte em uma DataTable.

Os tipos de dados da coluna são determinados automaticamente pelos dados fornecidos. Os tipos de dados da coluna também podem ser especificados usando a notação literal de objeto na primeira linha (a linha do cabeçalho da coluna) da matriz (ou seja, {label: 'Start Date', type: 'date'}). Papéis de dados opcionais também podem ser usados, mas precisam ser definidos explicitamente usando a notação literal de objeto. A notação literal de objeto também pode ser usada para qualquer célula, permitindo que você defina Objetos de célula.

Sintaxe

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray

Uma matriz bidimensional, em que cada linha representa uma linha na tabela de dados. Se opt_firstRowIsData for falso (o padrão), a primeira linha será interpretada como rótulos de cabeçalho. Os tipos de dados de cada coluna são interpretados automaticamente a partir dos dados fornecidos. Se uma célula não tiver valor, especifique um valor nulo ou vazio, conforme o caso.

opt_firstRowIsData

Define se a primeira linha define uma linha de cabeçalho ou não. Se verdadeiro, todas as linhas serão consideradas dados. Se for falso, a primeira linha será considerada uma linha de cabeçalho, e os valores serão atribuídos como rótulos de coluna. O padrão é "false".

Retorna

Uma nova DataTable.

Exemplos

O código a seguir demonstra três maneiras de criar o mesmo 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()

Esse método cria um gráfico com uma única chamada. A vantagem de usar esse método é que ele exige um pouco menos de código, e é possível serializar e salvar visualizações como strings de texto para reutilização. Esse método não retorna um identificador para o gráfico criado. Portanto, não é possível atribuir listeners de método para capturar eventos do gráfico.

Sintaxe

google.visualization.drawChart(chart_JSON_or_object)

chart_JSON_or_object

Uma string literal JSON ou um objeto JavaScript, com as seguintes propriedades (diferencia maiúsculas de minúsculas):

Propriedade	Tipo	Obrigatório	Padrão	Descrição
chartType	String	Obrigatório	nenhum	Nome da classe da visualização. O nome do pacote google.visualization pode ser omitido nos gráficos do Google. Se a biblioteca de visualização apropriada ainda não tiver sido carregada, esse método a carregará para você se for uma visualização do Google. É necessário carregar visualizações de terceiros explicitamente. Exemplos:Table, PieChart, example.com.CrazyChart.
containerId	String	Obrigatório	nenhum	O ID do elemento DOM em sua página que hospedará a visualização.
do modelo.	Objeto	Opcional	nenhum	Um objeto que descreve as opções da visualização. É possível usar a notação literal JavaScript ou fornecer um identificador para o objeto. Exemplo:"options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
dataTable	Objeto	Opcional	Nenhum	Uma DataTable usada para preencher a visualização. Pode ser uma representação literal de string JSON de um DataTable, conforme descrito acima, um identificador para um objeto google.visualization.DataTable preenchido ou uma matriz bidimensional, como a aceita por arrayToDataTable(opt_firstRowIsData=false) . É necessário especificar essa propriedade ou a propriedade dataSourceUrl.
dataSourceUrl	String	Opcional	Nenhum	Uma consulta na fonte de dados para preencher os dados do gráfico (por exemplo, um Planilhas Google). É necessário especificar essa propriedade ou a propriedade dataTable.
consulta	String	Opcional	Nenhum	Se dataSourceUrl for especificado, será possível especificar uma string de consulta semelhante a SQL usando a Linguagem de consulta de visualização para filtrar ou manipular os dados.
refreshInterval	Número	Opcional	Nenhum	Com que frequência, em segundos, a visualização precisa atualizar a origem da consulta. Use essa opção somente ao especificar dataSourceUrl.
visualização	Objeto OU matriz	Opcional	Nenhum	Define um objeto inicializador DataView, que atua como um filtro sobre os dados subjacentes, conforme definido pelo parâmetro dataTable ou dataSourceUrl. Você pode transmitir uma string ou um objeto inicializador DataView, como aquele retornado por dataview.toJSON(). Exemplo:"view": {"columns": [1, 2]} também é possível transmitir uma matriz de objetos inicializadores DataView. Nesse caso, o primeiro DataView na matriz é aplicado aos dados subjacentes para criar uma tabela de dados, o segundo DataView é aplicado à tabela de dados resultante da aplicação do primeiro DataView e assim por diante.

Exemplos

Cria um gráfico de tabela com base na fonte de dados de uma planilha e inclui a 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>

O próximo exemplo cria a mesma tabela, mas cria uma DataTable localmente:

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

Este exemplo passa uma representação de string JSON do gráfico, que você pode ter carregado de um arquivo:

<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()

Esse é o construtor para o elemento da barra de ferramentas que pode ser anexado a muitas visualizações. Ela permite que o usuário exporte os dados da visualização em formatos diferentes ou forneça uma versão incorporável da visualização para uso em diferentes lugares. Consulte a página da barra de ferramentas para mais informações e um exemplo de código.