Importante:o uso do componente de gráficos de imagem das Ferramentas de gráfico do Google foi suspenso oficialmente em 20 de abril de 2012. Ela vai continuar funcionando de acordo com nossa política de descontinuação.
Visão geral
O gráfico de imagem genérico é um wrapper genérico para todos os gráficos produzidos pela API de gráficos do Google. Leia a documentação da API Chart antes de tentar usar essa visualização. Observe que é possível enviar até 16 mil dados usando essa visualização, ao contrário do limite de 2 mil em chamadas diretas para a API de gráficos do Google.
Todos os dados são transmitidos para os gráficos usando uma DataTable ou DataView. Além disso, alguns rótulos são transmitidos como colunas na tabela de dados.
Todos os outros parâmetros de URL da API Chart (exceto chd) são transmitidos como opções.
De: Google
Exemplos
Veja alguns exemplos de tipos diferentes de gráficos.
Gráfico de linhas
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
Gráfico de barras verticais
Observe que, nos gráficos de barras com wrapper, não é preciso especificar chxt='x' como faria se chamasse o gráfico. Se você não especificar um eixo, o gráfico genérico de imagem tentará configurar o gráfico corretamente por padrão.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</html>
Gráfico de pizza
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</html>
Gráfico de radar
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</html>
Gráfico do mapa
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
Carregando
O nome do pacote google.charts.load é "imagegráfico"
google.charts.load('current', {'packages': ['imagechart']});
O nome da classe da visualização é google.visualization.ImageChart.
var visualization = new google.visualization.ImageChart(container_div);
Formato de dados
Há dois formatos de dados generalizados: um para os gráficos de mapa e outro para os outros gráficos. O único formato numérico compatível com dados é o tipo de número JavaScript.
Observação: não codifique URLs em URLs transmitidos como dados ou opções.
Gráficos de mapa
Um gráfico de mapa usa uma tabela de dados com duas colunas obrigatórias:
- Primeira coluna: [string] código do país ou estado/província.
- Segunda coluna: [number] o valor do país ou estado.
Consulte a documentação do gráfico de mapa para mais informações.
Gráficos que não são de mapa
Os gráficos que não são de mapa usam uma tabela de dados com duas colunas opcionais (uma no início e uma no final) e uma ou mais colunas de dados entre:
- Primeira coluna: [opcional, string] cada entrada representa um rótulo
usado no eixo X (equivalente ao parâmetro
chlouchxl) para gráficos compatíveis. - Próximas colunas: qualquer número de colunas numéricas, cada uma representando uma série de dados.
- Últimas colunas: [opcional, string] é o número de colunas de strings depois das colunas de dados, em que cada entrada representa um rótulo de ponto de dados nos gráficos compatíveis. Se você quiser usar essa coluna,
especifique a opção
annotationColumns.
Os dados serão exibidos de maneiras diferentes, dependendo do tipo de gráfico. Consulte a documentação do gráfico.
Observação sobre índices de coluna: a visualização do gráfico de imagem genérico remove as colunas de string da tabela de dados antes de enviar a tabela ao serviço da API Chart. Portanto, os índices de colunas nas opções, métodos e eventos definidos nesta página incluem as colunas de strings na contagem de índices, mas os índices de colunas em qualquer opção processada pelo serviço da API Chart (por exemplo, a opção chm) ignoram as colunas de string na contagem de índices.
Opções de configuração
As opções a seguir são definidas para esta visualização. Defina-as no objeto de opções transmitido para o método draw() da visualização.
Nem todas as opções a seguir são compatíveis com todos os tipos de gráficos. Consulte a documentação do seu tipo de gráfico de imagem estática. Você pode transmitir qualquer parâmetro de URL da API de gráficos do Google como uma opção. Por exemplo, o parâmetro de URL chg=50,50 de uma visualização de gráfico seria especificado desta maneira: options['chg'] = '50,50'.
Observação sobre cores:as opções de cor, como colors, color e backgroundColor, são especificadas no formato de cor da API Chart.
Esse formato é semelhante ao formato #RRGGBB, mas inclui um quarto número hexadecimal opcional para indicar transparência. Cores legíveis por humanos,
como "vermelho", "verde", "azul" etc., não são compatíveis. O formato de cor da API de gráficos não inclui o símbolo # no início, mas as opções de visualização genéricas dos gráficos aceitam códigos de cores com ou sem #.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| Anotação Colunas | Matriz<objeto> | nenhum | Rótulos de ponto de dados para vários tipos de gráficos. Essa é uma matriz de objetos, e cada um atribui um rótulo formatado a um ponto de dados no gráfico. Essa opção está disponível somente para gráficos compatíveis com pontos de dados (consulte o tópico vinculado para saber quais) e a tabela de dados precisa ter pelo menos uma das colunas de rótulo de string. Cada objeto na matriz tem as seguintes propriedades:
Exemplo: esse snippet define um rótulo de texto preto de 12 pixels, com texto retirado da coluna 0 e atribuído ao ponto de dados na coluna 2 da mesma linha: |
| backgroundColor | string | '#FFFFFF' (branca) | A cor do plano de fundo do gráfico no formato de cores da API Chart. |
| cor | string | Automático | Especifica uma cor de base a ser usada para todas as séries. Cada série será uma gradação da cor especificada. As cores são especificadas no formato de cores da API Chart.
Será ignorado se colors for especificado. |
| Cores | Matriz<string> | Automático | Use essa opção para atribuir cores específicas a cada série de dados. As cores são especificadas no formato de cores da API Chart.
A cor i é usada na coluna de dados i, envolvendo ao início
se houver mais colunas de dados do que cores. Se as variações de uma única cor forem aceitáveis para todas as séries, use a opção color. |
| enableEvents | boolean | false | Faz com que os gráficos gerem eventos acionados pelo usuário, como clique ou mouse. Compatível apenas com tipos específicos de gráficos. Veja a seção Eventos abaixo. |
| fill | boolean | false | Se for verdadeiro, preenche a área em cada linha. Disponível apenas para gráficos de linhas. |
| primeira coluna oculta | number | nenhum | Um índice da coluna de dados. A coluna listada, assim como todas as colunas a seguir, não serão usadas para desenhar os elementos principais da série do gráfico (como linhas em um gráfico de linhas ou barras em um gráfico de barras), mas sim como dados para marcadores e outras anotações. Observe que as colunas de string estão incluídas nessa contagem de índice. |
| altura | number | 200 | Altura do gráfico, em pixels. Se estiver ausente ou não estiver em um intervalo aceitável, a altura do elemento contido será usada. Se isso também estiver fora do intervalo aceitável, a altura padrão será usada. |
| labels | string | "none" | [Somente gráfico de pizza] Que rótulo, se houver, para cada fatia. Escolha um destes valores:
|
| lenda | string | "direita" | Onde exibir uma legenda do gráfico, em relação ao gráfico. Especifique um dos seguintes valores: 'top', 'bottom', 'left', 'right', 'none'. Ignorado em gráficos que não incluem legendas (como gráficos de mapa). |
| max | number | Valor máximo dos dados | O valor máximo exibido na balança. Ignorado para gráficos de pizza. O padrão é o valor máximo de dados, exceto para gráficos de barras, em que o padrão é o valor máximo de dados. Isso é ignorado em gráficos de barras quando a tabela tem mais de uma coluna de dados. |
| min | number | Valor mínimo dos dados | O valor mínimo mostrado na balança. Ignorado para gráficos de pizza. O padrão é o valor mínimo de dados, exceto nos gráficos de barras, em que o padrão é zero. Isso é ignorado em gráficos de barras quando a tabela tem mais de uma coluna de dados. |
| Marcadores de categoria | boolean | verdadeiro | Se os rótulos devem aparecer no eixo da categoria (ou seja, linha). Disponível apenas para gráficos de linhas e barras. |
| Rótulos de valor de exibição | boolean | verdadeiro | Verdadeiro exibe um rótulo no eixo de valor. Disponível apenas para gráficos de linhas e barras. |
| Coluna únicaDisplay | number | nenhum | Renderiza apenas a coluna de dados especificada. Esse número é um índice baseado em zero na tabela, em que zero é a primeira coluna de dados. A cor atribuída à coluna é a mesma quando todas as colunas são renderizadas. Não pode ser usado com gráficos de pizza ou de mapa. |
| title | string | String vazia | O título do gráfico. Se não for especificado, nenhum título será exibido. O parâmetro de gráfico equivalente é chtt. |
| Intervalo de Rótulos de Valor | number | Automático | O intervalo em que os rótulos do eixo de valor são mostrados. Por exemplo, se min
for 0, max for 100 e valueLabelsInterval
for 20, o gráfico vai mostrar rótulos de eixo em (0, 20, 40, 60, 80 100). |
| largura | number | 400 | Largura do gráfico, em pixels. Se um intervalo estiver ausente ou não estiver aceitável, a largura do elemento contido será usada. Se isso também estiver fora do intervalo aceitável, a largura padrão será usada. |
Métodos
| Método | Tipo de retorno | Descrição |
|---|---|---|
draw(data, options) |
Nenhum | Desenha o mapa. |
getImageUrl() |
String | Retorna o URL da API Google Chart usado para solicitar o gráfico. Ela pode ter mais de 2.000 caracteres. Consulte a API Google Chart para mais detalhes. |
Eventos
Se você definir a propriedade enableEvents como verdadeira, os gráficos compatíveis vão gerar eventos para os usuários listados na tabela abaixo. Todos esses eventos
retornam um objeto event com as seguintes propriedades:
type: uma string que representa o tipo de evento.region: um ID para a região afetada. Adicione o parâmetrochof=jsonao tipo de gráfico bruto para ver uma lista de nomes disponíveis. Consultechof=jsonpara mais detalhes.
| Nome | Descrição | tipo Value |
|---|---|---|
error |
Disparado quando ocorre um erro ao tentar renderizar o gráfico. | ID, mensagem |
onmouseover |
Disparado quando o usuário passa o mouse sobre um elemento do gráfico. | "mouseover" |
onmouseout |
Disparado quando o usuário afasta o mouse de um elemento do gráfico. | "mouseout" |
onclick |
Disparado quando um usuário clica em um elemento do gráfico. | "clique" |
Quais gráficos são compatíveis com eventos?
Todos os gráficos com suporte ao parâmetro chof=json
aceitam a geração de eventos, ou seja, todos os gráficos, exceto os especiais, por exemplo,
códigos QR.
Exemplo de gerenciamento de eventos
Veja um exemplo que mostra uma barra que registra os cliques do mouse.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
Política de dados
Os dados são enviados para o serviço API Google Chart.
Localização
Essa visualização é compatível com qualquer localização compatível com o serviço Google Chart.