graficas con JPGRAPH

Vamos a ver un ejemplo de como crear una grafica sencilla de barras en php. Existen
varias librerías para la creación de gráficas podemos encontrar un top 10 en el siguiente blog :
http://tednologia.com/top-10-librerias-graficos-php/

Pero en este caso vamos a usar la libreria JPGraph el resultado final seria como la siguiente
imagen:

vamos a utilizar jpgraph por que es muy sencilla de utilizar y el formato que maneja de tipo
imagen, a diferencia de otras clases que nos generan la grafica en formato flash. Es importante
recordar que muchos usuarios no tienen instalados los pluggins para visualizar flash en su
navegador, si yo se que que en estos tiempos quien no lo va a tener... pues aunque no lo crean
son MUCHOS....

Bueno lo primero es descargar la libreria y para eso nos vamos a la pagina oficial.
http://jpgraph.net/download/index.php
La version mas actual es la 3.5 , la cual solo funciona PHP 5.1 en adelante.
Se descomprime y nos da de resultado una carpeta con el nombre de la libreria, esta carpeta la
vamos a pegar en la carpeta donde vamos a generar nuestro proyecto.

Ahora creamos un archivo de PHP lo voy a llamar graficas.php y vamos a poner el siguiente
código:

<?php

require_once ('jpgraph/src/jpgraph.php');
require_once ('jpgraph/src/jpgraph_bar.php');

// Creamos el grafico
$datos=array(6,5,8,6);
$labels=array("pepe","juanita","Maria","Luis");

$grafico = new Graph(500, 400, 'auto');

$grafico->SetScale("textlin");
$grafico->title->Set("Ejemplo de Grafica");
$grafico->xaxis->title->Set("trabajadores");
$grafico->xaxis->SetTickLabels($labels);
$grafico->yaxis->title->Set("Horas Trabajadas");

$barplot1 =new BarPlot($datos);

$barplot1->SetWidth(30); // 30 pixeles de ancho para cada barra

$grafico->Add($barplot1);
$grafico->Stroke();

?>
Si corremos el código nos va a mostrar la grafica como la siguiente imagen.
Ahora veamos un poquito el código:
Las primeras lineas es para mandar llamar la clase principal de la libreria que es Jpgraph
recuerden que pegamos la carpeta de la libreria a la carpeta del proyecto, en mi caso le quite al
nombre de la carpeta el numero de version y la deje en jpgraph.

Después mandamos llamar la clase especifica para el tipo de gráfica de barras que es la que
estamos creando. Para cada tipo de gráfica se manda llamar su clase.

Después declare dos variables de tipo array que son $datos y $labels, $datos va a contener
en este caso las horas que ha trabajado respectivamente cada uno de nuestros trabajadores, y
$labels va a contener los nombres de los trabajadores.

Ahora si a crear la gráfica la variable $grafico que crea un nuevo objeto de tipo Graph y se le
esta dando un tamaño de 500px de ancho y 400px de alto y un margen automatico. Es aqui
donde se modifica el tamaño.

SetScale especifica las escalas de x/y puede variar según nuestras necesidades "text" es para
x y lin es para y para ver las diferentes combinaciones puedes ver mas en los ejemplo que la
misma libreria te brinda.

"$grafico->title" Es el nombre que queremos que aparezca en la parte superior de la gráfica.

"xaxis->title->Set" Es el nombre que queremos que aparesca de nuestros datos en el eje x en
nuestro ejemplo es trabajadores.
"xaxis->SetTickLabels" Este campo es opcional si no lo ponemos la gráfica mostraría por
default números del 1 al 4 en lugar de pepe, juanita,maria y luis.
"yaxis->title->Set" Es el nombre que queremos que aparesca de nuestros datos en el eje y en
nuestro ejemplo es Horas trabajadas.
$barplot1 =new BarPlot($datos); Aquí le vamos a pasar los datos que queremos graficar y que
son los que le daran la altura a nuestra barras.
$barplot1->SetWidth(30); Le indicamos el ancho de nuestras barras en esta caso 30px.
$grafico->Add($barplot1); La añade al gráfico.
$grafico->Stroke(); La traza.

Hay otras características que se pueden añadir por ejemplo el efecto de degradado, para hacer
esto solo hay que añadir la linea después de $barplot=new BarPlot($datos):
$barplot1->SetFillGradient("#BE81F7", "#E3CEF6", GRAD_HOR); le pasamos los colores y le
indicamos que queremos un degradado horizontal. Tambien le vamos a cambiar
el SetScale que explicabamos antes, en lugar de "textlin" lo vamos a cambiar a "textint" esto
es para que nos muestre los números del eje "y" como enteros.
El código quedaria de la siguiente manera.

<?php
require_once ('jpgraph/src/jpgraph.php');
require_once ('jpgraph/src/jpgraph_bar.php');

// Creamos el grafico
$datos=array(6,5,8,6);
$labels=array("pepe","juanita","Maria","Luis");
$grafico = new Graph(500, 400, 'auto');
$grafico->SetScale("textint");
$grafico->title->Set("Ejemplo de Grafica");
$grafico->xaxis->title->Set("trabajadores");
$grafico->xaxis->SetTickLabels($labels);
$grafico->yaxis->title->Set("Horas Trabajadas");
$barplot1 =new BarPlot($datos);
// Un gradiente Horizontal de morados
$barplot1->SetFillGradient("#BE81F7", "#E3CEF6", GRAD_HOR);
// 30 pixeles de ancho para cada barra
$barplot1->SetWidth(30);
$grafico->Add($barplot1);
$grafico->Stroke();
?>

la imagen quedaría de la siguiente manera:

para mandarle llamar desde un archivo html es tan sencillo como poner en el código un
elemento imagen y en el atributo src le damos la ruta hacia nuestro archivo php.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<title>graficas</title>
</head>
<body>
<span>Aqui mostramos la grafica por medio de una imagen</span>
<img src="graficas.php" />
</body>
</html>

mi archivo html se llama index.html por lo que cuando entro a mi carpeta en el navegador
automaticamente lo corre.

Nota: Como dato extra no se debe mandar imprimir desde el archivo php ningún dato, ya que
esto podría marcar error. Pasar los datos de consultas o pasarlos por post tambien es muy
sencillo solo es cuestión de que vayas practicando, en la carpeta src de la libreria viene una
carpeta con muchísimos ejemplos para que los revises y veas otras opciones como juntar dos
tipo de grafica en una sola, etc.

Espero que este pequeño tutorial te sirva de algo cualquier duda o comentario es bien recibido.