Rafael Clares

Gráficos utilizando a Classe PHPlot

Pessoal, blz ai né?

Galerinha, vou apresentar hoje o PHPLot, uma classe bacana para criar gráficos em nossas aplicações PHP !

Vou começar dando alguns exemplos básicos da necessidade de se gerar gráficos na aplicação.

* Mostrar estatísticas de acesso diário/mensal/anual de um sistema on-line.
* Consumo de itens em uma dada categoria.
* Estatísticas de venda de produtos através da internet.
* Contatos por categoria (dúvidas, vendas, financeiro …)

Enfim, dados de entrada e saída que precisam ser acompanhados e analisados.

Aqui será apresentado o código necessário para gerar o gráfico na tela, não iremos, ao menos neste post, ver como pegar os dados dinâmicamente do banco e gerar o gráfico. Eu estou trabalhando em um projeto que deverá conter esse recurso, então fiz de acordo com as necessidades da aplicação no projeto.

Então, entraremos com os dados pré-definidos requeridos como parâmetros da classe PHPLot.

O gráfico que iremos gerar irá mostrar os usuários cadastrados em um sistema qualquer, exibiremos três barras para cada mês do ano, cada barra representará uma categoria de usuário e a quantidade de ocorrências de cadastro naquele mês.

Primeiramente, vamos ver como o código é estruturado:

<?php
#incluindo a classe. verifique se diretorio e versao sao iguais, altere se precisar
include(‘phplot-5.0.4/phplot.php’);
#Matriz utilizada para gerar os graficos
$data = array(
  array(‘Jan‘, 20, 2, 4), array(‘Fev‘, 30, 3, 4), array(‘Mar‘, 20, 4, 14),
  array(‘Abr‘, 30, 5, 4), array(‘Mai‘, 13, 6, 4), array(‘Jun‘, 37, 7, 24),
  array(‘Jul‘, 10, 8, 4), array(‘Ago‘, 15, 9, 4), array(‘Set‘, 20, 5, 12),
  array(‘Out‘, 28, 4, 14), array(‘Nov‘, 16, 7, 14), array(‘Dez‘, 24, 3, 15),
);
#Instancia o objeto e setando o tamanho do grafico na tela
$plot = new PHPlot(800,600);
#Tipo de borda, consulte a documentacao
$plot->SetImageBorderType(‘plain‘);
#Tipo de grafico, nesse caso barras, existem diversos(pizza…)
$plot->SetPlotType(‘bars‘);
#Tipo de dados, nesse caso texto que esta no array
$plot->SetDataType(‘text-data‘);
#Setando os valores com os dados do array
$plot->SetDataValues($data);
#Titulo do grafico
$plot->SetTitle(‘Cadastro de usuários no Site‘);
#Legenda, nesse caso serao tres pq o array possui 3 valores que serao apresentados
$plot->SetLegend(array(‘Estudantes‘,’Colunistas‘, ‘Desenvolvedores‘));
#Utilizados p/ marcar labels, necessario mas nao se aplica neste ex. (manual) :
$plot->SetXTickLabelPos(‘none‘);
$plot->SetXTickPos(‘none‘);
#Gera o grafico na tela
$plot->DrawGraph();
?>

O código acima irá gerar exatamento o gráfico como no exibido na figura abaixo:

A começar pelo Array $data, perceba que ele recebe 4 valores, isso é uma divergência à informação passada mais acima, mas calma, vou explicar. São 4 valores, o primeiro recebe uma string que se refere ao mês, o segundo valor recebe a quantidade de ocorrências para a categoria 1, o segundo recebe a quantidade de ocorrências para a categoria 2, o terceiro recebe a quantidade de ocorrências para a categoria 3.

Então, fora o mês temos 3 valores, opa agora sim ta fazendo sentido o que falei lá em cima. Bem, claro que você pode utilizar quantos valores quiser no seu array vai depender de sua necessidade!

Um outro ponto à ser considerado neste exemplo é a linha:

$plot->SetLegend(array(‘Estudantes’,'Colunistas’, ‘Desenvolvedores’));

Perceba que o método recebe um array com 3 valores, certo até ai não é?

continue nessa linha de raciocinio… O array recebe 3 valores que irão representar justamente os valores das 3 barras que serão geradas, lembra? 3 barras no array $data, 1 barra para cada categoria! lembrou né!!

Então, acontece que o array passado pelo método SetLegend precisa estar em ordem em relação os valores que você quer representar nas 3 barras, por exemplo:

Imagine esse array ->  (‘Janeiro’,10,20,30)

Bem, como dito antes o primeiro valor do array não será representado, trata-se apenas da legenda para as 3 barras do mês de Janeiro. Assim concluímos que, teremos uma barra com altura 10, outra com altura 20 e a última com altura 30. Então vamos voltar ao método SetLegend(), os valores do array passado por esse método irão representar as cores das barras, vamos unir as duas linhas em questão.

1 -(‘Janeiro’, 10, 20, 30)
2 -SetLegend(array(‘Estudantes’,'Colunistas’, ‘Desenvolvedores’))

 Agora, tente visualizar o Estudantes = 10, Colunistas = 20 e Desenvolvedores = 30.

Sacou né? Por isso que você deve prestar atenção na ordem das legendas, parece bobeira mas se você acidentalmente inverter as posições seu sistema não servirá de nada além de apresentar os dados incorretos para o usuário fazendo-o tomar decisões erradas. É sempre bom nos atentarmos à estes detalhes, eles fazem toda a diferença, literalmente!  ;)

Importante!

Cada arquivo como o do exemplo acima gera o gráfico retornando como uma imagem, ou seja, você não adiciona textos ou conteúdo adicional à este arquivo. Para utilizar em meio à outras páginas com conteúdos você pode fazer como descrito abaixo.

<p>Gráfico 1</p>
<img src=”grafico1.php” />
<p>Gráfico 2</p>
<img src=”grafico2.php” />

Algumas considerações:
O PHPlot não se resume apenas à gráficos em barras, ele permite gerar gráficos desde gráficos pizza até os mais complexos gráficos. As cores também podem ser setadas como parâmetro.

Dê uma boa olhada na documentação.

Links:
A Classe PHPlot em  http://sourceforge.net/projects/phplot/

A documentação do PHPlot deve estar contida no pacote, caso contrário http://www.jeo.net/php/phplot/doc/

O Exemplo (não inclui todos os arquivos do PHPlot e docs)
download exemplo

Galerinha, vai terminando por aqui, se quiserem ver como gerar gráficos à partir de uma tabela do banco de dados, peçam aí por comentário que escreverei com muito prazer!

Abraços e obrigado pelos comentários que vocês tem deixado aí, são todos motivadores!  ;)

Rafael Clares