O Google Charts é uma poderosa ferramenta JavaScript para criação de diversos tipos de gráficos e que são facilmente implementados em páginas HTML, proporcionando uma excelente apresentação visual e que não requer instalação de componentes, uma vez que toda informação é processada pelo próprio Google.
Neste primeiro post abordarei a criação de um simples gráfico de pizza (ou torta, já que o nome em inglês é PieChart) mostrando como chamar a API, definir o tipo de gráfico e setar seus valores.
Para criar um gráfico são necessárias basicamente três bibliotecas: a API Google JSAPI, a biblioteca Google VIsualization e a biblioteca referente ao gráfico desejado. Estas bibliotecas podem ser carregadas utilizando as tags <script> na sua página HTML, da seguinte forma:
<!-- Carregando API JSAPI -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Carregando a biblioteca Visualization e a biblioteca piechart
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
// ... criação do gráfico ...
</script>
O método load() possui os seguintes parâmetros:
‘visualization’: Carregando a biblioteca Google Visualization
‘1;0’: Versão atual da biblioteca
packages: lista com os nomes dos pacotes de gráfico desejados. O pacote ‘corechart’ é o mais básico, onde estão os gráficos do tipo pie, bar e column. Outros tipos de gráficos mais complexos fazem partes de outros pacotes, bastando apenas definir os pacotes desejados, como por exemplo o pacote de gráficos tipo tabela:
google.load('visualization', '1.0', {'packages':['corechart','table']});
A linha seguinte define qual método será chamado (drawchart) após a confirmação de resposta do google ao método load().
O próximo passo é definir o conjunto de dados para formar nosso gráfico. Para isso o pacote Visualization possui a classe DataTable que é uma tabela bidimensional, com linhas e colunas, onde cada coluna possui um tipo de dado, um ID opcional e um label opcional. Existem várias formas de se criar um DataTable e vamos explorar isso melhor em um próximo post.
Os dados no DataTable precisam estar organizados em um formato esperado pelo gráfico. Os gráficos mais simples como os tipos barra e coluna, necessitam de um tabela com no mínimo duas colunas, onde cada linha da tabela representará uma barra do gráfico. A primeira coluna da tabela sempre representará os textos descritivos do gráfico (ou seja, nosso eixo X no caso de um gráfico de colunas) e a segunda coluna representará os valores do gráfico (eixo Y no caso de um gráfico de colunas). Casa coluna adicional da tabela representaria uma distinta série em nosso gráfico, no caso de gráficos com múltiplas séries, mas isto também será tema de um futuro post.
A seguir um exemplo de código para popular um DataTable:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Região');
data.addColumn('number', 'Filiais');
data.addRows([
['Norte', 3],
['Nordeste', 7],
['Sul', 12],
['Sudeste', 23],
['Centro-Oeste', 9]
]);
Todo gráfico pode ser customizado de diversas formas, e com os componentes do Google Charts não é diferente. Para configurar as customizações basta criar um objeto JavaScript com o nome e valor da propriedade desejada. Cada gráfico pacote possui uma série de propriedades e podem ser visualizadas na documentação dos gráficos, assim como as opções disponível para o PieChart. A seguir um exemplo de como definir a posição da legenda, o título do gráfico, opções de 3D e tamanho do gráfico.
var options = {
'legend':'left',
'title':'Vendas Por Região',
'is3D':true,
'width':400,
'height':300
}
A respeito do tamanho do gráfico, podemos especificar esta propriedade em dois lugares: no HTML através do elemento <div>, ou nas opções do gráfico através do javascript. Se for especificado em ambos, o gráfico sempre vai tender a usar os tamanhos definidos no HTML, e se não for especificado, o gráfico pode não ser renderizado adequadamente.
O último passo é desenhar o gráfico. Para isso basta criar uma instância da classe do gráfico e executar o método draw(). Neste caso a classe utilizada é google.visualization.PieChart. O método construtor da classe do gráfico necessita de apenas um parâmetro, a referência ao elemento onde o gráfico será criado.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
Portanto neste caso é necessário criar um elemento HTML (normalmente um <div>) e atribuí-lo um ID, para que este possa ser referenciado no construtor da classe. Finalmente basta executar o método draw(), que possui dois parâmetros. O primeiro é o DataTable, o objeto que contém os dados do gráfico, e o segundo é o objeto options, com as configurações de customização. O segundo parâmetro não é obrigatório.
Parabéns! Você acabou de criar seu primeiro gráfico utilizando o Google Charts Tools.
Abaixo está disponível o código completo (HTML e JavaScript) deste exemplo:
<html>
<head>
<!-- Carregando a API AJAX -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Carregando a API Visualization e os pacotes de gráficos
google.load('visualization', '1.0', {'packages':['corechart']});
// Configurando o método que será executado quando a API for carregada
google.setOnLoadCallback(drawChart);
// Método onde será criado o DataTable,
// configurado e inicializado o gráfico.
function drawChart() {
// Criando o DataTable
var data = new google.visualization.DataTable();
data.addColumn('string', 'Região');
data.addColumn('number', 'Filiais');
data.addRows([
['Norte', 3],
['Nordeste', 7],
['Sul', 12],
['Sudeste', 23],
['Centro-Oeste', 9]
]);
// Opções de customizaçaõ
var options = {
'legend':'left',
'title':'Vendas Por Região',
'is3D':true,
'width':400,
'height':300
}
// Instanciando e desenhando o gráfico, passando algunas opções
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!-- Div onde será criado o gráfico -->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
E o resultado obtido:
Algumas considerações: Como podem ter observado, em nenhum momento instalamos nenhuma classe ou componente. Todo processamento para criação do gráfico é executado pelo próprio Google. Portanto para o correto funcionamento será sempre necessário uma conexão com Internet. Mesmo assim, esta solução me pareceu muito eficiente e tem funcionando perfeitamente.
Finalmente, para aqueles que querem começar JÁ a brincar com o Google Charts, não é necessário instalar nenhum ambiente de desenvolvimento. Podemos utilizar a própria plataforma do Google para isso. Através do Google Code Playground podemos testar vários modelos de gráficos e outros componentes do Google, alterar suas configurações e visualizar o resultado. É possível até mesmo executar o código em modo Debug. É uma ferramenta muito poderosa, e porque não divertida!
Pontanto, Hello Chart e mãos a obra!
(emilioParme){} 