Graficas con JpGraph: gráfica de línea

Bueno en esta entrada vamos a ver otro ejemplo de gráficas con la libería JpGraph, voy a hacer mención que esta entrada esta basada en el comentario de Guillermo Roa.
El preguntaba que como sería un ejemplo utilizando las  gráficas de lineas con la librería jpgraph_line.php así que vamos a ver un ejemplo muy básico que se vería como la siguiente imagen.

 No me voy a adentrar en los archivos html por que ya se explico en la primer entrada, como mandar llamar la gráfica por medio de una imagen.
Si entraste directo a esta entrada y no has checado las otras relacionadas, te recomiendo que lo hagas dale click a JPGraph  en el índice de etiquetas para que tengas una idea mas completa de lo que vamos a hacer.

ok ahora veamos nuestro código PHP

 <?php // content="text/plain; charset=utf-8"
require_once ('jpgraph/src/jpgraph.php');
require_once ('jpgraph/src/jpgraph_line.php');

$datay = array(1,1.5,4,2,7);
$graph = new Graph(400,300,'auto');
$graph->SetScale("textint");
$graph->title->Set("Ejemplo de gráfica lineal");
$graph->title->SetFont(FF_FONT1,FS_BOLD);

$p1 = new LinePlot($datay);
$p1->SetColor("blue");
$p1->SetCenter();
$graph->Add($p1);

$graph->Stroke();

?>

Este sería la version básica de una gráfica de lineas expliquemos un poquito.

Lo primero y más importante es llamar las librerías. Primero se llama la principal jpgraph.php y despues mandamos llamar la librería según el tipo de gráfica que vamos a realizar en este caso es de tipo de linea por lo que mandamos llamar jpgraph_line.php.

Nota:Es necesario revisar bien la ruta, estas librerias se encuetran dentro de la carpeta src, que esta dentro de la carpeta de JpGraph que hayas descargado. Como ya mencione antes yo cambie el nombre de la carpeta de jpgraph por que normalmente es más largo ya que contiene la version algo así como Jpgraph-3.6_1 y por eso yo le cambie el nombre y le deje solo jpgraph.

Declaramos una variable llamada $datay que es de tipo array y contiene los valores del eje  "y" que son los valores que deseamos graficar. En este ejemplo tenemos 1, 1.5, 4, 2 y 7

Despues empezamos con la gráfica declaramos una variable llamada $graph que va a ser igual a una nueva Grafica ( new Graph)  los valores que se muestran dentro de los parentesis van a ser el alto y ancho que le queremos dar a nuestra gráfica y "auto" se refiere al margen.

NOTA: El margen tambien se puede aplicar utiliando la siguiente linea.

$graph->img->SetMargin(40,40,40,40);

Si se utiliza esta linea solo se dejarían los valores de ancho y al dentro del parentesis de:

$graph=new Graph(400,300)

Bueno $graph->SetScale("textint"), aquí le estamos indicando el tipo de escala que queremos en la gráfica, con textint indicamos que será de tipo entero, existen otras opciones como textlin que mostría decimales.

Despues es el título que queremos que tenga nuestra gráfica en el ejemplo el titulo será "Ejemplo de gráfica lineal" y luego viene el formato del titulo para aparezca en negritas.

Ahora se declara una variable llamada $p1 que será igual una nuevo plot de tipo Lineplot. 

Haber nos vamos a detener aqui tantito jeje por que de seguro se quedaron así de, ¿Cómo que un nuevo plot si ya habiamos agregado new graph?.
La variable $graph va a ser igual al fondo (no se lo tomen literal jeje)  en esta variable vamos a configurar todo lo referente a los ejes X y Y , al fondo o canvas de la gráfica, y en la variable $p1 se va a manejar todo lo referente al trazo o a lineas que se van a graficar, el color, los efectos, los datos a gráficar, etc.

Bueno una ves visto ese punto continuemos.
con $p1->SetColor("blue"); le indicamos que la linea que se va a gráficar sea de color azul y con $p1->SetCenter(); le indicamos que centre los datos dentro del fondo.

Ahora en $graph->Add($p1); lo que hace es que va a agregar el trazo o la linea que se creo en $p1 dentro del fondo $graph (ya tomo sentido verdad..), y con $graph->Stroke(); La dibuja o la crea.

Si corremos este código la gráfica se verá así:

 

Hasta aqui ya tenemos nuestra primera gráfica lineal ahora pongamosla con más diseño.
Vamos a añadir unos datos para el eje X, para que en lugar de números del 1 al 5 muestra nombres y tambien vamos a agregar los titulos para cada eje.

declaramos otra variable de tipo array que se llame labels y ahí agregamos nombres para el eje X

$labels=array("luis", "maria", "pepe", "lupita", "jose");

y tambien vamos a agregar a la variable $graph los siguientes atributos:
$graph->xaxis->title->Set("Trabajadores");   //Este sería el titulo del eje X
$graph->xaxis->SetTickLabels($labels);       //estos serían los datos que mostraría en lugar del números
$graph->yaxis->title->Set("Horas Trabajadas"); // Este sería el titulo del eje Y

Ahora tambien le vamos a agregar a la linea una marca que indica el punto de su valor (serían los puntitos rojos que aparecen en la primer imagen de la entrada).

$p1->mark->SetType(MARK_FILLEDCIRCLE);
$p1->mark->SetFillColor("red");
$p1->mark->SetWidth(2);

ok el código completo se vería así:

<?php // content="text/plain; charset=utf-8"
require_once ('jpgraph/src/jpgraph.php');
require_once ('jpgraph/src/jpgraph_line.php');

$datay = array(1,1.5,4,2,7);
$labels=array("luis", "maria", "pepe", "lupita", "jose");
$graph = new Graph(400,300,'auto');
$graph->SetScale("textint");
$graph->title->Set("Ejemplo de gráfica lineal");
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->Set("Trabajadores");
$graph->xaxis->SetTickLabels($labels);
$graph->yaxis->title->Set("Horas Trabajadas");

$p1 = new LinePlot($datay);
$p1->mark->SetType(MARK_FILLEDCIRCLE);
$p1->mark->SetFillColor("red");
$p1->mark->SetWidth(2);
$p1->SetColor("blue");
$p1->SetCenter();
$graph->Add($p1);
$graph->Stroke();

?>  

Y la gráfica final se verá:

Este ejemplo esta basado en el ejercicio linegraceex.php que viene dentro de los Ejemplos de la carpeta Examples, claro que le añadí otras cosas para que se viera más completa. Intentelo revisen esa carpeta y muevanle a los ejemplos verán que se encontrarán con cosas bastante interesantes, ya que con JPGraph se pueden crear hasta Tablas.

Bueno espero que este ejemplo les sirva, no duden en dejar sus comentarios dudas, o diganme si el código marca algún error. Saludos...

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