Proponha uma correção, faça uma sugestão
PHP é a Quinta-Feira – Gráficos em PHP com pChart
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
Este artigo tem mais de um ano
Loading ...
Pedro,
Agora que falas em gráficos, acabo por me lembrar de te perguntar se por acaso tens conhecimento do nome da library que permite criar gráficos ao estilo do google analytics.
Bom artigo.
será este : http://teethgrinder.co.uk/open-flash-chart-2/
ou este http://www.fusioncharts.com/
jqplot para jquery
Para mim o melhor que anda aí em termos de gráficos são:
HighCharts: http://www.highcharts.com/
JSCharts: http://www.jscharts.com/
Mas este dois são pagos, isto é, para uso pessoal pode-se usar mas para uso comercial há que pagar uma licença.
Mas se tiver mesmo que ser Free posso aconselhar dois que tenho usado para projectos meus:
OpenFlashChart 2: http://teethgrinder.co.uk/open-flash-chart-2/
(mas este como é baseado em Flash tenho vindo a evitar o seu uso recenetemente)
Ou pode-se usar a maravilhosa API da Google: http://code.google.com/apis/visualization/interactive_charts.html
(esta está ao nível dos que referi acima mas usa como base os server da Google, o que pode não interessar em alguns casos)
Dentro dos free e exclusivamente em php tens também o JPgraph: http://jpgraph.net/
grande artigo…tava mesmo a precisar disto. ja é a 3x que me acontece com php =D
obrigado e continuem com o bom trabalho. parabens
Também já trabalhei com o Open Flash Chart, gerando o JSON em PHP, mas é em Flash, o que nos dias de hoje começa a ser negativo. Conheço as soluções jQuery, funcionam bem, já usei o hightcharts e é espectacular, permite uma interactividade fantástica. Mas para esta rúbrica de PHP tive de pegar numa solução verdadeiramente PHP. 🙂
Obrigado, estava mesmo a precisar disto para um trabalho.
Continua com o bom trabalho, todas as 5as cá passo para ver o novo post.
Olá! óptimo tutorial!
Estive a testar mas não consegui que fosse produzido nenhum gráfico. O código não dá erros e apenas produz um monte de caracteres estranho (como um dump do ficheiro binário).
Alguma sugestão ?
Boas John, esse código é a imagem do gráfico, mas o browser não está a interpretá-lo como uma imagem. Normalmente isso acontece-me quando estou a programar e vou fazendo F5 à página e quando o gráfico sai correctamente o browser já não interpreta como uma imagem. Limpa o cache do browser e em vez de fazeres F5 para actualizar põe o url da pagina mesmo na barra de endereço e abre. Normalmente quando isso me acontece resolvo assim. Se não funcionar apita! 😉
Olá Pedro,
Já tentei a tua sugestão mas sem sucesso (com o IE9). No Firefox 4 diz que a página tem erros.
Estive a ver o manual do pChart e existem várias opções para output. Já tentei com $myPicture->Stroke(); e com $myPicture->autoOutput(“grafico.png”);
mas também sem grandes diferenças. Vou tentar outras alternativas. De qq modo obrigado pela sugestão.
Boas, podes colocar aqui o erro que te dá no firefox?!
Cumprimentos
Olá Pedro,
já resolvi. obrigado!!
Boa!
Como é que fizeste? Estou com o mesmo problema…
Boas.
Eu gostava que alguém me explicasse sucintamente como é que eu ponho o pChart a funcionar..
Para onde é que tenho que extrair a pasta que se faz o download do site pChart?
Desde já obrigado e peço desculpa pela falta de clareza..
Bom dia Gonçalo, não sei em que ponto é que queres que comece a explicação. Tens o PHP e o apache instalados? Tens a pasta www, ou htdocs ou algo do genero, onde colocas os teus ficheiros… É nessa pasta ou numa subpasta que tens que ter o pchart extraído! Depois segues este tutorial…
Explica melhor qual é o teu problema, para te poder ajudar.
Boa Tarde a todos! Tendo em conta a Google Chart API, pedia ajuda a alguém para perceber qual o meu erro… Estou a tentar montar um grafico de barras com dados mensais que são lidos de MSSQL. Não consigo fazer nada aparecer no gráfico.
<?php
$conexão = mssql_connect("SERVER", "", "") or die("Não foi possível a conexão com o servidor");
mssql_select_db("DB",$conexão) or die("Não foi possível selecionar o banco de dados");
$sql = "SELECT MONTH(CABECDOC.DATA) AS MES,
round(sum(LINHASDOC.QUANTIDADE*ABS(LINHASDOC.PRECUNIT)- LINHASDOC.DESCONTOCOMERCIAL),0) as VENDAS
FROM LINHASDOC
INNER JOIN CABECDOC ON CABECDOC.ID= LINHASDOC.IDCABECDOC
WHERE YEAR(LINHASDOC.DATA)=2010
group by MONTH(CABECDOC.DATA)";
$result = mssql_query($sql);
/* Escreve resultados até que não haja mais linhas na tabela */
while($consulta = mssql_fetch_array($result)) {
print "$consulta[MES] – $consulta[VENDAS]”;
}
$gratab = array ();
while($consulta= mssql_fetch_array($result)) {
array_unshift ($gratab, $consulta);
}
/** Inclusao Classe */
include( ‘GoogChart.class.php’ );
/** Criaçao Grafico */
$chart = new GoogChart();
$i = count($gratab);
echo $i;
$data=array(); // Criação Table Vazia
for($i = 0; $i < count($gratab); $i++){
$data [ $gratab[$i][2] ]= $gratab[$i][3];
}
// Set graph colors
$color = array(
'#99C754',
'#54C7C5',
'#999999',
);
/* # Chart 1 # */
echo 'Pie chart’;
$chart->setChartAttrs( array(
‘type’ => ‘bar-horizontal’,
‘title’ => ‘Vendas 2011’,
‘data’ => $data,
‘size’ => array( 400, 300 ),
‘color’ => $color
));
// Print chart
echo $chart;
mssql_close();
?>
Desde já agradeço toda a ajuda que me puderem dar!
Abcs
Pedro
Olá a todos,
Alguém teve um problema com as legadas e titulos do gráfico?
eu consigo produzir o gráfico mas não estou a consegui criar uma imagem com as legendas, nem com os nomes do eixos?
Alguém sabe porque?
obrigado
Olá a Todos novamente,
Já descobri o meu problema, apenas era necessário dar o caminho da font correcto, já que tinha alterado as pastas…
lololol… estava dificil 😛
Obrigado a todos,
Olá a todos alguém me pode ajudar? Eu estou a utilizar o PChart e no final aparece um quadrado pequenino no lado esquerdo, alguém já teve este problema ou sabe o que pode ser?
Christophe Costa…
experimenta correr um exemplo:
…htdocs\pChart\examples\
já tive um problema semelhante e o problema estava no caminho dos includes e das fontes do texto.