Palavra:   

Revista PHP / PHP

Fábio Berbert

Mantenedor do portal www.vivaolinux.com.br e desenvolvedor de soluções baseadas em software livre. Conheça também o site www.masterdev.com.br

Criando gráficos com a classe JPGraph (parte 1)

Introdução

A linguagem PHP, quando utilizada em conjunto com a biblioteca GD nos oferece uma infinidade de recursos para criar e manipular imagens,sendo possível criar desenhos vetoriais, thumbnails, manipular imagens prontas, dentre outros.

O código abaixo cria uma imagem de 150x100 pixels com o fundo em tonalidade amarela e desenha uma linha preta cortando o gráfico:

PHP
  1. <?
  2. header ("Content-type: image/png");
  3. $imagem = imagecreate (150, 100);
  4. $corFundo = imagecolorallocate ($imagem, 255, 255, 200);
  5. $corLinha = imagecolorallocate ($imagem, 0, 0, 0);
  6. imageline ($imagem, 10, 90, 140, 10, $corLinha);
  7. imagepng ($imagem);
  8. ?>
www.revistaphp.com.br


Como pode-se notar, os comandos são relativamente intuitivos, porém criar uma imagem de estrutura mais complexa pode ser uma tarefa bastante dolorosa.Imagine criar um sofisticado gráfico de pizza a partir do zero ? Para nossa sorte existem classes PHP de terceiros que facilitam nossa vida e é sobre isso que vou falar nesse artigo. Hoje seremos apresentados à classe jpgraph da PHP, usada para criar quaisquer tipo de gráfico imaginável.

Obtendo e instalando a classe jpgraph

Antes de mais nada você precisa fazer o download da classe a partir de sua página oficial através da URL: http://www.aditus.nu/jpgraph/

Ao clicar no link para download, será recebido o arquivo jpgraph-x.x.tar.gz,onde x.x corresponde à versão do programa. Descompacte o arquivo com o comando:

$ tar -zxvf jpgraphx.x.tar.gz

O comando acima criará o diretório jpgraph-x.x com a seguinte estrutura de diretórios:
  1. ./src arquivos da classe jpgraph
  2. ./docs manual de uso
  3. ./README instruções detalhadas sobre instalação
  4. ./QPL.txt cópia da licença QPL
www.revistaphp.com.br
Você tem duas opções ao utilizar os arquivos da classe em seus scripts:

    * Copiar todos os arquivos de ./src para o diretório onde se encontram seus scripts
    * Copiar os arquivos de ./src para um diretório definido no include_path do seu arquivo de configuração do PHP (php.ini)

Sem dúvidas a segunda alternativa é melhor, sendo assim vamos criar um diretório de inclusão e copiar os arquivos para lá:
  1. $ mkdir /usr/local/jpgraph
  2. $ cp jpgraphx.x/src/* /usr/local/jpgraph
www.revistaphp.com.br

Edite o arquivo php.ini (geralmente em /etc/php4/apache/php.ini) e inclua o novo diretório em seu path:

include_path = ".:/usr/local/jpgraph"

Ao reiniciar o Apache a classe jpgraph estará instalada.

Nota: o software é distribuído sob licença QPL, que é uma variação da GPL com algumas restrições. O software continua sendo livre, mas é bom dar uma lida no arquivo QPL.txt distribuído junto com o mesmo para se manter bem informado.

Criando gráfico de barras

Em nosso primeiro exemplo prático vamos criar um simples gráfico de barras. Tenho um time de futebol de botão de mesa e quero botar em gráfico o número de gols que o time marcou durante a semana.
PHP
  1. <?
  2. // exemplo1.php
  3. // fazer uso da classe jpgraph padrão e sua especialização
  4. // em gráfico de barras
  5. include ("jpgraph.php");
  6. include ("jpgraph_bar.php");
  7.  
  8. /*
  9. Definir um array para cada ponto da coordenada Y, especificando
  10. seus pontos/valores, sendo:
  11. $numGols = o número de gols marcados em cada dia da semana,
  12. começando Domingo (8 gols) e terminando Sábado (11 gols)
  13. */
  14. $numGols = array ("8", "7", "12", "10", "7", "9", "11");
  15.  
  16. // iniciar criação do gráfico
  17. $grafico = new graph(350,200,"png");
  18.  
  19. // ajustar alguns parâmetros
  20. $grafico->SetScale("textlin");
  21. $grafico->SetShadow();
  22.  
  23. $grafico->title->Set('Viva o Linux Futebol Clube');
  24.  
  25. // criar o gráfico de barras
  26. $gBarras = new BarPlot($numGols);
  27.  
  28. // ajuste de cores
  29. $gBarras->SetFillColor("orange");
  30. $gBarras->SetShadow("darkblue");
  31.  
  32. // adicionar gráfico de barras ao gráfico
  33. $grafico->Add($gBarras);
  34.  
  35. // imprimir gráfico
  36. $grafico->Stroke();
  37.  
  38. ?>
www.revistaphp.com.br


Figura 02 - um simples gráfico de barras


Se você deseja utilizar esse gráfico numa página HTML, basta fazer sua referência a partir de uma tag img:

<img src="exemplo1.php">

Sofisticando o seu gráfico de barras

 
Agora que estamos aptos à criar nosso primeiro gráfico de barras,vamos sofisticar nosso gráfico com alguns add-ons como o nome dos dias da semana, label dos vértices, etc. Vamos aproveitar o primeiro exemplo adicionando novas linhas e comentando-as.
PHP
  1. <?
  2. // exemplo2.php
  3. include ("jpgraph.php");
  4. include ("jpgraph_bar.php");
  5.  
  6. $numGols = array ("8", "7", "12", "10", "7", "9", "11");
  7. // definir dias da semana
  8. $diasSemana = array("Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb");
  9.  
  10. $grafico = new graph(350,200,"png");
  11.  
  12. // margem das partes principais do gráfico (dados), o que está
  13. // fora da margem fica separado para as labels, títulos, etc
  14. $grafico->img->SetMargin(40,40,40,40);
  15.  
  16. $grafico->SetScale("textlin");
  17. $grafico->SetShadow();
  18.  
  19. $grafico->title->Set('Viva o Linux Futebol Clube');
  20. // definir sub-titulo
  21. $grafico->subtitle->Set('www.vivaolinux.com.br');
  22.  
  23. // pedir para mostrar os grides no fundo do gráfico,
  24. // o ygrid é marcado como true por padrão
  25. $grafico->ygrid->Show(true);
  26. $grafico->xgrid->Show(true);
  27.  
  28. $gBarras = new BarPlot($numGols);
  29. $gBarras->SetFillColor("orange");
  30. $gBarras->SetShadow("darkblue");
  31.  
  32. // título dos vértices
  33. $grafico->yaxis->title->Set("Gols");
  34. $grafico->xaxis->title->Set("Dia da semana");
  35. // título das barras
  36. $grafico->xaxis->SetTickLabels($diasSemana);
  37.  
  38.  
  39. $grafico->Add($gBarras);
  40. $grafico->Stroke();
  41. ?>
www.revistaphp.com.br


Gráfico de barras agrupado

Agora me surgiu a necessidade de definir a quantidade de gols sofridos no mesmo gráfico, será que vai ficar legal ? Claro que vai, meu saldo de gols está positivo. Ou seja, o que seriam dois gráficos separados,o de gols marcados e gols sofridos passará a ser apenas um. Vou criar o gráfico normalmente e adicionar mais um gráfico de barras no mesmo.Vamos reutilizar o código do último exemplo e comentar as novas linhas adicionadas. Let's work!
PHP
  1. <?
  2. // exemplo4.php
  3. include ("jpgraph.php");
  4. include ("jpgraph_bar.php");
  5.  
  6. $numGols = array ("8", "7", "12", "10", "7", "9", "11");
  7. // definir um array com o número de gols sofridos
  8. $numGolsSofridos = array("3", "4", "13", "9", "1", "5");
  9.  
  10. $diasSemana = array("Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb");
  11.  
  12. $grafico = new graph(350,200,"png");
  13. $grafico->img->SetMargin(40,40,40,40);
  14. $grafico->SetScale("textlin");
  15. $grafico->SetShadow();
  16.  
  17. $grafico->title->Set('Viva o Linux Futebol Clube');
  18. $grafico->subtitle->Set('www.vivaolinux.com.br');
  19. $grafico->ygrid->Show(true);
  20. $grafico->xgrid->Show(true);
  21.  
  22. $gBarras = new BarPlot($numGols);
  23. $gBarras->SetFillColor("orange");
  24. $gBarras->SetShadow("darkblue");
  25. // com a função SetLegend estamos automaticamente criando uma legenda
  26. // para o gráfico
  27. $gBarras->SetLegend("Gols marcados");
  28.  
  29. // criar mais um gráfico de barras para o número de gols sofridos
  30. $gBarras2 = new BarPlot($numGolsSofridos);
  31. $gBarras2->SetFillColor("red");
  32. $gBarras2->SetShadow("darkblue");
  33. $gBarras2->SetLegend("Gols sofridos");
  34.  
  35. $grupoBarras = new GroupBarPlot(array($gBarras,$gBarras2));
  36. $grafico->Add($grupoBarras);
  37.  
  38. $grafico->yaxis->title->Set("Gols");
  39. $grafico->xaxis->title->Set("Dia da semana");
  40. $grafico->xaxis->SetTickLabels($diasSemana);
  41.  
  42.  
  43. $grafico->Stroke();
  44. ?>
www.revistaphp.com.br

Como vocês podem ver, criar belos gráficos em PHP é moleza, ponto para a comunidade de desenvolvedores que apoiam a iniciativa do software livre. No site oficial do jpgraph o autor cita que aceita donativos caso o software seja útil à sua empresa. Assim que eu angariar recursos em trabalhos baseados nessa classe não terei dúvidas ao depositar uma quantia simbólica como forma de agradecimento.

No próximo artigo veremos como criar gráficos de pizza, linhas e alguns recursos adicionais.

Atenciosamente,
Fábio Berbert de Paula

Opções de Interação

Comentários

Mais dicas para o JpGraph
Por: Marcelo, 11/02/2011   18:09:09
Olá pessoal, quem estiver interessado em mais algumas dicas de JpGraph acesse http://webadmti.wordpress.com

Abraços.
O que estou fazendo errado no Jpgrafh?
Por: GEOVANE, 14/10/2010   09:56:30
Senhores, bom dia!
Efetuei o download do arquivo zip, descompactei-o coloquei o diretorio descompactado no htdocs editei meu php.ini inserindo o diretorio, porém quando tento executar ocorre o erro abaixo:

Warning: require_once(jpgraph/jpgraph.php): failed to open stream: No such file or directory in C:\apache2triad\htdocs\relatorio_novo\2008\MALOG\pielabelsex1.php on line 2 Fatal error: require_once(): Failed opening required 'jpgraph/jpgraph.php' (include_path='.;C:\apache2triad\php;C:\apache2triad\php\smarty;C:\apache2triad\php\pear;C:\apache2triad\php\jpgraph') in C:\apache2triad\htdocs\relatorio_novo\2008\MALOG\pielabelsex1.php on line 2

Como proceder?
Dúvida.
Por: Viviane, 10/02/2008   19:34:29
Boa noite Fábio! Qdo incluo números negativos, o título do eixo X sobre põe alguns dos números, quero saber como faço para que isso não ocorra, existe alguma forma de deixar o título do eixo x fixo no rodapé do gráfico?
*Adorei o artigo!
até mais...
Dúvidas
Por: Paulo, 24/01/2008   19:37:21
Olá! gostei do artigo, muito bom. Porém, não estou conseguindo usar, não trabalho com linux trabalho com windows e os diretórios são diferente, não estou conseguindo configurar a classe por essa razão, gostaria de obter ajuda.
Dúvida
Por: ALEX, 06/11/2007   11:37:36
Olá Fábio!
tô com um probleminha com meu grafico. eu criei um array para o eixo Y.
$dadoY = array($m01, $m02, $m03, $m04, $m05, $m06, $m07, $m08, $m09, $m10, $m11, $m12);
Porém o jpgraph naum está criando o grafico.
os valores do array são todos int.
vc Pode me ajudar?
meu email é alexvc.com@hotmail.com
Vlew.
Erro....
Por: Sidnei, 23/08/2007   10:24:40
Muito bom esse artigo, mas não consegui utilizar porque sempre aparece vários erro referentes as funções, quase todos citando que as funções não existem no PHP, como resolvo isso ?
gráficos de barras
Por: bruno, 03/08/2007   10:31:44
ola... massa o teu artigo.. muito show mesmo.. me diz uma coisa, tem como num gráfico de barras colocar uma cor para cada barra? eu olhei aqui na documentação do jpgraph mas num vi nada sobre isso.

até mais..