“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

1
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

JPGRAPH – CREACIÓN DE GRÁFICOS

DESCRIPCIÓN

JpGraph es una librería destinada a la generación de gráficos

en PHP. Permite, de forma intuitiva la generación de gráficos de modelo
estadístico y matemático. JpGraph tiene como requisitos el uso
de PHP 5.1 o superior, tiene soporte para GD, permite la inclusión de
texto a las imágenes con distintas fuentes, transparencias, escalas para
los ejes, generar las imágenes bajo los formatos png, gif y jpg y muchas
otras funcionalidades. En función de las necesidades, la librería soporta
una gran variedad de gráficos que podremos ir utilizando.

VENTAJAS E INCONVENIENTES
JPGraph es una librería muy completa y entre las características
mas destacadas podemos listar:
 Soporte para GD1 y GD2, la librería auto detecta que versión del GD.
 Soporte para incluir texto a las imágenes y soporte para tipos de
letra.
 Soporte para niveles de transparencia.
 Soporte para gráficos complejas de Gantt.
 Manejo de las escalas para los ejes del gráfico.
 Soporta formatos PNG, GIF y JPG.
 Soporte para gráficas de barras horizontales.
 Soporte para gráficas de tipo científico.
 Soporte para generación de la escala automática dependiendo de los
datos.
 Soporta varios tipos de relleno para las gráficas.
 Soporta tratamiento de cache

2
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

 Documentación muy completa y con una referencia completa de las

funciones.

REQUISITOS E INCOMPATIBILIDADES
 Cualquier Sistema Operativo de 32bits capaz de operar PHP5.
 PHP5, versión 5.1.0 o superior (puede funcionar con versiones
anteriores, pero no está soportado oficialmente).
 Tener la librería GD 2.x de PHP activada. Normalmente viene
incluida con la distribución PHP5. Recomendamos el uso de la
versión de GD incluida en PHP5 y no instalarlo por separado.

3
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

Para comenzar nuestro trabajo hemos creado una base de datos

llamada Almacén, la cual nos permitirá realizar de ejemplo para
visualizar los datos en caso si hay nuevos ingresos de productos o en
caso de que un producto ya no esté en la tabla.

Hemos definido los campos:

Id int autoincremental,
Nombre varchar(50),
Cantidad int,
Estado int

Luego de ello procedemos a modificar nuestra plantilla de

mantenimiento, la cual nos permitirá ver el listado de los productos,
insertar nuevos, actualizarlo y eliminarlos, así como búsquedas
personalizadas.

4
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

Todos estos casos lo hemos realizado en clase por lo cual el código

no se va a colocar, solamente se mostrará los pantallazos de los
formularios principales y luego pasar al código de los gráficos de barra,
lineal y tipo pie.

5
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

6
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

Hemos agregado una fila con 3 columnas y 3 botones los cuales

nos van a mostrar los diferentes gráficos ya mencionados

Estos botones tendrán la siguiente codificación:

<table width="90%" border="1" cellspacing="0" cellpadding="3">

<tbody>
<tr>
<th scope="col"><input type="button" name="button1" value="Lineal"
onclick="javascript:location.href='lineal.php'" /></th>
//Llama a la página que tendrá el gráfico lineal

<th scope="col"><input type="button" name="button2" id="button2" value="Pastel"

onclick="javascript:location.href='pastel.php'" /></th>
//Llama a la página que tendrá el gráfico tipo pie

7
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

<th scope="col"><input type="button" name="button3" id="button3" value="Barras"

onClick="javascript:location.href='barra.php'"></th>
//Llama a la página que tendrá el gráfico de barra

</tr>
</tbody>
</table>

Esta celda tiene como nombre de diagrama.php y se agrega antes de

terminar el formulario:

Luego procedemos a realizar la configuración de las páginas que

nos mostraran los gráficos descritos, para ello necesitamos la librería
JPGRAPH que la incluiremos dentro de nuestro proyecto, para lo cual
necesitamos descargar de la siguiente página:

https://jpgraph.net/download/

Una vez descargado lo descomprimimos en nuestra carpeta de

proyecto.

8
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

Y comenzamos la codificación del primer gráfico:

9
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

Codificación de gráfico de barra(barra.php)

<?php
//Agregamos una zona horario ya que la imagen nos pide definir, ya que si no lo hacemos nos
muestra un mensaje que debemos de agregarla
date_default_timezone_set("America/Lima");

//necesitamos tener la librerìa jpgraph en nuestro proyecto para poder acceder a los gràficos
//LLamamos a la librerìa Generica
require_once ("../../jpgraph-4.2.2/src/jpgraph.php");

//Luego a la librerìa que contiene nuestro ejemplo en este caso barra

require_once "../../jpgraph-4.2.2/src/jpgraph_bar.php";

//realizamos la conexión a la base de datos

$cn=mysqli_connect("localhost","root","root1234","almacen");

//realizamos la consulta que nos va a permitir visualizar los datos

$sql="Select * from productos where estado='1'";

//Ejecutar el comando
$data=mysqli_query($cn,$sql); //(la conexión y la sentencia)

//Capturando fila a fila

while($fila=mysqli_fetch_array($data))
{
//guardamos los datos en unas variables de eje X= $datos e Y=$labels
$datos[]=$fila[2];
$labels[]=$fila[1];
}

// Definimos El formato que se va a mostrar

$grafico=new Graph(650,450,'auto'); // Que se va a generar automáticamente con una altura y
anchura que vamos a definir

10
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

$grafico->SetScale("textint");
$grafico->title->Set("Ejemplo de Gráfico de Barra"); //Definimos el título

$grafico->xaxis->title->Set("Productos"); //Definimos el nombre del eje X

$grafico->xaxis->SetTickLabels($labels); //Asigna todo los labels a la parte inferior

$grafico->yaxis->title->Set("Stock"); //Definimos el nombre del eje Y

//Definimos que tipo de imagen de barras va a ser

$barplot1=new BarPlot($datos); //Y le ingresamos un parámetro de creación

//ahora definimos el formato del gráfico

$barplot1->SetFillGradient("#BE81F7","#E3CEF6",GRAD_HOR);

//definimos el ancho para cada barra

$barplot1->SetWidth(30);

//al gráfico agregamos los datos

$grafico->Add($barplot1);

//Visualizamos el gráfico en la pantalla

$grafico->Stroke();

//Y Agregamos para que nos muestre la imagen un tipo de formato especifico en nuestro caso
png
$grafico->Stroke("Bar.PNG");
?>
Y nuestro resultado sería el siguiente:

11
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

12
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

Luego la codificación el gráfico de pie.

Codificación de gráfico de pie (pastel.php):

<?php
//Agregamos una zona horario ya que la imagen nos pide definir, ya que si no lo hacemos nos
muestra un mensaje que debemos de agregarla
date_default_timezone_set("America/Lima");

//necesitamos tener la librerìa jpgraph en nuestro proyecto para poder acceder a los gràficos
//LLamamos a la librerìa Generica
require_once ("../../jpgraph-4.2.2/src/jpgraph.php");

//Luego a la librerìa que contiene nuestro ejemplo en este caso barra

require_once "../../jpgraph-4.2.2/src/jpgraph_pie.php";
require_once "../../jpgraph-4.2.2/src/jpgraph_pie3d.php";

//realizamos la conexión a la base de datos

$cn=mysqli_connect("localhost","root","root1234","almacen");

//realizamos la consulta que nos va a permitir visualizar los datos

$sql="Select * from productos where estado='1'";

//Ejecutar el comando
$data=mysqli_query($cn,$sql);

//Capturando fila a fila

while($fila=mysqli_fetch_array($data))
{
//guardamos los datos en unas variables de eje X= $datos e Y=$labels
$datos[]=$fila[2];
$labels[]=$fila[1];
}

13
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

// Definimos El formato que se va a mostrar

$graph = new PieGraph(450,200,"auto");
$graph->img->SetAntiAliasing();
$graph->SetMarginColor('gray');

//Definimos el titulo y el margen

$graph->title->Set("Ejemplo: Cantidad de Productos");

//el tipo de gráfico que se va a utilizar para mostrar en pantalla

$p1 = new PiePlot3D($datos);

//establecemos el tamaño de un objeto

$p1->SetSize(0.35);

//establecemos donde va a salir la imagen

$p1->SetCenter(0.5);

// Establecemos los valores de formato y color de texto, así mismo como la posición del texto
dentro de la imagen
$p1->value->SetFont(FF_FONT1,FS_BOLD);
$p1->value->SetColor("black");
$p1->SetLabelPos(0.5);

//Agregamos las leyendas

$p1->SetLegends($labels);

//Dividimos los campos

$p1->ExplodeAll();

//al gráfico agregamos los datos

$graph->Add($p1);

// Visualizamos el gráfico

14
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

$graph->Stroke();
?>

15
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

Codificación de Gráfico de Lineal (lineal.php):

<?php
//Agregamos una zona horaria ya que la imagen nos pide definir, ya que si no lo hacemos nos
muestra un mensaje que debemos de agregarla
date_default_timezone_set("America/Lima");

include ("../../jpgraph-4.2.2/src/jpgraph.php");
include ("../../jpgraph-4.2.2/src/jpgraph_line.php");

//realizamos la conexión a la base de datos

$cn=mysqli_connect("localhost","root","root1234","almacen");

//seleccionamos la sentencia
$sql="Select * from productos where estado='1'";

//Ejecutamos el comando
$data=mysqli_query($cn,$sql);

//Visualizar la data - Capturando fila a fila

while($fila=mysqli_fetch_array($data))
{
//guardamos los datos en unas variables de eje X= $datos e Y=$labels
$datos[]=$fila[2];
$labels[]=$fila[1];
}
// Definimos El formato que se va a mostrar
$graph = new Graph(600,450,"auto"); // Que se va a generar automáticamente con una altura
y anchura
$graph->SetScale("textlin");

$graph->img->SetAntiAliasing();
$graph->xgrid->Show();

16
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

// Definimos El formato que se va a mostrar

$lineplot=new LinePlot($datos); //Rellenamos el grafico con los datos
$lineplot->SetColor("black");
$lineplot->SetWeight(8); //dimensión de la imagen

//Definimos los márgenes y títulos

$graph->img->SetMargin(40,20,20,40);//Establecemos el ancho de los márgenes

$graph->title->Set("Ejemplo: Grafico Lineal"); //Definimos el título

$graph->xaxis->title->Set("Productos"); //Definimos el nombre del eje X

$graph->yaxis->title->Set("Cantidad"); //Definimos el nombre del eje Y

$graph->xaxis->SetTickLabels($labels); //Asigna todo los labels a la parte inferior

//ahora definimos el formato del gráfico

$graph->ygrid->SetFill(true,'#EFEFEF@0.5','#F9BB64@0.5'); //Definimos el color del fondo
podemos hacerlo con el código del color o también con el nombre

//al gráfico agregamos los datos

$graph->Add($lineplot);

//Visualizamos el gráfico en la pantalla

$graph->Stroke();
?>

17
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

El resultado es el siguiente:

Referencias:

https://www.youtube.com/watch?v=XIMbj3HBIII
https://desarrolloweb.com/articulos/1987.php

18
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

19
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

20
“AÑO DEL DI ÁLOGO Y LA RECONCILI ACIÓN NACIONAL”

21