Traduzido de ALT1040
Recentemente Google anunciou que permitirá a desenvolvedores web compartilhar e visualizar páginas inteiras armazenadas dentro de suas contas de Drive, o serviço de armazenamento gratuito da companhia, que até então funcionava apenas como um disco virtual. Agora qualquer pessoa pode subir arquivos de extensão HTML, JavaScript e até CSS, para que depois de seguir alguns simples passos seja possível tornar pública a página principal e navegar como uma página web funcional.
Seguindo com nosso estudo da API de gráficos do Google, neste post vou demonstrar como utilizar um componente utilizado por 10 entre 10 desenvolvedores corporativos que trabalham com dashboard’s, o Gauge. Trata-se daqueles relógios, ou velocímetros, que server para criar indicadores de acompanhamento de metas ou indicadores que necessitam estar dentro de limites de controles.
São principalmente muito úteis na criação de painéis, pois fornecem diversas informações sobre um mesmo elemento, e mais do que isso, são visualmente muito bonitos e impactantes. Portanto se você também quer impressionar seu chefe, mãos a obra.
O primeiro passo é carregar o pacote ‘gauge‘, correspondente aos gráficos do tipo Gauge.
google.load('visualization', '1', {packages:['gauge']});
O seguinte passo é a definição dos dados do gráfico. Este tipo de gráfico possui duas informações básicas: O label, ou texto do gráfico e o valor do gráfico, que posicionará a ‘agulha’ do mesmo. Portanto o DataTable para este tipo de gráfico deve possuir apenas duas colunas, sendo a primeira o Label, e a segunda os Valores. É possível criar em um único gráfico, diversos ‘velocímetros’, criando portanto diversos gauges sobre o mesmo componente chart. Para isso cada linha do DataTable representará um gauge diferente.
var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]);
No caso acima, serão criados três Gauges, um exibindo a informação de Memória, o segundo CPU e o último Rede.
O último passo é a definição dos ranges (ou faixas) dos gráficos, e caso necessário, as faixas de cores do gauge.
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
minorTicks: 5
};
No exemplo acima além das opções de altura e largura do gráfico, também é possível definir as faixas de valores para cada cor do gráfico, além do valor dos marcadores intermediários do mostrador dos Gauges.
Após as definições acima, basta apenas instanciar um novo componente chart e passar como parâmetro as informações de DataTable e options.
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
Pronto! Nosso Gauge já está funcional!
Observação: O componente chart permite apenas um objeto de customização options. Portanto só é possível definir um valor para cada faixa de cor dos gráficos. Sendo assim se você necessita Gauges com distintos valores de faixas, será necessário criar distintos componentes chart e inserir cada um em uma respectiva <div>.
Abaixo o código completo do nosso exemplo. Não deixem de avisar caso tenham alguma dúvida. Abraços!
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
Dando continuidade ao uso do componente Google Charts vou abordar neste post dois tópicos: Como utilizar várias séries para exibir distintos valores no mesmo período e como combinar diferentes tipos de gráficos de uma só vez.
A opção de criar um gráfico com múltiplas séries é muito útil quando existe a necessidade de exibir mais de um valor para um mesmo período, por exemplo, a quantidade de vendas de diferentes produtos em cada mês ou a evolução nas pesquisas eleitorais de cada candidato semana a semana.
Para isso não existe a necessidade de realizar nenhuma alteração no código que já vimos no primeiro post. Apenas alteramos a fonte de dados do gráfico, no nosso caso o DataTable. Conforme explicado no post anterior, a primeira coluna do DataTable representa normalmente os períodos ou valores descritivos do gráfico, como por exemplo os meses de venda. As colunas seguintes representam os valores do gráfico, como a quantidade de produtos vendidos, sendo que cada coluna do DataTable criará uma nova série no gráfico.
Sendo assim um DataTable para um gráfico com múltiplas séries teria a seguinte estrutura:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Região');
data.addColumn('number', 'Geladeira');
data.addColumn('number', 'Fogão');
data.addColumn('number', 'Microondas');
data.addColumn('number', 'Cafeteira');
data.addRows([
['Norte', 4, 6, 1, 1],
['Nordeste', 8, 7, 5, 2],
['Sul', 5, 7, 5, 4],
['Sudeste', 8, 6, 7, 6],
['Centro-Oeste', 6, 7, 3, 4]
]);
Abaixo o resultado obtido:
Para combinar diferentes tipos de gráficos, não utilizaremos a classe específica de cada tipo para inicializar o gráfico, mas sim a classe ComboChart, que nos permite realizar esta combinação.
Esta classe permite que seja definido o tipo de gráfico para cada série do DataTable, entre os seguintes tipos: line, area, bars, candlesticks and stepped area. Para configurar o tipo de gráfico da série se utiliza a propriedade seriesType e a propriedade series para especificar as propriedades de cada série individualmente.
Utilizando o mesmo DataTable acima, vamos acrescentar uma nova série chamadas Meta de Vendas:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Região');
data.addColumn('number', 'Geladeira');
data.addColumn('number', 'Fogão');
data.addColumn('number', 'Microondas');
data.addColumn('number', 'Cafeteira');
data.addColumn('number', 'Meta de Vendas');
data.addRows([
['Norte', 4, 6, 1, 1, 4],
['Nordeste', 8, 7, 5, 2, 5],
['Sul', 5, 7, 5, 4, 5],
['Sudeste', 8, 6, 7, 6, 7],
['Centro-Oeste', 6, 7, 3, 4, 4]
]);
Em seguida se altera as opções de customização do gráfico para definir o tipo de cada série. Na propriedade seriesType vamos configurar como sendo “bars”, o que definiria que todas as séries padrões do gráfico serão do tipo barra, e na propriedade series vamos definir que a série de Metas de Vendas será do tipo “line”. Esta configuração é realizada através do número do índice da série dentro do gráfico, iniciando a contagem em zero. Neste caso o índice da série de Meta é 4.
var options = {
'legend':'right',
'title':'Vendas Por Região',
'is3D':true,
'width':700,
'height':400,
seriesType: "bars",
series: {4: {type: "line"}}
};
Por último alteramos a classe instanciada para o tipo ComboChart.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
Abaixo o resultado final.
Espero que tenham gostado. Não esqueçam de se divertirem com o Google Playgound!
Abaixo o código completo do 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', 'Geladeira');
data.addColumn('number', 'Fogão');
data.addColumn('number', 'Microondas');
data.addColumn('number', 'Cafeteira');
data.addColumn('number', 'Meta de Vendas');
data.addRows([
['Norte', 4, 6, 1, 1, 4],
['Nordeste', 8, 7, 5, 2, 5],
['Sul', 5, 7, 5, 4, 5],
['Sudeste', 8, 6, 7, 6, 7],
['Centro-Oeste', 6, 7, 3, 4, 4]
]);
// Opções de customização
var options = {
'legend':'right',
'title':'Vendas Por Região',
'is3D':true,
'width':700,
'height':400,
seriesType: "bars",
series: {4: {type: "line"}}
};
// Instanciando e desenhando o gráfico, passando algunas opções
var chart = new google.visualization.ComboChart(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>
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){} 