Creación de gráficas en PHP con JpGraph

Presentación de la librería JpGraph, que sirve para generar imágenes con todo tipo de gráficas de datos en PHP.
Una tarea, a la que más tarde o más temprano vamos a tener que enfrentarnos a lo largo de nuestra andadura como profesionales del web, es la creación de gráficas a partir de datos. Cuando hablo de gráficas me refiero a todo tipo de imágenes que sirvan para representar datos, como gráficas de barras, de líneas de progreso, de tarta, etc.

Obviamente, la creación de gráficas no es un tema trivial, sino que requerirá de una gran dosis de dedicación y esfuerzo. Las gráficas, que generalmente se muestran en imágenes, pueden ser de muchos tipos distintos y sólo el hecho de tratar de dibujar en una imagen líneas, barras o incluso tartas en tres dimensiones, puede ser sobradamente complicado.

Sin embargo, existen sistemas como JpGraph, que nos pueden facilitar la tarea de una manera muy interesante, pues ofrecen una serie de mecanismos para la generación de las imágenes con las gráficas, de modo que nosotros sólo tenemos que centrarnos en cargar los datos a representar y escoger el tipo de gráfica que deseamos visualizar.

Qué es JpGraph

Es una librería que incluye una serie de clases -código orientado a objetos- que sirven para crear imágenes con todo tipo de gráficas, dinámicamente desde páginas PHP.

El sistema está muy depurado y soporta multitud de funcionalidades, por lo que seguramente encontraremos solución a casi cualquier necesidad en el ámbito de creación de gráficas. 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.

Algunas de las características del sistema son:

  • Reducido peso en bytes de las imágenes resultado. Habitualmente unas pocas KB.
  • Soporte a las librerías GD1 o GD2.
  • Uso de la Interpolación matemática para obtener curvas a partir unos pocos valores.
  • Diversos tipos de gráficas 2D o 3D, como de puntos, líneas, tartas, barras, cajas...
  • Escalas flexibles tanto en el eje X como el Y, que se ajustan al juego de datos que se tenga que representar.
  • Soporte para generar gráficas con varios juegos de valores a la vez.
  • Configurable con distintos tipos de colores, leyendas, tipografías, imágenes de fondo, etc.
Cómo usar JpGraph

Este juego de librerías dispone de una extensa documentación y tutoriales para aprender a manejarlo. En la documentación se encuentran además numerosos ejemplos de su uso, desde los que podemos partir para solucionar nuestras necesidades.

El modo de trabajo para usar esta librería es muy simple, se trata de crear una imagen con la etiqueta <img> de HTML, en cuyo atributo src colocaremos la ruta hacia el script PHP que se encargará de generar la gráfica.

En el archivo PHP que generará la gráfica tendremos que incluir las librerías apropiadas para el tipo de gráfica que deseemos realizar, también habrá que instanciar el objeto JpGraph correspondiente, cargar los datos a visualizar y llamar a los métodos adecuados para mostrar la imagen. Un mecanismo bastante sencillo que veremos en un par de ejemplos a continuación.

Ejemplo 1: una gráfica de línea.


En este ejemplo vamos a crear una gráfica lineal en la que mostraremos las horas de trabajo de una persona a lo largo de 10 días.

La generación de la gráfica de este ejemplo la hacemos en un archivo que hemos llamado grafico_linea.php, por lo tanto, la llamada a este archivo dentro de una imagen será la siguiente:

<img src="grafico_linea.php" alt="" border="0"> El código PHP del archivo grafico_linea.php es el siguiente:

<?php
include ("jpgraph/jpgraph.php");
include ("jpgraph/jpgraph_line.php");

// Some data
$ydata = array(11.5,3,8,12,5,1,9,13,5,7);

// Create the graph. These two calls are always required
$graph = new Graph(450,250,"auto");
$graph->SetScale("textlin");
$graph->img->SetAntiAliasing();
$graph->xgrid->Show();

// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot->SetColor("black");
$lineplot->SetWeight(2);
$lineplot->SetLegend("Horas");

// Setup margin and titles
$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Ejemplo: Horas de Trabajo");
$graph->xaxis->title->Set("Días");
$graph->yaxis->title->Set("Horas de Trabajo");
$graph->ygrid->SetFill(true,'#EFEFEF@0.5','#F9BB64@0.5');
//$graph->SetShadow();

// Add the plot to the graph
$graph->Add($lineplot);

// Display the graph
$graph->Stroke();
?>


Ejemplo 2: una gráfica de tarta en 3D


Por otra parte, vamos a realizar un ejemplo de una gráfica de tarta, en la que aparecen las horas realizadas por cada uno de los empleados y el porcentaje respecto a las totales. En este caso, la tarta va a presentarse en un dibujo en 3 dimensiones.

El archivo donde se genera la gráfica se llama grafico_tarta.php. Lo llamaríamos dentro de una imagen con este código HTML.

<img src="grafico_tarta.php" alt="" border="0">

El código PHP del archivo grafico_tarta.php será el siguiente:

<?php
include ("jpgraph/jpgraph.php");
include ("jpgraph/jpgraph_pie.php");
include ("jpgraph/jpgraph_pie3d.php");

$data = array(40,60,21,33);

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

// Setup margin and titles
$graph->title->Set("Ejemplo: Horas de Trabajo");

$p1 = new PiePlot3D($data);
$p1->SetSize(0.35);
$p1->SetCenter(0.5);

// Setup slice labels and move them into the plot
$p1->value->SetFont(FF_FONT1,FS_BOLD);
$p1->value->SetColor("black");
$p1->SetLabelPos(0.2);

$nombres=array("pepe","luis","miguel","alberto");
$p1->SetLegends($nombres);

// Explode all slices
$p1->ExplodeAll();

$graph->Add($p1);
$graph->Stroke();
?>


Conclusión

JpGraph es una herramienta muy potente para la generación de gráficos en nuestra página web y gracias a su uso nos damos cuenta de sus muchas bondades:

  • Es una librería gratuita (para uso no comercial), fácil de instalar y de fácil manejo.
  • Incluye una completa documentación con multitud de ejemplos de los distintos gráficos que se pueden generar.
  • Además de generar muchos tipos de gráficos, permite 'customizar' casi todo lo que se ve, resultando esto muy útil para integrar perfectamente el gráfico en el diseño de nuestra web.
  • La forma de integrar el gráfico es muy sencilla: únicamente es necesario incluir una imagen (etiqueta <IMG>) cuyo src sea el script PHP que generará nuestro gráfico (ver ejemplos).

Pocos defectos hemos encontrado en la librería, tan solo se podría mejorar lo siguiente:

  • Los mensajes de error son algo escasos, y la mayotía de las veces cuando algo falla no obtenemos ninguna explicación.
  • Se echa de menos algo de definición en los gráficos, sobre todo en los gráficos de sectores.

Compartir

Comentarios

fco javier llamas

10/6/2005
necesito instalar jpgraph para la generacion de graficas con datos traidos desde mysql , como hago la instalacion?????
Gracias, ayudenmeeeeee

Willarman Prada R

06/6/2006
Hay un excelente manual de JpGraph (En Inglés) en la direccion web: http://www.snl.salk.edu/~cadams/jpgraph_docs/docs/html/

Calaver

05/10/2007
para hacer que tu grafico sea dinamico con MySql o Otros gestores de bases de datos, solo has lo que siempre haces para recupoerar tus datos en una consula e insertalos en una variable array
por ejemplo

$varcontadora=0;
//aqui inicio de consulta DB

$linea1[$varcontadora]= $datoDB; // esta linea es la que captura tus datos de la Base en el array

$varcontadora++;
//aqui fin de consulta DB

//despues solo cambia por tu array
$lineplot=new LinePlot($linea1);

esto solo es un ejemplo de lo que podrias hacer, suerte

Saludos

Ciproflox

02/12/2008
Si van a realizar un tutorial, por favor, haganlo correctamente no como esta basura

Xavi

17/4/2009
jpgraph
<?php
include ("jpgraph/src/jpgraph.php");
include ("jpgraph/src/jpgraph_line.php");

$link = @mysql_connect("servidor_bd", "usuario","password");
@mysql_select_db("Nombre_BD", $link);
$com = mysql_query("SELECT COUNT(*),CM_DATA FROM peddos GROUP BY Ped_Fecha",$link);

// Some data
$ydata = array(0);
for($x=0;$x<mysql_num_rows($com);$x++){
array_push($ydata, mysql_result($com,$x,0));
}

// Create the graph. These two calls are always required
$graph = new Graph(450,250,"auto");
$graph->SetScale("textlin");
$graph->img->SetAntiAliasing();
$graph->xgrid->Show();

// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot->SetColor("black");
$lineplot->SetWeight(2);
//$lineplot->SetLegend("Pedidos");

// Setup margin and titles
$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Pedidos");
$graph->xaxis->title->Set("Dias");
$graph->yaxis->title->Set("Pedidos");
$graph->ygrid->SetFill(true,'#EFEFEF@0.5','#F9BB64@0.5');
//$graph->SetShadow();

// Add the plot to the graph
$graph->Add($lineplot);

// Display the graph
$graph->Stroke();
?>

Reinel

07/6/2009
HAGO TODAS LAS RECOMENDACIONES PERO NO ME DA LA GRÁFICA
HOLA! QUE TAL? NECESITO UTILIZAR CON URGENCIA ESTA LIBRERIA HICE TODAS LAS RECOMENDACIONES PERO NO ME DA EL RESULTADO, VE ME DESCARGUE DICHA LIBRERIA LA CUAL SIRVE PARA PHP5 QUE ES LA VERSIÓN QUE UTILIZO VE LA QUE DESCARGUE JPGRAPH-2.3.4 LA CUAL TIENE EL ARCHIVO JPGRAPH.PHP, JPGRAPH_LINE.PHP QUE INCLUYE EL ARCHIVO GRAFICO_LINEA.PHP SERÁ QUE TENGO QUE HACER ALGO MÁS Y NO TENGO CONOCIMIENTO DEL MISMO X FAVOR RESPONDER A LA BREVEDAD POSIBLE SALUDOS REINEL

Angel

16/7/2009
Prueba codigo
Hola, he probado el codigo y no me muestra la imagen, que puede ser, tengo la libreria correctamente instalada y habilitada GD2.

Gracias

DBSPACE

12/11/2009
JpGraph para Solaris
Buenas tardes.... me queda claro como funciona esta libreria....

Tendras algun manual de como instalarlo en un servidor XamPP montado en un solaris 10????

De ante mano gracias por tu ayuda....

nestor

25/2/2010
hacer la grafica
hola buenas tardes si me pudiecn ayudar les agradeceria, a que t refieres tu a include ("jpgraph/jpgraph.php"); eso es una codigo q tu haces

gracias

jenny

01/9/2010
Pregunta
Buen dias:

Quiero saber si puedo mostrar en una misma grafica diagrama de barras y diagrama de tarta, o en su defecto necesito mostrar diagrama de barras y un acumulativo al final.
Gracias.
Jenny

paul

05/10/2010
varios graficos en en una sola pagina
He probado JpGraph pero hasta ahora no puedo generar mas de un grafico en una sola pagina, solo me deja generar un solo grafico por pagina.
me pueden orientar con este tema.
Gracias

mabyux

22/10/2010
grafica de radar
Hola!!!! me gustaria si me pudieran dar algun codigo para generar graficas de radar en php por favor, disculpen la molestia.
Gracias.

Gynna

18/7/2011
Ayuda JpGraph
Buenas tarde
Quería contarles que actualmente me encuentro realizando diversas tipos de graficas utilizando JPGRAPH y pues todo funciona bien , pero me han solicitado que ya no quieren que para añadir otro valor sea necesario ir hasta el código, entonces me gustaría que me ayudaran para realizarlo utilizando cajas de texto y estos valores introducidos se agreguen al array que ya esta anteriormente sin borrar los datos que ya hay .
Agradezco cualquier ayuda =(

Osvaldo

04/10/2011
Problemas con sonsulta a BD mediante php para imprimir valores en grafica de linea
Hola, tengo el siguiente codigo


function _pg_get_data() {
global $db;
$analytic_type_id = mes($_POST['at']);
if ($analytic_type_id == '' || $analytic_type_id == 0) $analytic_type_id = 2;
$object_id = $_SESSION['business']['business_id'];
$object_type_id = $_SESSION['user']['user_type'];
$analytics = $db->select("SELECT date, amount FROM analytics WHERE analytic_type_id = $analytic_type_id AND object_id = $object_id AND object_type_id = $object_type_id ORDER BY `date` ASC limit 30");
$counter = 0;

for($i = 0; $i < 30; $i++) {
$counter++;
$amount = $analytics[$i]['amount'];
$date = $analytics[$i]['date'];
$previous_date = "1969-12-31";
if ($previous_date != $date || $previous_date == "1969-12-31"){$previous_date = $date;}
if((date("Y-m-d",strtotime($previous_date))) < (date("Y-m-d",strtotime($date) - 86400))){
for($j = strtotime($previous_date); date("Y-m-d",$j) < date("Y-m-d",strtotime($date) - 1); $j+=86400) {
$counter++;
$date = date("Y-m-d",$j + 86400);
$amount = 0;
if($counter >= 30) break;
}
}
$previous_date = $date;
if($counter >= 30) break;
print <<< END
# -----
# Graph
# -----
Day Visits
$date $amount
# -----
END;
}
}

esta funcion es llamada desde mi codigo javascript que recoje los valores que arroja esta cunsulta, mi problema es que quiero que incluya las fechas que no aparecen en mi tabla analytics y les ponga valor de 0, lo intento hacer con el IF que tengo en el codigo si se fijan, pero sigue saltansoselo, espero me puedan ayudar!

nerv05

28/2/2012
Como cargar una base de datos
Necesito hacer una grafica lineal pero todos los datos los estan manejando en un archivo de excel alguien sabe como podria llamar los datos para k me los grafique jgraphic

Viridiana

22/5/2012
AYUDA POR FAVOR
hola. soy novata en php y necesito ayuda. lo que necesito es que de acuerdo al resultado de la suma de varias columnas me arroje la grafica de barras con su respectivo porcentaje y de acuerdo a ese porcentaje me muestre un mensaje por ejemplo si el resultado de la primera barra es de 90-100 me diga que es excelente si es de 80-90 es bueno a asi sucesivamente con todas las barras.
ya me arroja la grafica pero me faltan porcentajes y los mensajes
espero puedan ayudarme. gracias

kattie

03/9/2012
dudas sobre el uso
como stan mi duda es si se puede utilizar la libreria jgraph para tener un tablero de seleccion al lado de la grafica donde se pueda seleccionar algunas variables y de acuerdo a eso el grafico cambie sobre el mismo , que sea automatico en la libreria, claro q se podria hacerlo manualmente pero tendria q implementar para cada grafico q cree, yo lo q yo quiero es q esto sea automatico para todos mis graficos q seran mas de 1000 porfavor espero su respuesta....saludos :)

beo

30/10/2014
graficas
como generar este tipo de grafico con php, se puede?
quiero que me represente la grafica un historico de 4 , 5 semanas por tipo de falla para ver la tendencia
se puede?

Albert

29/7/2015
Graficas con datos variables
Buen dia

tengo una pregunta tengo varios archivos php que me dan una grafica cada uno pero quiero usar un select que cuando yo elija suponiendo grafica 1 me ejecute dicha grafica y cuando elija grafica 2 me ejecute dicha grafic espeo haberme explicado.

Saludos amigos