Se você deseja gerar gráficos em sua aplicação web para exibição de metas, existem vários plug-ins PHP para te ajudar nessa tarefa. Uma das opções e o motivo de estudo deste artigo é o PHPlot, que pode ser baixado aqui, ou diretamente no site do desenvolvedor aqui.

O que é PHPlot?

PHPlot é uma biblioteca gráfica para gerar gráficos científicos, empresariais e do mercado de ações dinâmicamente. PHPlot permite aos desenvolvedores de PHP criar gráficos de pizza, barras, linha, pontos, etc. a partir de uma aplicação PHP.

O melhor de tudo é que, como está no SourceForge.net, então é totalmente gratuito para você usar. Você também pode redistribuí-lo sem modificações e sem restrição.

E como implementar seu uso?

Primeiramente, baixe o módulo no link acima e copie-o no local onde está sua página, para teste, pode criar uma pasta dentro do diretório raiz com o nome que desejar, por exemplo, no caso do seu servidor ser wampp (Windows): C:\wamp\www\gráfico-php\

O gráfico é gerado e formatado a partir de um arquivo com PHP puro e, para uma melhor organização dos arquivos e sua manutenção, aconselho deixar ele dentro de uma pasta, podendo ser chamada através do PHP, ou até mesmo de uma página HTML.

Vamos criar então os dois arquivos, primeiro criaremos o arquivo gráfico.php:

 SetFileFormat("png"); // Definindo o título do gráfico $grafico->SetTitle("Grafico Exemplo\nseucurso.com.br"); // Tipo do gráfico // Por ser: lines, bars, boxes, bubbles, candelesticks, candelesticks2, linepoints, ohlc, pie, points, squared, stackedarea, stackedbars, thinbarline $grafico->SetPlotType("lines"); // Título dos dados no eixo Y $grafico->SetYTitle("Vezes"); // Título dos dados no eixo X $grafico->SetXTitle("Dias"); // dados do gráfico $dados = array( array('Dom', 12), array('Seg', 20), array('Ter', 7), array('Qua', 2), array('Qui', 6), array('Sex', 4), array('Sáb', 1) ); $grafico->SetDataValues($dados); //Exibimos o gráfico $grafico->DrawGraph(); ?> 

Feito isso, basta criar a página que será usada para chamar esse arquivo e mostrar o gráfico no formato de uma imagem PNG. Como esse arquivo retorna uma imagem, para chama-lo usamos a tag fazendo a chamada para o mesmo. Para ter controle e posicionar a imagem gerada, você pode fazer uso do CSS, bastando para isso coloca-lo entre uma DIV e lembrando que terá controle somente de posicionamento, a font, tamanho, etc... será configurada diretamente no arquivo gerado acima. Neste artigo coloquei somente uma div com align=’center’:

Este exemplo acima foi usado informações adicionadas manualmente, mas como seria a implementação da mesma, usando uma tabela do Banco de Dados. Imaginem por exemplo, como faria para mostrar os cinco posts mais visualizados no gráfico. É simples (nem tanto), bastando percorrer a tabela com um loop e ir adicionando no array de dados o valor de cada linha de sua tabela. Lembre-se que no modelo estático temos vários array dentro de um outro array e como seria então?

Criamos a conexão com o BD, fazemos um SQL para obter os dados que deseja e percorremos o loop utilizando o foreach da seguinte forma:

 SetFileFormat("png"); // Definindo o titulo do grafico $grafico->SetTitle("Posts mais acessados"); // Tipo do grafico // Por ser: lines, bars, boxes, bubbles, candelesticks, candelesticks2, linepoints, ohlc, pie, points, squared, stackedarea, stackedbars, thinbarline $grafico->SetPlotType("bars"); // Titulo dos dados no eixo Y $grafico->SetYTitle("Vezes"); // Titulo dos dados no eixo X $grafico->SetXTitle("ID - Posts"); // dados do grafico require_once('admin/class/Conexao.class.php'); //faz a conexao com o BD usando PDO, precisa estar habilitado nas opcoes PHP $pdo = new Conexao(); //armazena os dados da intrucao SQL $resultado = $pdo->select("SELECT DISTINCT id_post, qntAcesso FROM `post` order by qntAcesso DESC LIMIT 5"); //cria um array vazio $dados = array(); //percorre o loop preenchendo o array foreach($resultado as $res){ //cria um array auxiliar para que a cada linha ele comece um novo, pois eh varios array dentro de um array $aux = array(); $idPost = $res['id_post']; //armazena o ID do post e concatena abaixo para melhorar o visual array_push($aux, "post-$idPost" , $res['qntAcesso']); //add o array novo dentro do array unico criado antes do loop array_push($dados, $aux); } //seta os dados $grafico->SetDataValues($dados); //Exibimos o gráfico $grafico->DrawGraph(); ?>

Voilá! Segue o exemplo funcionando aqui.

PS: E antes que alguém corrija a grafia de “voilá”, veja o artigo muito bem escrito por sinal do Rodrigo Ghedin

Você poderá conferir as diferentes opções de formatação do gráfico na documentação completa aqui.