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 150×100 pixels com o fundo em tonalidade amarela e desenha uma linha preta cortando o gráfico:

<?
header ("Content-type: image/png");
$imagem = imagecreate (150, 100);
$corFundo = imagecolorallocate ($imagem, 255, 255, 200);
$corLinha = imagecolorallocate ($imagem, 0, 0, 0);
imageline ($imagem, 10, 90, 140, 10, $corLinha);
imagepng ($imagem);
?>

header ("Content-type: image/png");

$imagem = imagecreate (150, 100);

$corFundo = imagecolorallocate ($imagem, 255, 255, 200);

$corLinha = imagecolorallocate ($imagem, 0, 0, 0);

imageline ($imagem, 10, 90, 140, 10, $corLinha);

imagepng ($imagem);

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.

Para PHP4 é indicada a versão 1.19 da JpGrapf e para a versão 5 do PHP é indicada a versão 2.0 beta.

Download das Fontes TTF (Linux)

http://corefonts.sourceforge.net/

http://www.gnome.org/fonts/

Como saber se o PHP já tem o suporte à JpGrapf?

Executar a função phpinfo(), que deve retornar:

GD support – enabled
FreeTypeSupport – enabled
JPG support – enabled
PNG support – enabled
WBMP support – enabled

Exemplos que podem ser encontrados no site official em

http://www.aditus.nu/jpgraph/pdf/jpgraphddda.pdf

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

1	$ tar -zxvf jpgraphx.x.tar.gz

O comando acima criará o diretório jpgraph-x.x com a seguinte estrutura de diretórios:

./src arquivos da classe jpgraph
./docs manual de uso
./README instruções detalhadas sobre instalação
./QPL.txt cópia da licença QPL

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á:

$ mkdir /usr/local/jpgraph
$ cp jpgraphx.x/src/* /usr/local/jpgraph

1 2	$ mkdir /usr/local/jpgraph $ cp jpgraphx.x/src/* /usr/local/jpgraph

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"

1	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.

No link abaixo você poderá ver o funcionamento desta classe e ver no que ela é capaz de fazer:

http://pt.wikibooks.org/wiki/Aplicativos_em_PHP/Trabalhando_em_PHP_com/Imagens_e_Gr%C3%A1ficos

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.

<?
// exemplo1.php
// fazer uso da classe jpgraph padrão e sua especialização
// em gráfico de barras
include ("jpgraph.php");
include ("jpgraph_bar.php");

/*
Definir um array para cada ponto da coordenada Y, especificando
seus pontos/valores, sendo:
$numGols = o número de gols marcados em cada dia da semana, 
começando Domingo (8 gols) e terminando Sábado (11 gols)
*/ 
$numGols = array ("8", "7", "12", "10", "7", "9", "11");

// iniciar criação do gráfico
$grafico = new graph(350,200,"png");

// ajustar alguns parâmetros
$grafico->SetScale("textlin");
$grafico->SetShadow();

$grafico->title->Set('Viva o Linux Futebol Clube');

// criar o gráfico de barras
$gBarras = new BarPlot($numGols);

// ajuste de cores
$gBarras->SetFillColor("orange");
$gBarras->SetShadow("darkblue");

// adicionar gráfico de barras ao gráfico
$grafico->Add($gBarras);

// imprimir gráfico
$grafico->Stroke();

?>

// exemplo1.php

// fazer uso da classe jpgraph padrão e sua especialização

// em gráfico de barras

include ("jpgraph.php");

include ("jpgraph_bar.php");

Definir um array para cada ponto da coordenada Y, especificando

seus pontos/valores, sendo:

$numGols = o número de gols marcados em cada dia da semana,

começando Domingo (8 gols) e terminando Sábado (11 gols)

$numGols = array ("8", "7", "12", "10", "7", "9", "11");

// iniciar criação do gráfico

$grafico = new graph(350,200,"png");

// ajustar alguns parâmetros

$grafico->SetScale("textlin");

$grafico->SetShadow();

$grafico->title->Set('Viva o Linux Futebol Clube');

// criar o gráfico de barras

$gBarras = new BarPlot($numGols);

// ajuste de cores

$gBarras->SetFillColor("orange");

$gBarras->SetShadow("darkblue");

// adicionar gráfico de barras ao gráfico

$grafico->Add($gBarras);

// imprimir gráfico

$grafico->Stroke();

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

1	<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.

<?
// exemplo2.php
include ("jpgraph.php");
include ("jpgraph_bar.php");

$numGols = array ("8", "7", "12", "10", "7", "9", "11");
// definir dias da semana
$diasSemana = array("Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb");

$grafico = new graph(350,200,"png");

// margem das partes principais do gráfico (dados), o que está
// fora da margem fica separado para as labels, títulos, etc
$grafico->img->SetMargin(40,40,40,40);

$grafico->SetScale("textlin");
$grafico->SetShadow();

$grafico->title->Set('Viva o Linux Futebol Clube');
// definir sub-titulo
$grafico->subtitle->Set('www.vivaolinux.com.br');

// pedir para mostrar os grides no fundo do gráfico,
// o ygrid é marcado como true por padrão
$grafico->ygrid->Show(true);
$grafico->xgrid->Show(true);

$gBarras = new BarPlot($numGols);
$gBarras->SetFillColor("orange");
$gBarras->SetShadow("darkblue");

// título dos vértices
$grafico->yaxis->title->Set("Gols");
$grafico->xaxis->title->Set("Dia da semana");
// título das barras
$grafico->xaxis->SetTickLabels($diasSemana);


$grafico->Add($gBarras);
$grafico->Stroke();
?>

// exemplo2.php

include ("jpgraph.php");

include ("jpgraph_bar.php");

$numGols = array ("8", "7", "12", "10", "7", "9", "11");

// definir dias da semana

$diasSemana = array("Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb");

$grafico = new graph(350,200,"png");

// margem das partes principais do gráfico (dados), o que está

// fora da margem fica separado para as labels, títulos, etc

$grafico->img->SetMargin(40,40,40,40);

$grafico->SetScale("textlin");

$grafico->SetShadow();

$grafico->title->Set('Viva o Linux Futebol Clube');

// definir sub-titulo

$grafico->subtitle->Set('www.vivaolinux.com.br');

// pedir para mostrar os grides no fundo do gráfico,

// o ygrid é marcado como true por padrão

$grafico->ygrid->Show(true);

$grafico->xgrid->Show(true);

$gBarras = new BarPlot($numGols);

$gBarras->SetFillColor("orange");

$gBarras->SetShadow("darkblue");

// título dos vértices

$grafico->yaxis->title->Set("Gols");

$grafico->xaxis->title->Set("Dia da semana");

// título das barras

$grafico->xaxis->SetTickLabels($diasSemana);

$grafico->Add($gBarras);

$grafico->Stroke();

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!

<?
// exemplo4.php
include ("jpgraph.php");
include ("jpgraph_bar.php");

$numGols = array ("8", "7", "12", "10", "7", "9", "11");
// definir um array com o número de gols sofridos
$numGolsSofridos = array("3", "4", "13", "9", "1", "5");

$diasSemana = array("Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb");

$grafico = new graph(350,200,"png");
$grafico->img->SetMargin(40,40,40,40);
$grafico->SetScale("textlin");
$grafico->SetShadow();

$grafico->title->Set('Viva o Linux Futebol Clube');
$grafico->subtitle->Set('www.vivaolinux.com.br');
$grafico->ygrid->Show(true);
$grafico->xgrid->Show(true);

$gBarras = new BarPlot($numGols);
$gBarras->SetFillColor("orange");
$gBarras->SetShadow("darkblue");
// com a função SetLegend estamos automaticamente criando uma legenda
// para o gráfico
$gBarras->SetLegend("Gols marcados");

// criar mais um gráfico de barras para o número de gols sofridos
$gBarras2 = new BarPlot($numGolsSofridos);
$gBarras2->SetFillColor("red");
$gBarras2->SetShadow("darkblue");
$gBarras2->SetLegend("Gols sofridos");

$grupoBarras = new GroupBarPlot(array($gBarras,$gBarras2));
$grafico->Add($grupoBarras);

$grafico->yaxis->title->Set("Gols");
$grafico->xaxis->title->Set("Dia da semana");
$grafico->xaxis->SetTickLabels($diasSemana);


$grafico->Stroke();
?>

// exemplo4.php

include ("jpgraph.php");

include ("jpgraph_bar.php");

$numGols = array ("8", "7", "12", "10", "7", "9", "11");

// definir um array com o número de gols sofridos

$numGolsSofridos = array("3", "4", "13", "9", "1", "5");

$diasSemana = array("Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb");

$grafico = new graph(350,200,"png");

$grafico->img->SetMargin(40,40,40,40);

$grafico->SetScale("textlin");

$grafico->SetShadow();

$grafico->title->Set('Viva o Linux Futebol Clube');

$grafico->subtitle->Set('www.vivaolinux.com.br');

$grafico->ygrid->Show(true);

$grafico->xgrid->Show(true);

$gBarras = new BarPlot($numGols);

$gBarras->SetFillColor("orange");

$gBarras->SetShadow("darkblue");

// com a função SetLegend estamos automaticamente criando uma legenda

// para o gráfico

$gBarras->SetLegend("Gols marcados");

// criar mais um gráfico de barras para o número de gols sofridos

$gBarras2 = new BarPlot($numGolsSofridos);

$gBarras2->SetFillColor("red");

$gBarras2->SetShadow("darkblue");

$gBarras2->SetLegend("Gols sofridos");

$grupoBarras = new GroupBarPlot(array($gBarras,$gBarras2));

$grafico->Add($grupoBarras);

$grafico->yaxis->title->Set("Gols");

$grafico->xaxis->title->Set("Dia da semana");

$grafico->xaxis->SetTickLabels($diasSemana);

$grafico->Stroke();

Espero ter ajudado! Existem outras formas de fazer gráficos, mas nada melhor se tiver um boa ajuda de uma ferramenta que já lhe proporciona tudo do que precisa.

Carregando...