“Uma imagem diz mais que mil palavras”, se isso é verdade é muito discutível, mas com certeza um gráfico facilita bastante a assimilação de uma boa quantidade de dados. Gráficos são importantes com certeza(os administradores adoram) e agregam bastante a um sistema.

Até pouco tempo a única biblioteca de gráficos que eu conhecia utilizava Flash e era bem complicada de mexer, a Fusion Charts, mas a alguns meses descobri uma biblioteca bem mais interessante a pChart que gera gráficos muito bonitos e de forma bem fácil. Então vamos parar de enrolação e vamos colocar a mão na massa.

Primeiro é claro vamos baixar o pChart. No zip vem vários arquivos, muitos de exemplos e etc. Só nos interessa as pastas class, que contém as classes PHP propriamente ditas, fontes com fontes diferenciadas para os rótulos dos gráficos, e palettes com cores predefinidas.

Gráfico em barra

include("pChart/class/pData.class.php");
include("pChart/class/pImage.class.php");

$data = new pData();
$data->addPoints( array( 10 , 20 , 30 , 40 , 30 , 20 , 10 , -10 , -20 , -30 ) , "Valores A" );
$data->addPoints( array( "Janeiro" , "Fevereiro" , "Março" , "Abril" , "Maio" , "Junho" , "Julho" , "Agosto" , "Setembro" , "Outubro" ) , "Meses" ); 

$data->setAbscissa("Meses");
$data->setAxisName(0,"Hits"); 

$myPicture = new pImage( 700 , 230 , $data );
$myPicture->drawRectangle( 0 , 0 , 699 , 229 , array( "R"=>0 , "G"=>0 , "B"=>0 ) ); 

$myPicture->setFontProperties( array( "FontName"=>"pChart/fonts/pf_arma_five.ttf" , "FontSize"=>6 ) ); 

$myPicture->setGraphArea(60,40,650,200); 

$scaleSettings = array( "GridR"=>200 , "GridG"=>200 , "GridB"=>200 , "CycleBackground"=>TRUE );
$myPicture->drawScale($scaleSettings); 

$myPicture->drawLegend( 580 , 12 , array( "Style"=>LEGEND_NOBORDER , "Mode"=>LEGEND_HORIZONTAL ) ); 

$myPicture->drawBarChart(); 

$myPicture->autoOutput('barra.png');

Nas linhas 1 e 2 incluímos os arquivos da classes pData e pImage que iremos utilizar.

Na linha 4 instanciamos um objeto pData que é o objeto que representa os dados de nosso gráfico é por ele que adicionaremos os valores no gráfico.

Na linha 5 adicionamos os valores das barras através do método addPoints , os valores são adicionados no 1º parâmetro em forma de array e o 2º parâmetro é o rotulo desta série de dados, o pChart aceita gráficos com vários séries ou seja várias barras por intervalo do eixo X.

Na linha 6 adicionamos mais valores, mas estes serão os rótulos que estarão no eixo X(iremos configurar isso na linha 9) então ele deve ter o mesmo número de valores no array dos valores das barras.

Na linha 8 configuramos a serie “Meses” como rótulos do eixo X. Na linha 9 definimos o nome do eixo X.

Neste momento já definimos os dados do nosso gráfico agora devemos construir nossa imagem para isso criamos uma instância da classe pImage e recebe como parâmetro as dimensões da imagem, no caso a imagem terá 700px de largura e 230px de largura, e passamos também o nosso objeto que representa os dados do gráfico $data.

Na linha 12 utilizamos o método drawRectangle para desenhar um retangulo com borda preta ao redor da imagem para delimitar a borda.

Na linha 14 definimos a fonte através do método setFontProperties repare que para FontName se esta apontando para um arquivo da pasta fonts, se deseja utilizar outra fonte para os rótulos do gráfico basta colocar um novo ttf e especificar o caminho neste método, e também podemos definir o tamanho da fonte através do FontSize.

Na linha 16 utilizamos o método setGraphArea defimos onde nosso gráfico será desenhado na imagem, lembrando a imagem que iremos gerar terá 700×230 mas é dentro dela que iremos desenha o gráfico de barras e devemos informar os pontos x,y inicial e x,y final como se estivéssemos desenhado um retângulo.

Na linha 18 definimos as propriedades da escala, que serão utilizadas para desenha-la na linha 20 com o método drawScale. A escala é a área que serão desenhadas as barras, os valores GridR, GridG e GridB são os valores de cores das linha que serão desenhadas no fundo e CycleBackground é para mostrar as linhas de escala.

Na linha 21 desenhamos a legenda do gráfico.

Na linha 23 utilizamos o método drawBarChart para desenhar o gráfico propriamente dito, baseado nas configurações feitas anteriormente.

Na linha 25 geramos a imagem do gráfico para isso utilizamos autoOutput ela irá gerenciar automaticamente se a imagem deve ser enviada para o navegador ou ser salva. Mas podemos obrigar o gráfico ser salvo utilizando o método render.

Veja o gráfico gerado:

Gráfico em pizza

include("pChart/class/pData.class.php");
include("pChart/class/pPie.class.php");
include("pChart/class/pDraw.class.php");
include("pChart/class/pImage.class.php");

$data = new pData();   

$data->addPoints(array(10,20,30),"Placar");
$data->addPoints(array("A","B","C"),"Label");
$data->setAbscissa("Label"); 

$myPicture = new pImage(500,300,$data);
$myPicture->drawRectangle( 0 , 0 , 499 , 299 , array( "R"=>0 , "G"=>0 , "B"=>0 ) );
$myPicture->setFontProperties( array( "FontName"=>"pChart/fonts/verdana.ttf" , "FontSize"=>18 ) ); 

$PieChart = new pPie($myPicture,$data);
$PieChart->draw3DPie( 150 , 160 , array( "DrawLabels"=>TRUE , "Border"=>TRUE ) );
$PieChart->drawPieLegend( 450 , 50 , array( "Style"=>LEGEND_NOBORDER , "Mode"=>LEGEND_VERTICAL ) );
$myPicture->autoOutput();

Para criar um gráfico em pizza utilizamos basicamente os mesmos códigos para criar o objeto de dados pData e a imagem pImage.

Mas necessitamos criar um objeto pPie que é nosso gráfico em pizza, ele recebe como parâmetro do construtor o nosso objeto de imagem e de dados(linha 16).

Na linha 17 desenhamos nosso gráfico em pizza com o método draw3DPie que recebe os 2 primeiros parâmetros são a posição do centro do gráfico na imagem. O 3º parâmetro é um array com as opções do gráfico, no caso especificamos que será mostrado os labels no gráfico e que ele terá bordar.

Na linha 18 desenhamos a legenda do gráfico em pizza. Os dois primeiros parâmetros são a posição na imagem e o array contém as opções, no caso, sem bordar e a legenda na horizontal.

Veja como o gráfico ficou:

Gráfico em linha

include("pChart/class/pData.class.php");
include("pChart/class/pDraw.class.php");
include("pChart/class/pImage.class.php");

$data = new pData();
$data->addPoints( array( 10 , 20 , 30 , 40 , 30 , 20 ) , "Server A" );
$data->addPoints( array( "Janeiro" , "Fevereiro" , "Março" , "Abril" , "Maio" , "Junho" ) , "Meses" ); 

$data->setAbscissa("Meses");
$data->setAxisName(0,"Hits"); 

$myPicture = new pImage(700,230,$data); 

$myPicture->drawRectangle( 0 , 0 , 699 , 229 , array( "R"=>0 , "G"=>0 , "B"=>0 ) ); 

$myPicture->setFontProperties( array( "FontName"=>"pChart/fonts/pf_arma_five.ttf" , "FontSize"=>6 ) ); 

$myPicture->setGraphArea(60,40,650,200); 

$scaleSettings = array( "GridR"=>200 , "GridG"=>200 , "GridB"=>200 , "CycleBackground"=>TRUE );
$myPicture->drawScale($scaleSettings); 

$myPicture->drawLegend( 580 , 12 , array( "Style"=>LEGEND_NOBORDER , "Mode"=>LEGEND_HORIZONTAL ) ); 

$myPicture->drawLineChart(); 

$myPicture->autoOutput();

O gráfico em linha é praticamente igual ao gráfico em barra basta alterar a linha 25 para desenhar com o método drawLineChart.

Veja um exemplo do gráfico gerado abaixo:

Bom esse é o básico da biblioteca pChart ela é muito completa permitindo vários outros tipos de gráficos como Barcode, Bubble chart, Plot chart, Polar and radars, Progress bars, Surface chart.

Confira a documentação e os exemplos que vem junto com a biblioteca você vai se surpreender!

Era isso até mais e obrigado pelos peixes!