Aproveitando uma dúvida que me enviaram estou escrevendo esta pequena dica. Conhecemos bem algumas interatividades dos gráficos, como por exemplo mostrar uma caixa do tipo ToolTip ao posicionar o mouse sobre as séries. Porém as vezes necessitamos que os valores dos dados estejam sempre em exibição junto com as linhas ou colunas, para que o usuário tenha uma rápida interpretação dos dados.
Em outras linguagens isso é uma tarefa muito simples (como o showDataTips do Adobe Flex), mas com o Goole Charts precisamos de um pouco mais de linhas de código, embora não seja impossível.
O que vamos aprender aqui é como usar um Data Value Marker. Esta funcionalidade permite inserir diversos tipos de marcadores sobre os gráficos. Alguns exemplos e todas as opções de configurações podem ser vistos com mais detalhes aqui.
Para inserir marcadores em nosso gráfico ao invés de usar a classe específica do gráfico desejado, utilizaremos a classe ImageChart.
O primeiro passo é criar nosso conjunto de dados, da mesma forma que já havíamos visto, através do DataTable.
Em seguida vamos fazer a configuração do nosso gráfico através do parâmetro “options“.
Para definir o tipo de gráfico que queremos, neste caso vamos usar um gráfico de barras, devemos utilizar o parâmetro “cht” e definir seu valor como “bhg“, da seguinte forma:
var options = {};
// 'bhg' parâmetro para um gráfico horizontal agrupado de barras.
// 'bvg' parâmetro para um gráfico vertical agrupado de barras.
// Para este exemplo é irrelevante que seja um gráfico agrupado,
// pois temos apenas uma série.
options.cht = 'bhg';
Uma vez definido o tipo de gráfico, agora iremos configurar como desejamos que o label com o valor da barra seja exibido através do marcador. Para isso utilizamos o parâmetro “chm”.
options.chm = 'N,2c689f,0,-1,10,0';
Cada valor entre “,” indica uma configuração, como cor do label, sobre qual série será exibido, etc. Apesar de ser mais “simples” configurar o parâmetro desta forma, pode parecer um pouco confuso a princípio. Portanto vamos configurá-lo da seguinte forma para ficar mais “clean”:
//Define os valores como do tipo Numérico
var tipoValor = 'N';
// Definindo as cores dos Labels.
var cor = '2c689f';
// Precisamos indicar sobre qual coluna queremos o label.
// Como neste exemplo só temos uma série,
// a coluna de dados é a coluna 0.
var indice = 0;
// -1 indica que os labels serão apresentados sobre todas as colunas
var mostrarBarras = -1;
// 10 pixels tamanho da fonte dos Labels.
var tamanhoFonte = 10;
// Para este exemplo a prioridade não é importante, mas é um parâmetro obrigatório
var prioridade = 0;
options.chm = [tipoValor, cor, indice, mostrarBarras, tamanhoFonte, prioridade].join(',');
Agora ficou bem mais claro, não é?
Pronto. Com isso já temos nosso gráfico configurado. Em seguida seria apenas instanciar a classe ImageChart para a criação do nosso gráfico:
new google.visualization.ImageChart(document.getElementById('visualization')).draw(data, options);
O Google Charts não faz o ajuste automático do eixo de valores para números maiores que 100. Pontanto como no meu exemplo estou usando números muito grandes, necessitamos ajustar o range do gráfico, através dos seguintes parâmetros:
//Alterando o range dos dados var min = 0; var max = 35000000; options.chds = min + ',' + max; //Ajustando os valores dos rótulos das colunas de acordo com o Range dos eixos options.chxr='1,0,35000000';
Simples assim.
O uso de parâmetros para realizar as diversas configurações necessárias parece confuso no início, mas com um pouco de insistência pode se tornar relativamente simples. Não deixem de usar a documentação do Google e os Wizards para testar todo tipo de alteração até obter o que desejam.
Abaixo deixo o código completo do meu exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
API Google Charts - Volume de Passageiros nos Aeroportos Brasileiros
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Criando o Data Table
var data = google.visualization.arrayToDataTable([
['Aeroporto', 'Passageiros'],
['São Paulo (Guarulhos)', 32177594],
['Rio de Janeiro (Galeão)', 17491744],
['São Paulo (Congonhas)', 16775785],
['Brasília', 15665045],
['Belo Horizonte (Confins)', 10200348],
['Rio de Janeiro (Santos Dummont)', 8960345],
['Campinas', 8824074],
['Salvador', 8528837],
['Porto Alegre', 8261355],
['Curitiba (Afonso Pena)', 6825666]
]);
var options = {};
// 'bhg' parâmetro para um gráfico horizontal agrupado de barras.
// 'bvg' parâmetro para um gráfico vertical agrupado de barras.
// Para este exemplo é irrelevante que seja um gráfico agrupado, pois temos apenas uma série.
options.cht = 'bhg';
//Alterando o range dos dados
var min = 0;
var max = 35000000;
options.chds = min + ',' + max;
//Ajustando os valores dos rótulos das colunas de acordo com o Range dos eixos
options.chxr='1,0,35000000';
// Agora as definições de configurações para exibir os rótulos das barras.
//Define os valores como do tipo Numérico
var tipoValor = 'N';
// Definindo as cores dos Labels.
var cor = '2c689f';
// Precisamos indicar sobre qual coluna queremos o label.
// Como neste exemplo só temos uma série,
// a coluna de dados é a coluna 0.
var indice = 0;
// -1 indica que os labels serão apresentados sobre todas as colunas
var mostrarBarras = -1;
// 10 pixels tamanho da fonte dos Labels.
var tamanhoFonte = 10;
// Para este exemplo a prioridade não é importante, mas é um aprâmetro obrigatório
var prioridade = 0;
options.chm = [tipoValor, cor, indice, mostrarBarras, tamanhoFonte, prioridade].join(',');
//Criar o objeto visualization.
new google.visualization.ImageChart(document.getElementById('visualization')).draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 300px;"></div>
</body>
</html>
Um abraço a todos!
(emilioParme){} 
Boa Tarde.
Estou com mais um probleminha meu amigo.
Eu quero fazer um ComboChart com os valores deles aparecendo, porem nao estou conseguindo.
Gostaria que todos os valores de cada coluna aparecesse no chart…Voce poderia me ajudar?
obs:Mas diferente do seu exemplo de combo,eu fiz empilhado ( isStacked: true).
Agradeço desde já…E mais uma vez,parabens pelo trabalho…Abç