JpGraph – Creación de gráficas dinámicas con PHP

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:

jpgraph

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.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(7 votos, promedio: 5 de 5)
Comparte en las redes sociales

18 respuestas a “JpGraph – Creación de gráficas dinámicas con PHP”

  1. Mario R. Arroyo dice:

    public 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.

  2. danie dice:

    Me gustaria agregar filtros a una grafica ? Tengo una grafica ya echa me gustaria que al ingresar nuevos datos se genere otra grafica

  3. emilio dice:

    nesesito 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

  4. alex dice:

    Obrigado pelo tuto!

  5. Miguel Angel Hernandez dice:

    hola 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

  6. Marcos Suarez dice:

    Saludo.
    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

  7. Luisa dice:

    Hola!! 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 dice:

      Hola, 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.

  8. Fausto dice:

    Hola

    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.

  9. Juan Medina dice:

    Buenas 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.

  10. ivan dice:

    Buenas 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 dice:

      Hola 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

  11. Carlos Paucar dice:

    Excelente 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 🙂

  12. charly _sanchez dice:

    hola 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre