{"id":6272,"date":"2014-04-10T13:15:40","date_gmt":"2014-04-10T13:15:40","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6272"},"modified":"2019-06-03T09:35:53","modified_gmt":"2019-06-03T09:35:53","slug":"jpgraph-creacion-graficas-dinamicas-php","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/jpgraph-creacion-graficas-dinamicas-php\/","title":{"rendered":"JpGraph – Creaci\u00f3n de gr\u00e1ficas din\u00e1micas con PHP"},"content":{"rendered":"

JpGraph<\/strong> es una librer\u00eda PHP<\/strong> para crear gr\u00e1ficas din\u00e1micas con PHP<\/strong> que me sac\u00f3 de un apuro har\u00e1 un par de a\u00f1os y que ahora de nuevo me vuelve a solucionar la papeleta.<\/p>\n

Es una librer\u00eda que existe hace muchos a\u00f1os, el sistema est\u00e1 muy depurado y soporta multitud de funcionalidades, por lo que seguramente encontrar\u00e1s soluci\u00f3n a casi cualquier necesidad en el \u00e1mbito de creaci\u00f3n de gr\u00e1ficas. Se pueden crear gr\u00e1ficas lineales, gr\u00e1ficas de barras, tartas, etc. Adem\u00e1s, la mayor\u00eda de las configuraciones de las gr\u00e1ficas vienen con opciones por defecto, as\u00ed que resulta bastante sencillo obtener resultados r\u00e1pidamente.<\/p>\n

Es necesario tener conocimientos de la programaci\u00f3n orientada a objetos (clases) para entender el funcionamiento de esta librer\u00eda y en concreto el ejemplo que vamos a ilustrar.<\/p>\n

Para a\u00f1adir estas gr\u00e1ficas a nuestra p\u00e1gina lo primero que tendremos que hacer es descargar la librer\u00eda JpGraph. En el ejemplo en funcionamiento estamos utilizando la versi\u00f3n 4.2.6 compatible con PHP 7 y liberada el 28\/11\/2018.<\/p>\n

La tem\u00e1tica del ejemplo intentamos representar el volumen de ventas mensual de 3 tiendas de ejemplo. Vamos a utilizar una gr\u00e1fica lineal donde en el eje vertical (Y) va a representar el n\u00famero de pedidos y el eje horizontal (X) estableceremos los meses del a\u00f1o. Agregaremos una leyenda indicando el color de la l\u00ednea de cada tienda. La gr\u00e1fica del resultado del ejemplo es como la que se muestra a continuaci\u00f3n:<\/p>\n

\"jpgraph\"<\/a><\/p>\n

Para conseguir este efecto tendremos que crear 2 archivos.<\/p>\n

En tu archivo HTML<\/strong> o PHP<\/strong> principal debes agregar dentro de la etiqueta <body> la imagen de la siguiente forma:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<img<\/span><\/a> src<\/span>=<\/span>"linear_plot.php"<\/span> alt<\/span>=<\/span>""<\/span> border<\/span>=<\/span>"0"<\/span>><\/span><\/pre><\/div><\/div>\n
Tal y como podemos observar, en el atributo src estamos colocando la ruta del script PHP<\/strong> que se encargar\u00e1 de generar la gr\u00e1fica. En el archivo linear_plot.php<\/em> que genera la gr\u00e1fica incluimos las librer\u00edas apropiadas para el tipo de gr\u00e1fica que deseemos mostrar, instanciamos el objeto JpGraph<\/strong> correspondiente, cargamos los datos a visualizar y llamamos a los m\u00e9todos adecuados para mostrar la imagen. Puedes ver el c\u00f3digo completo a continuaci\u00f3n:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\nrequire_once<\/span> (<\/span>'src\/jpgraph.php'<\/span>)<\/span>;<\/span>\nrequire_once<\/span> (<\/span>'src\/jpgraph_line.php'<\/span>)<\/span>;<\/span>\n \n$datay1<\/span> =<\/span> array<\/span><\/a>(<\/span>20,<\/span>15,<\/span>23,<\/span>15,<\/span>80,<\/span>20,<\/span>45,<\/span>10,<\/span>5,<\/span>45,<\/span>60)<\/span>;<\/span>\n$datay2<\/span> =<\/span> array<\/span><\/a>(<\/span>12,<\/span>9,<\/span>12,<\/span>8,<\/span>41,<\/span>15,<\/span>30,<\/span>8,<\/span>48,<\/span>36,<\/span>14,<\/span>25)<\/span>;<\/span>\n$datay3<\/span> =<\/span> array<\/span><\/a>(<\/span>5,<\/span>17,<\/span>32,<\/span>24,<\/span>4,<\/span>2,<\/span>36,<\/span>2,<\/span>9,<\/span>24,<\/span>21,<\/span>23)<\/span>;<\/span>\n \n\/\/ Setup the graph<\/span>\n$graph<\/span> =<\/span> new<\/span> Graph(<\/span>900,<\/span>350)<\/span>;<\/span>\n$graph<\/span>-><\/span>SetScale<\/span>(<\/span>"textlin"<\/span>)<\/span>;<\/span>\n \n$theme_class<\/span>=<\/span>new<\/span> UniversalTheme;<\/span>\n \n$graph<\/span>-><\/span>SetTheme<\/span>(<\/span>$theme_class<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>img<\/span>-><\/span>SetAntiAliasing<\/span>(<\/span>false<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>title<\/span>-><\/span>Set<\/span>(<\/span>'Evolucion de pedidos'<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>SetBox<\/span>(<\/span>false<\/span>)<\/span>;<\/span>\n \n$graph<\/span>-><\/span>img<\/span>-><\/span>SetAntiAliasing<\/span>(<\/span>)<\/span>;<\/span>\n \n$graph<\/span>-><\/span>yaxis<\/span>-><\/span>HideZeroLabel<\/span>(<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>yaxis<\/span>-><\/span>HideLine<\/span>(<\/span>false<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>yaxis<\/span>-><\/span>HideTicks<\/span>(<\/span>false<\/span>,<\/span>false<\/span>)<\/span>;<\/span>\n \n$graph<\/span>-><\/span>xgrid<\/span>-><\/span>Show<\/span>(<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>xgrid<\/span>-><\/span>SetLineStyle<\/span>(<\/span>"solid"<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>xaxis<\/span>-><\/span>SetTickLabels<\/span>(<\/span>array<\/span><\/a>(<\/span>'Ene'<\/span>,<\/span>'Feb'<\/span>,<\/span>'Mar'<\/span>,<\/span>'Abr'<\/span>,<\/span> 'May'<\/span>,<\/span> 'Jun'<\/span>,<\/span> 'Jul'<\/span>,<\/span> 'Ago'<\/span>,<\/span> 'Sep'<\/span>,<\/span> 'Nov'<\/span>,<\/span> 'Oct'<\/span>,<\/span> 'Dic'<\/span>)<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>xgrid<\/span>-><\/span>SetColor<\/span>(<\/span>'#E3E3E3'<\/span>)<\/span>;<\/span>\n \n\/\/ Create the first line<\/span>\n$p1<\/span> =<\/span> new<\/span> LinePlot(<\/span>$datay1<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>Add<\/span>(<\/span>$p1<\/span>)<\/span>;<\/span>\n$p1<\/span>-><\/span>SetColor<\/span>(<\/span>"#6495ED"<\/span>)<\/span>;<\/span>\n$p1<\/span>-><\/span>SetLegend<\/span>(<\/span>'Tienda 1'<\/span>)<\/span>;<\/span>\n \n\/\/ Create the second line<\/span>\n$p2<\/span> =<\/span> new<\/span> LinePlot(<\/span>$datay2<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>Add<\/span>(<\/span>$p2<\/span>)<\/span>;<\/span>\n$p2<\/span>-><\/span>SetColor<\/span>(<\/span>"#B22222"<\/span>)<\/span>;<\/span>\n$p2<\/span>-><\/span>SetLegend<\/span>(<\/span>'Tienda 2'<\/span>)<\/span>;<\/span>\n \n\/\/ Create the third line<\/span>\n$p3<\/span> =<\/span> new<\/span> LinePlot(<\/span>$datay3<\/span>)<\/span>;<\/span>\n$graph<\/span>-><\/span>Add<\/span>(<\/span>$p3<\/span>)<\/span>;<\/span>\n$p3<\/span>-><\/span>SetColor<\/span>(<\/span>"#FF1493"<\/span>)<\/span>;<\/span>\n$p3<\/span>-><\/span>SetLegend<\/span>(<\/span>'Tienda 3'<\/span>)<\/span>;<\/span>\n \n$graph<\/span>-><\/span>legend<\/span>-><\/span>SetFrameWeight<\/span>(<\/span>1)<\/span>;<\/span>\n \n$graph<\/span>-><\/span>legend<\/span>-><\/span>SetPos<\/span>(<\/span>0.5<\/span>,<\/span>0.98<\/span>,<\/span>'center'<\/span>,<\/span>'bottom'<\/span>)<\/span>;<\/span>\n \n\/\/ Output line<\/span>\n$graph<\/span>-><\/span>Stroke<\/span>(<\/span>)<\/span>;<\/span>\n?><\/span><\/pre><\/div><\/div>\n
JpGraph<\/strong> es una herramienta muy potente para la generaci\u00f3n de gr\u00e1ficos en nuestras p\u00e1ginas Web. Es una librer\u00eda totalmente gratuita (para uso no comercial), de f\u00e1cil instalaci\u00f3n y manejo. Incluye una completa documentaci\u00f3n con multitud de ejemplos de los distintos gr\u00e1ficos que se pueden generar. Adem\u00e1s de generar diversos tipos de gr\u00e1ficos, permite personalizar casi todo lo que se ve, resultando esto muy \u00fatil para integrar perfectamente el gr\u00e1fico con el aspecto de nuestra Web.<\/p>\n
Si hay que poner inconvenientes a este sistema que permite crear gr\u00e1ficas de forma din\u00e1mica con PHP<\/strong> ser\u00edan los siguientes:<\/p>\n