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.