Graficas con JPGRAPH y MySQL

Bueno esta  entrada es un seguimiento a la entrada de Gráficas con Jpgraph en la que vimos como crear una gráfica y mostrarla en una pagina, así como sus atributos.

En el ejemplo que vimos en esa entrada le pasábamos los valores directo en código  pero ahora vamos a ver un ejemplo de como pasarle los datos desde una consulta a una base de datos hechas en mysql.

Te recomiendo que hagas la practica anterior, para que puedas entender. El resultado sera:

Partiendo del ultimo código que era este .

<?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();
?>

que muestra la gráfica de la siguiente manera:

Ahora lo que vamos a hacer es cambiar la variables $datos y la variable $labels, por dos arreglos que vamos a llenar con datos provenientes de una consulta.

Empecemos:

Voy a crear una base de datos desde phpMyadmin  que se va a llamar usuarios y en ella voy a crear dos tablas "users" y "horas".
users: solo va a tener dos campo el id auto-incrementable y el nombre (Maria, Jose, Luis, Teresa).
horas: va a tener 3 campos, el id autoincrementable, el id del usuario, y las horas.

ahora vamos a crear una conexion a la base de datos en nuestro archivo php, despues de el segundo require(), pero antes de  //creamos el grafico.

el código quedaría de a siguiente manera.

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

//Conexion a la base de datos
 $mysqli= new mysqli("localhost","root", "", "usuarios");

 if($mysqli->connect_errno){

   // echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}

// 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();

?>

Para entender mejor como hacer una conexión a una base de datos visita mi entrada consultas en mysql y php.
Nota: para probar primero tu conexión recuerda comentar todo el código referente a la gráfica o te puede marcar errores por que no se debe mandar imprimir nada antes de la gráfica  una vez que la conexión es correcta comenta el error.

Ahora amos a realizar una consulta en la que pediremos el nombre de los trabajadores de la tabla users y sus respectivas horas trabajadas que se encuentran en la tabla horas.

El código quedaría de la siguiente manera:

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

 //Conexion a la base de datos
 $mysqli= new mysqli("localhost","root", "", "usuarios");

 if($mysqli->connect_errno){
   // echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}

 //Consulta
$resultado=$mysqli->query("SELECT users.nombre,horas.horas from users, horas where users.id=horas.id_usuario");

//arreglos donde se guardaran los resultados de la consulta.
$usuarios=array();
$horas=array();

//Recorre el resultado de la consulta y los almacena en los arreglos
while($row=$resultado->fetch_assoc()){
   $usuarios[]=$row['nombre'];
   $horas[]=$row['horas'];
}

/*
// 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();    
*/
?>

Explicare un poquito el codigo de la consulta:
Lo que se hace es declarar dos arreglos(array()) $usuarios y $horas. Después con un while vamos a recorrer el resultado de la consulta y lo va a ir almacenando en su respectivo arreglo, esto quiere decir que cada nombre que muestre el resultado de la consulta lo va a guardar en el arreglo $usuarios y su respectiva hora la va a guardar en el arreglo $horas.

TIP: Con var_dump($usuarios), puedes ver el contenido de tus arreglos par que verifiques que te esta almacenando datos correctamente.

Ahora lo que sigue es remplazar los datos que le estábamos pasando a la gráfica que eran las variables $labels y $datos, por los arreglos que acabamos de crear esto seria en las  lineas de codigo:

$grafico->xaxis->SetTickLabels($labes);  remplazar por:  $grafico->xaxis->SetTickLabels($usuarios);

y

$barplot1 =new BarPlot($datos); remplazar por: $barplot1 =new BarPlot($horas);

El código quedaría de la siguiente manera:

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

 $mysqli= new mysqli("localhost","root", "", "usuarios");

if($mysqli->connect_errno){
   // echo "Fallo al conectar a MySQL:(". $mysqli->connect_errno.")". $mysqli->connect_errno;
}

$resultado=$mysqli->query("SELECT users.nombre,horas.horas from users, horas where users.id=horas.id_usuario");

$usuarios=array();
$horas=array();

while($row=$resultado->fetch_assoc()){
   $usuarios[]=$row['nombre'];
   $horas[]=$row['horas'];
}

// Creamos el grafico
$grafico = new Graph(500, 400, 'auto');
$grafico->SetScale("textint");
$grafico->title->Set("Ejemplo de Grafica");
$grafico->xaxis->title->Set("Trabajadores");
$grafico->xaxis->SetTickLabels($usuarios);
$grafico->yaxis->title->Set("Horas Trabajadas");
$barplot1 =new BarPlot($horas);
// 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();
?>

Al correr la grafica se vera de la siguiente manera.

Como pueden ver es muy sencillo obtener datos de una consulta y pasarlos a la gráfica la manera de mostrarla en html es por medio de la etiqueta imagen.

Espero que les haya servido esta continuación del tutorial. Gracias por sus comentarios. cualquier duda, comentario o aportación es bien recibida., no duden en comentar.

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