Por Pedro Peixoto para o PPLWARE
Nos dias correntes, e com a necessidade de melhorar o conteúdo das nossas páginas, é cada vez mais frequente apresentar dados na forma como melhor se entendem: em gráficos. Existem várias ferramentas que servem este propósito, umas pagas outras gratuitas, umas mais simples outras mais complexas, com animações ou sem animações. Hoje vamos conhecer o pChart, uma classe PHP que nos permite gerar gráficos de forma rápida, fácil e gratuita.
Para este exemplo vamos fazer um gráfico em pilha com dados fictícios das visitas do PPLWARE blog e PPLWARE fórum.
Preparação
Depois de fazer download da classe é necessário fazer os includes:
include("pChart/class/pData.class.php");
include("pChart/class/pDraw.class.php");
include("pChart/class/pImage.class.php");
De seguida vamos inicializar objecto que armazenará os dados:
MyData = new pData();
Para adicionar séries usa-se a função addPoints que recebe um array de dados e o nome da série:
$MyData->addPoints(array(7,8,15,20,18,12,8,19,9,16,20,8),"PPLWARE Blog");
$MyData->addPoints(array(19,0,8,8,8,12,19,10,5,12,20,8),"PPLWARE Forum");
$MyData->addPoints(array('JAN','FEB','MAR','ABR','MAI','JUN','JUL','AGO','SET','OUT','NOV','DEZ'),"Mes");
Como no nosso caso, queremos que uma das series seja o eixo das abcissas devemos indica-lo através da função setAbscissa:
$MyData->setAbscissa("Mes");
De seguida vamos indicar o texto a apresentar nos eixos, como uma das series vai ser o eixo dos xx, basta indicarmos o texto para o eixo dos yy, usamos a função setAxisName:
$MyData->setAxisName(0,"Visitantes únicos");
Uma vez que os dados que temos estão em milhares, vamos indicar a unidade usando a função setAxisUnit, no fundo esta função acrescenta à frente dos valores/eixos/legendas o texto indicado no segundo parâmetro, o primeiro parâmetro é o id do eixo, neste caso yy:
$MyData->setAxisUnit(0,”000″); ou $MyData->setAxisUnit(0,”k”);
Desenho
Agora que já temos os nossos dados preparados vamos desenhar o gráfico.
Em primeiro lugar temos de criar um objecto gráfico:
$myPicture = new pImage(1199,230,$MyData);
De seguida indicamos as dimensões usando a função setGraphArea:
$myPicture->setGraphArea(60,30,950,190);
Temos ainda de escolher a fonte a usar para a representação de texto através da função setFontProperties:
$myPicture->setFontProperties(array("FontName"=>"pChart/fonts/pf_arma_five.ttf","FontSize"=>6));
Falta apenas configurar a escala, neste capítulo há muitas opções disponíveis, neste caso queremos apenas uma escala simples com os yy entre 0 e 50, para isso usamos o drawScale.
$AxisBoundaries = array(0=>array("Min"=>0,"Max"=>50));
$myPicture->drawScale(array("Mode"=>SCALE_MODE_MANUAL,"ManualScale"=>$AxisBoundaries));
Estamos prontos para, finalmente, gerar o gráfico, como queremos um gráfico em pilha, usamos a função drawStackedBarChart, mas esta classe oferece muitos outros. Vamos então gerar um gráfico em pilha, com valores nas próprias colunas, cor automática, efeito de cor gradiente e contorno:
$myPicture->drawStackedBarChart(array("DisplayValues"=>TRUE,"DisplayColor"=>DISPLAY_AUTO,"Gradient"=>TRUE,"Surrounding"=>60));
Podemos adicionalmente colocar uma legenda, que neste caso é muito útil, usando a função drawLegend, indicado a sua disposição:
$myPicture->drawLegend(570,212,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL));
Por fim, temos de fazer o output. Esta classe possibilita que uma imagem seja guardada em ficheiro ou mostrada directamente na própria página que é o que vamos fazer usando a função stroke:
$myPicture->stroke();
Eis o resultado final:
Sandbox
Existe ainda uma ferramenta chamada sandbox para a construção de gráficos através de um interface gráfico, para o caso de o utilizador não querer estar a escrever código.
Conclusão
O pChart é uma classe poderosa para a construção de gráficos que tanto pode ser usada para a construção de simples gráficos, como para os gráficos mais complexos. Possui muitas opções, parâmetros e funções que nos permitem fazer qualquer gráfico imaginável, pelo que não podemos deixar de lhe dar algum destaque.
A inclusão de javascript permite ainda implementar algumas funcionalidades de interacção, embora o facto de trabalhar com imagens estáticas o limite um pouco neste capítulo.
O pChart é muito mais do que uma simples classe para gerar gráficos, podendo por exemplo:
– Gerar códigos de barra
– Diagramas, Esquemas ou até mesmo simples imagens.
Por tudo o pChart isto é uma classe bastante útil que pode ser útil em qualquer altura. A ferramenta “Sandbox” disponibiliza ainda uma forma mais fácil de gerar gráficos, tornando esta classe uma das melhores entre tantas outras semelhantes, e o melhor de tudo: é grátis!
Artigos relacionados