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.

---

ACTUALIZACION

Les comento que hay una segunda parte de este tutorial en donde pueden cargar los datos desde una consulta en mysql. les dejo el enlace gracias por su visita.

graficas-con-jpgraph-y-mysql.html

"Programar no tiene que ser tan difícil como parece...."