JpGraph – Creación de gráficas dinámicas con PHP
JpGraph es una librería PHP para crear gráficas dinámicas con PHP. Una librería muy avanzada que permite crear distintos tipos de gráficas.10/04/2014
JpGraph es una librería PHP para crear gráficas dinámicas con PHP que me sacó de un apuro hará un par de años y que ahora de nuevo me vuelve a solucionar la papeleta.
Es una librería que existe hace muchos años, el sistema está muy depurado y soporta multitud de funcionalidades, por lo que seguramente encontrarás solución a casi cualquier necesidad en el ámbito de creación de gráficas. Se pueden crear gráficas lineales, gráficas de barras, tartas, etc. Además, la mayoría de las configuraciones de las gráficas vienen con opciones por defecto, así que resulta bastante sencillo obtener resultados rápidamente.
Es necesario tener conocimientos de la programación orientada a objetos (clases) para entender el funcionamiento de esta librería y en concreto el ejemplo que vamos a ilustrar.
Para añadir estas gráficas a nuestra página lo primero que tendremos que hacer es descargar la librería JpGraph. En el ejemplo en funcionamiento estamos utilizando la versión 4.2.6 compatible con PHP 7 y liberada el 28/11/2018.
La temática del ejemplo intentamos representar el volumen de ventas mensual de 3 tiendas de ejemplo. Vamos a utilizar una gráfica lineal donde en el eje vertical (Y) va a representar el número de pedidos y el eje horizontal (X) estableceremos los meses del año. Agregaremos una leyenda indicando el color de la línea de cada tienda. La gráfica del resultado del ejemplo es como la que se muestra a continuación:
Para conseguir este efecto tendremos que crear 2 archivos.
En tu archivo HTML o PHP principal debes agregar dentro de la etiqueta <body> la imagen de la siguiente forma:
<img src="linear_plot.php" alt="" border="0">Tal y como podemos observar, en el atributo src estamos colocando la ruta del script PHP que se encargará de generar la gráfica. En el archivo linear_plot.php que genera la gráfica incluimos las librerías apropiadas para el tipo de gráfica que deseemos mostrar, instanciamos el objeto JpGraph correspondiente, cargamos los datos a visualizar y llamamos a los métodos adecuados para mostrar la imagen. Puedes ver el código completo a continuación:
<?php
require_once ('src/jpgraph.php');
require_once ('src/jpgraph_line.php');
$datay1 = array(20,15,23,15,80,20,45,10,5,45,60);
$datay2 = array(12,9,12,8,41,15,30,8,48,36,14,25);
$datay3 = array(5,17,32,24,4,2,36,2,9,24,21,23);
// Setup the graph
$graph = new Graph(900,350);
$graph->SetScale("textlin");
$theme_class=new UniversalTheme;
$graph->SetTheme($theme_class);
$graph->img->SetAntiAliasing(false);
$graph->title->Set('Evolucion de pedidos');
$graph->SetBox(false);
$graph->img->SetAntiAliasing();
$graph->yaxis->HideZeroLabel();
$graph->yaxis->HideLine(false);
$graph->yaxis->HideTicks(false,false);
$graph->xgrid->Show();
$graph->xgrid->SetLineStyle("solid");
$graph->xaxis->SetTickLabels(array('Ene','Feb','Mar','Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Nov', 'Oct', 'Dic'));
$graph->xgrid->SetColor('#E3E3E3');
// Create the first line
$p1 = new LinePlot($datay1);
$graph->Add($p1);
$p1->SetColor("#6495ED");
$p1->SetLegend('Tienda 1');
// Create the second line
$p2 = new LinePlot($datay2);
$graph->Add($p2);
$p2->SetColor("#B22222");
$p2->SetLegend('Tienda 2');
// Create the third line
$p3 = new LinePlot($datay3);
$graph->Add($p3);
$p3->SetColor("#FF1493");
$p3->SetLegend('Tienda 3');
$graph->legend->SetFrameWeight(1);
$graph->legend->SetPos(0.5,0.98,'center','bottom');
// Output line
$graph->Stroke();
?>JpGraph es una herramienta muy potente para la generación de gráficos en nuestras páginas Web. Es una librería totalmente gratuita (para uso no comercial), de fácil instalación y manejo. Incluye una completa documentación con multitud de ejemplos de los distintos gráficos que se pueden generar. Además de generar diversos tipos de gráficos, permite personalizar casi todo lo que se ve, resultando esto muy útil para integrar perfectamente el gráfico con el aspecto de nuestra Web.
Si hay que poner inconvenientes a este sistema que permite crear gráficas de forma dinámica con PHP serían los siguientes:
- El paquete de instalación es muy pesado. Pesa más de 12 MB.
- Las gráficas no se adaptan a todos los dispositivos. No es responsive.
- Si no tienes conocimientos de PHP o programación orientada a objetos, el código no lo vas a entender bien.
18 comentarios
Nube de etiquetas
charly _sanchez
Publicado el 15/02/2015 01:27hola que tal quisiera que me orientaran soy novato esto del php y quisiera realizar mis proyectos con graficas y veo que esta herramienta es muy util y quisera saber como se instala o donde la instalo para empezar a usarla gracias y en espera de sus comentarios
Jose Aguilar
Publicado el 15/02/2015 11:31Hola buenos días,
Tienes que descargar la librería en http://jpgraph.net/download/ y utilizarla como comento en el artículo.
Si quieres utilizar otro tipo de gráfica tendrás que documentarte en su página oficial -> http://jpgraph.net/
Saludos
Carlos Paucar
Publicado el 18/02/2015 02:54Excelente me sirve de mucho tu ayuda, hasta ahora no encontraba la forma de como insertar el gráfico en una página ya existente …
Gracias por compartir ????
ivan
Publicado el 15/05/2015 13:03Buenas tardes! me gustaria saber de donde cuelga la carpeta src donde tienes ubicadas las liberias, supongo que en los archivos del servidor de la pagina web donde las vas a usar no?…
Directorio raiz?
Directorio de documentos accesibles desde fuera de la pagina?
Muchas gracias, un saludo.
Jose Aguilar
Publicado el 18/05/2015 21:39Hola buenas tardes,
Si la carpeta src de hecho es lo que te descargas de la página oficial de jpgraph. En la demo la puse en el direcorio raiz de la carpeta donde tengo la demostración.
Saludos
Juan Medina
Publicado el 24/05/2015 09:16Buenas noches,
Muy buen tuto,
pero me sale un error a utilizar $theme_class=new UniversalTheme; dice que no se puede encontrar la clase UniversalTheme.
Busqué en Internet y en GitHub enconté el código de esa clase pero extiende de una clase llamada Theme y no he logrado encontrarla. Será que tu podrías hacerme el favor de decirme que tengo que hacer para que me funcione la UniversalTheme puesto que lo he hecho sin esa clase pero la verdad mi gráfica se ve muy fea, parece que fuera de windows 95 ????
Agradezco tu ayuda.
Fausto
Publicado el 16/06/2015 03:47Hola
He estado intentando llenar mi grafica con datos que vienen de una consulta de access pero no encuentro como… tendras un ejemplo simple de como graficar de esta forma??? De antemano te agradezco. Muy buenos ejemplos en tu pagina.
Jose Aguilar
Publicado el 25/06/2015 19:35Hola, Lo siento pero con access no. Esperemos que alguien puede ayudarte
Luisa
Publicado el 01/08/2015 19:04Hola!! Muy útil la información, me funciono perfectamente, solo quiero saber como generar el grafico en formato .png o .jpg para después mandarlo llamar desde un formulario en HTML. espero me respondran… gracias!
Jose Aguilar
Publicado el 02/08/2015 11:42Hola, no estoy seguro de si se puede capturar en png la imagen de la gráfica. Ten en cuenta que es un archivo php que se llamado en el src de la imagen. Posiblemente con file_get_contents podrías capturarlo pero te estoy hablando sin probarlo.
Marcos Suarez
Publicado el 14/08/2015 18:27Saludo.
Estoy usando esta librería y estoy buscando la forma de como hacer para mostrar atrevas de una consulta varias Gráficas. Tengo la limitan te de que el el index.html lo que llamo es el código php y perfecto si solo es una gráfica. Pero cuando quiero hacer que diatónicamente me genere mas de una gráfica me quedo limitado. que me siguieren? Muchas Gracias
Miguel Angel Hernandez
Publicado el 25/10/2017 21:48hola buena tarde no corro el ejemplo y no me carca ningún error, solo me muestra la pantalla en negro a que se debe.
gracias por el aporte
alex
Publicado el 31/10/2017 19:46Obrigado pelo tuto!
Jose Aguilar
Publicado el 03/11/2017 12:41Hola buenas tardes,
Nos deberá indicar que error aparece o una url para verlo.
Saludos
emilio
Publicado el 06/12/2017 19:17nesesito bajar la libreria, JpGraph pero no me deja por favor quien me puede ayudar al respecto o eso o con otra pero es que nesesito una
danie
Publicado el 11/12/2017 18:17Me gustaria agregar filtros a una grafica ? Tengo una grafica ya echa me gustaria que al ingresar nuevos datos se genere otra grafica
Jose Aguilar
Publicado el 13/12/2017 12:20Se puede descargar en la página oficial .- http://jpgraph.net/
Mario R. Arroyo
Publicado el 29/08/2019 03:26public function Generaconsult($datos)
{
include_once ‘functions.php’;
$vista.=»;
$vista.=»;
$vista.=sesion::get(«Empresa»);
$vista.=»;
$vista.=»;
$vista.=»;
$vista.= ThemeFunctions::CrearBloqueEstadisticasVentas($datos);
$vista.=»;
$vista.=»;
$vista.=».ThemeFunctions::CrearBloqueMenuAcordeon($datos).»;
$vista.=»;
$vista.=»;
$vista.=»;
return $vista;
}
public function CrearBloqueEstadisticasVentas($datos)
{
require_once (‘../Herramientas/lib/jpgraph-4.2.7/src/jpgraph.php’);
require_once (‘../Herramientas/lib/jpgraph-4.2.7/src/jpgraph_pie.php’);
require_once (‘../Herramientas/lib/jpgraph-4.2.7/src/gd_image.inc.php’);
require_once (‘../Herramientas/lib/jpgraph-4.2.7/src/jpgraph_line.php’);
require_once (‘../Herramientas/lib/jpgraph-4.2.7/src/jpgraph_pie3d.php’);
$datay1 = array(20,15,23,15,80,20,45,10,5,45,60);
$datay2 = array(12,9,12,8,41,15,30,8,48,36,14,25);
$datay3 = array(5,17,32,24,4,2,36,2,9,24,21,23);
// Setup the graph
$graph = new Graph(900,350);
$graph->SetScale(«textlin»);
$theme_class=new UniversalTheme;
$graph->SetTheme($theme_class);
$graph->img->SetAntiAliasing(false);
$graph->title->Set(‘Evolucion de pedidos’);
$graph->SetBox(false);
$graph->img->SetAntiAliasing();
$graph->yaxis->HideZeroLabel();
$graph->yaxis->HideLine(false);
$graph->yaxis->HideTicks(false,false);
$graph->xgrid->Show();
$graph->xgrid->SetLineStyle(«solid»);
$graph->xaxis->SetTickLabels(array(‘Ene’,’Feb’,’Mar’,’Abr’, ‘May’, ‘Jun’, ‘Jul’, ‘Ago’, ‘Sep’, ‘Nov’, ‘Oct’, ‘Dic’));
$graph->xgrid->SetColor(‘#E3E3E3’);
// Create the first line
$p1 = new LinePlot($datay1);
$graph->Add($p1);
$p1->SetColor(«#6495ED»);
$p1->SetLegend(‘Tienda 1’);
// Create the second line
$p2 = new LinePlot($datay2);
$graph->Add($p2);
$p2->SetColor(«#B22222»);
$p2->SetLegend(‘Tienda 2’);
// Create the third line
$p3 = new LinePlot($datay3);
$graph->Add($p3);
$p3->SetColor(«#FF1493»);
$p3->SetLegend(‘Tienda 3′);
$graph->legend->SetFrameWeight(1);
$graph->legend->SetPos(0.5,0.98,’center’,’bottom’);
// Output line
$graph->Stroke();
return $graph;
}
Catchable fatal error: Object of class Graph could not be converted to string in C:\AppServ\www\TriAgencia\Ayudas\functions.php on line 650
ese error me sale por favor me podria ayudar.