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>

13 comentários em “Utilizando o Google Charts – Parte 2: Múltiplas séries e gráficos combinados

  1. Se eu não quiser usar o Google Playground, em que software posso desenvolver o código? E é necessário ter acesso a internet para carregar os gráficos?

    Pois preciso de um gráfico treemap mas o PC não terá acesso a net.

    Muito obrigado.

    1. Bruno,

      O Google PLayground é mais indicado para fazer testes e configurar os componentes que você vai criar.
      Normalmente utilizamos qualquer IDE para desenvolvimento web.
      Eu utilizo preferencialmente o Eclipse com os plugins para desenvolvimento html.
      Sim, você precisa obrigatoriamente ter acesso à internet para utilizar o Google Charts, pois esta é a política do Google, de disponibilizar serviços, e não bibliotecas.

      Abs!

  2. Olá Emílio! Artigo excelente! Só que estou com um probleminha para exibir valores vindo do banco. Quando coloco valores fixos, como no seu exemplo, funciona perfeitamente. Pode me dar uma luz de como mostrar os dados de forma dinâmica? Abraços!

    1. Vinicius, desculpa demorar tanto por responder (é uma vergonha, quase 2 meses… rs…. mas antes tarde do que nunca!)

      Basicamente é o mesmo princípio, porém ao invés de você criar os dados diretamente no DataTable, como foi feito nesse exemplo, você tem que popular seu DataTable com dados vindo do banco de dados. Para isso você precisa criar um código tipo server-side, que irá realizar o select no seu banco (no caso dos seus dados estarem em banco de dados) e retornar em um determinado formato, como XML ou JSON. Este arquivo server-side pode ser simplesmente um arquivo PHP. Aconselho a usar o formato JSON, pois é o mais utilizado pelo Google (portanto tem mais suporte) e é o formato que vem sendo usado com mais frequência.

      Dentro do método drawChart(), você faz uma chamada à sua página PHP que retornará seu JSON, e armazena em uma variável:

      var jsonData = $.ajax({
      url: “getData.php”,
      dataType:”json”,
      async: false
      }).responseText;

      Em seguida você popula seu DataTable com essa variável:

      var data = new google.visualization.DataTable(jsonData);

      Daí pra frente é tudo igual.

      Aqui você pode encontrar um exemplo explicando exatamente isso:
      https://developers.google.com/chart/interactive/docs/php_example

      Nesse exemplo ele utiliza um arquivo “estático” com o conteúdo do JSON, mas você pode criar uma query SQL.

      Vou postar um pequeno exemplo disso!

      Abs e boa sorte!

  3. Muito bom!!!
    Mas estou com um probleminha.
    No meu gráfico eu quero que tenha mais de uma linha, porem quando eu repito o codigo “series: {4: {type: “line”}}” com idices diferentes, ele so me mostra apenas uma das linhas…Tem como eu colocar mais de uma linha???Obrigado desde já.

    1. Weslei, obrigado.
      Caso precise de outra série do tipo line, não repita toda a propriedade series. Series é um array, portanto você adiciona outro elemento dentro de series, dessa forma:
      series: {4: {type: “line”}, 5: {type: “line”}}

      Você pode acessar também a página de documentação do Google: https://developers.google.com/chart/interactive/docs/gallery/combochart
      Veja que na parte de baixo dessa página, na seção Configuration Options tem uma tabela de propriedades. Procure por “series” e você verá exemplos de como configurar cada propriedade.

      Qualquer dúvida avise.

      Boa sorte.
      Abs.

  4. Mt bom!!!
    Mas estou com um preobleminha…Quero que meu grafico tenha barras e mais de uma linha…como faço isso???Colocar duas vezes o “series: {n: {type: “line”}}” nao adianta,pois ele so ira mostrar uma linha…Obrigado

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s