Uma tarefa que mais cedo ou mais tarde vamos ter que enfrentar ao longo de nossa andança como profissionais do web, é a criação de gráficos a partir de dados. Quando falo de gráficos me refiro a todo tipo de imagens que sirvam para representar dados, como gráficos de barras, de linhas, de progresso, de pizza, etc.

Obviamente, a criação de gráficas não é um tema trivial, e sim que requer uma grande dose de dedicação e esforço. Os gráficos, que geralmente se mostram em imagens, podem ser de muitos tipos diferentes e só o fato de tratar de desenhar em uma imagem linhas, barras ou inclusive pizzas em três dimensões, pode ser bastante complicado.

Entretanto, existem sistemas como JpGraph, que podem nos facilitar a tarefa de uma maneira muito interessante, pois oferecem uma série de mecanismos para a geração das imagens com os gráficos, de modo que nós só temos que nos centrar em carregar os dados a representar e escolher o tipo de gráfico que desejamos visualizar.

O que é JpGraph

É uma biblioteca que inclui uma série de classes -código orientado a objetos- que servem para criar imagens com todo tipo de gráficos, dinamicamente através páginas PHP.

O sistema está muito depurado e suporta uma infinidade de funcionalidades, por isso certamente encontraremos solução a praticamente qualquer necessidade no âmbito de criação de gráficos. Além disse, a maioria das configurações dos gráficos vêem com opções padrão, portanto resulta bastante simples obter resultados rapidamente.

Algumas das características do sistema são:

• Reduzido peso em bytes das imagens resultado. Habitualmente poucas KB.
• Suporte às bibliotecas GD1 ou GD2.
• Uso da Interpolação matemática para obter curvas a partir de poucos valores.
• Diversos tipos de gráficos 2D ou 3D, como de pontos, linhas, pizzas, barras, caixas...
• Escalas flexíveis tanto no eixo X como no Y, que se ajustam ao jogo de dados que tiver que representar.
• Suporte para gerar gráficos com vários jogos de valores de uma só vez.
• Configurável com distintos tipos de cores, legendas, tipografias, imagens de fundo, etc.

Como usar JpGraph

Este jogo de bibliotecas dispõe de uma extensa documentação e tutoriais para aprender a manejá-lo. Na documentação se encontram ainda numerosos exemplos de seu uso, desde os quais podemos partir para solucionar nossas necessidades.

O modo de trabalho para usar esta biblioteca é muito simples, trata-se de criar uma imagem com a etiqueta <img> de HTML, em cujo atributo src colocaremos a rota para o script PHP que se encarregará de gerar o gráfico.

No arquivo PHP que gerará o gráfico teremos que incluir as bibliotecas apropriadas para o tipo de gráfico que desejarmos realizar, também haverá que instanciar o objeto JpGraph correspondente, carregar os dados a visualizar e chamar aos métodos adequados para mostrar a imagem. Um mecanismo bastante simples que veremos em um par de exemplos a seguir.

Exemplo 1: um gráfico de linha


Neste exemplo vamos criar um gráfico linear no qual mostraremos as horas de trabalho de uma pessoa ao longo de 10 dias.

A geração do gráfico deste exemplo a fazemos em um arquivo que chamamos grafico_linha.php, portanto, a chamada a este arquivo dentro de uma imagem será a seguinte:

<img src="grafico_linha.php" alt="" border="0"> O código PHP do arquivo grafico_linha.php é o seguinte:

<?php
include ("jpgraph/jpgraph.php");
include ("jpgraph/jpgraph_line.php");

// Some data
$ydata = array(11.5,3,8,12,5,1,9,13,5,7);

// Create the graph. These two calls are always required
$graph = new Graph(450,250,"auto");
$graph->SetScale("textlin");
$graph->img->SetAntiAliasing();
$graph->xgrid->Show();

// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot->SetColor("black");
$lineplot->SetWeight(2);
$lineplot->SetLegend("Horas");

// Setup margin and titles
$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Exemplo: Horas de Trabalho");
$graph->xaxis->title->Set("Dias");
$graph->yaxis->title->Set("Horas de Trabalho");
$graph->ygrid->SetFill(true,'#EFEFEF@0.5','#F9BB64@0.5');
//$graph->SetShadow();

// Add the plot to the graph
$graph->Add($lineplot);

// Display the graph
$graph->Stroke();
?>

Exemplo 2: um gráfico de pizza em 3D


Por outro lado, vamos realizar um exemplo de um gráfico de pizza, no qual aparecem as horas realizadas por cada um dos empregados e a porcentagem com respeito aos totais. Neste caso, a pizza vai se apresentar em um desenho em 3 dimensões.

O arquivo onde se gera o gráfico se chama grafico_pizza.php. Ele será chamado dentro de uma imagem com este código HTML.

<img src="grafico_pizza.php" alt="" border="0">

O código PHP do arquivo grafico_pizza.php será o seguinte:

<?php
include ("jpgraph/jpgraph.php");
include ("jpgraph/jpgraph_pie.php");
include ("jpgraph/jpgraph_pie3d.php");

$data = array(40,60,21,33);

$graph = new PieGraph(450,200,"auto");
$graph->img->SetAntiAliasing();
$graph->SetMarginColor('gray');
//$graph->SetShadow();

// Setup margin and titles
$graph->title->Set("Exemplo: Horas de Trabalho");

$p1 = new PiePlot3D($data);
$p1->SetSize(0.35);
$p1->SetCenter(0.5);

// Setup slice labels and move them into the plot
$p1->value->SetFont(FF_FONT1,FS_BOLD);
$p1->value->SetColor("black");
$p1->SetLabelPos(0.2);

$nomes=array("pepe","luis","miguel","alberto");
$p1->SetLegends($nomes);

// Explode all slices
$p1->ExplodeAll();

$graph->Add($p1);
$graph->Stroke();
?>

Conclusão

JpGraph é uma ferramenta muito potente para a geração de gráficos em nossa página web e graças ao seu uso nos damos conta de suas muitas bondades:

• É uma biblioteca gratuita (para uso não comercial), fácil de instalar e de fácil manejo.
• Inclui uma completa documentação com uma infinidade de exemplos dos distintos gráficos que se podem gerar.
• Além de gerar muitos tipos de gráficos, permite 'customizar' quase tudo o que se vê, resultando isto muito útil para integrar perfeitamente o gráfico no design de nossa web.
• A forma de integrar o gráfico é muito simples: unicamente é necessário incluir uma imagem (etiqueta <IMG>) cujo src seja o script PHP que gerará nosso gráfico (ver exemplos).

Encontramos poucos defeitos na biblioteca, somente se poderia mais o seguinte:

• As mensagens de erro são meio e escassas, e a maioria das vezes quando algo falha, não obtemos nenhuma explicação.
• Faz falta algo de definição nos gráficos, sobretudo nos gráficos de setores.