Utilizando o Google Charts – Parte 4: Exibindo os Valores dos Dados

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.

Image Chart with Value Marker

Continue lendo “Utilizando o Google Charts – Parte 4: Exibindo os Valores dos Dados”

Publicidade

Utilizando o Google Charts – Parte 3: Gauges

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>

Utilizando o Google Charts – Parte 2: Múltiplas séries e gráficos combinados

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>