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>
(emilioParme){} 