JpGraph: Graficos con PHP

18/10/2007
10:16 am
unijimpe

JpGraph es una librería PHP que te permitirá crear gráficos matemáticos y estadísticos de manera sencilla y con absoluto control. Esta librería soporta una amplia variedad de tipos de gráficos para todas las necesidades.

Características
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.
Documentación muy completa y con una referencia completa de las funciones.

Generando Gráficos de Líneas
El primer ejemplo que veremos es la generación de gráficos de líneas. Luego de haber descargado los archivos fuente de esta librería en JpGraph Download creamos nuestro archivo php en cual cual incluimos primero el archivo jpgraph.php el cual contiene las funciones básicas y luego el archivo jpgraph_line.php que contiene las funciones especificas para la creación de gráficos de linea.

<?php
// Incluimos los archivos necesarios
include("inc/jpgraph.php");
include("inc/jpgraph_line.php");
// Creamos el array de datos
$ydata = array(11, 3, 8, 12, 5, 1, 9, 13, 5, 7);
// Creamos un nuevo grafico de 350x250
$graph = new Graph(350, 250, "auto");
$graph->SetScale( "textlin");
// Creamos el grafico basado en el array
$lineplot = new LinePlot($ydata);
$lineplot->SetColor("blue");
// Agregamos el grafico a la imagen
$graph->Add( $lineplot);
// Mostramos la imagen
$graph->Stroke();
?>

Podemos notar que hemos creado primero la imagen de 350x250 y con los ejes autoescalados, luego creamos un objeto que contiene el gráfico de lineas, posteriormente agregamos este gráfico a la imagen principal y la enviamos al cliente mediante Stroke.

Personalizando el gráfico
Ahora si deseamos asignarle un titulo, controlar los margenes de la imagenes e incluso colocar nombres a los ejes tendríamos el siguiente ejemplo:

include("inc/jpgraph.php");
include("inc/jpgraph_line.php");
$ydata = array(11, 3, 8, 12, 5, 1, 9, 13, 5, 7);
$graph = new Graph(350, 250, "auto");
$graph->SetScale( "textlin");
$graph->img->SetMargin(40, 20, 20, 40);
$graph->title->Set("JpGraph Demo");
$graph->xaxis->title->Set("Altura");
$graph->yaxis->title->Set("Total");
$lineplot = new LinePlot($ydata);
$lineplot->SetColor("blue");
$graph->Add($lineplot);
$graph->Stroke();

Con lo cual obtenemos el siguiente resultado en el cual hemos personalizado nuestra gráfica.

Agregando mas de un Gráfico
Ahora que pasa si deseamos incluir mas de un gráfico en una misma imagen?. Simplemente creamos dos variables en donde creamos los objetos de gráfico y al final lo adjuntamos a la imagen principal como se muestra en el siguiente código.

include("inc/jpgraph.php");
include("inc/jpgraph_line.php");
$ydata1 = array(11, 3, 8, 12, 5, 1, 9, 13, 5, 7);
$ydata2 = array(1, 19, 15, 7, 22, 14, 5, 9, 21, 13);
$graph = new Graph(350, 250, "auto");
$graph->SetScale( "textlin");
$graph->img->SetMargin(40, 20, 20, 40);
$graph->title->Set("JpGraph Demo");
$graph->xaxis->title->Set("Altura");
$graph->yaxis->title->Set("Total");
$lineplot1 = new LinePlot($ydata1);
$lineplot1->SetColor("blue");
$lineplot2 = new LinePlot($ydata2);
$lineplot2->SetColor("orange");
$graph->Add($lineplot1);
$graph->Add($lineplot2);
$graph->Stroke();

Como pueden ver es muy semejante al ejemplo anterior pero con la diferencia que se manejan dos objetos de imagen y se obtiene el siguiente resultado.

Generando Gráficos de Barras
Ahora si lo que deseamos es crear gráficos de barras debemos incluir el archivo jpgraph_bar.php en lugar de jpgraph_line.php y luego podemos emplear la clase BarPlot. Veamos un ejemplo en el cual hemos cambiado el tipo de gráfico.

include("inc/jpgraph.php");
include("inc/jpgraph_bar.php");
$ydata = array(11, 3, 8, 12, 5, 1, 9, 13, 5, 7);
$graph = new Graph(350, 250, "auto");
$graph->SetScale("textlin");
$graph->img->SetMargin(40, 20, 20, 40);
$graph->title->Set("JpGraph Demo");
$graph->xaxis->title->Set("Altura" );
$graph->yaxis->title->Set("Total" );
$barplot =new BarPlot($ydata);
$barplot->SetColor("orange");
$graph->Add($barplot);
$graph->Stroke();

Este ejemplo es semejante al primer ejemplo pero con unos pocos cambios hemos logrado obtener un gráfico de barras de la forma:

Conclusión
Definitivamente es un librería muy potente y que nos puede ayudar a generar gráficos de manera sencilla y rápida. Obviamente solo hemos visto un par de tipos de gráficos pero hay muchos mas tipos que están disponibles. Además de ello gracias a la excelente documentación que tiene no te será difícil aprender a utilizar los otros tipos de gráficos.

Posts Relacionados

General, PHP

Total de Comentarios: 14

26/10/2007

3:41 pm

[...] Para leer más: [...]

30/10/2007

10:33 am

[...] JpGraph una de las librerías mas completas para generar imágenes de la cual hemos hablado en JpGraph: Gráficos con PHP tiene entre una de sus características la de generar imágenes para hacer captcha. En esta ocasión veremos la forma de implementar un formulario que incluya verificación por captcha para protegerlo del ataque de los spammers. [...]

12/11/2007

8:07 pm

como se puede hacer para poner un boton en la pagina justa del grafico…es que estoy haciendo una aplicacion y cuando pongo el codigo del boton despues del codigo php para crear un boton, no me lo carga…
pero la opcion dos, es como puedo hacer para poner al formulario que me abra la grafica en otra pagina?¿?¿?

12/11/2007

8:25 pm

yo se que no es la mejor forma,,,pero mientras tanto,…cargue el grafico en una nueva pagina

04/12/2007

2:36 pm

muy buena la libreria, pero como puedo hacer para que los valores de Y salga en forma descendente, es decir en vez de empezar desde cero a n que empiece de n hasta cero.
ejemplo:
y= 0,1,2,3,4,5,6,7,8

yo quiero que sea:
y=8,7,6,5,4,3,2,1,0

se puede hacer?

05/12/2007

9:57 am

Que tal!! Buen día.

pormi parte es una de las mejores librerias, tanto en el diseño de las graficas como la informacion que se puede mostrar en ella. me gustaria saver si se pueden imprimir dos o mas gráficas en la misma pagina, presionando un botón. si esto es posible, les pediria el favor que me orientaran con estas acciones de antemano muchas gracias :)

10/12/2007

8:32 am

erwin me llamo : tengo una duda como hago para mostrar las cantidad de usuarios en la grafica :utilizando base de datos :porfavor mandar un ejemplo : real
porfa

12/12/2007

12:12 pm

que tal Erwind decarga los archivos de Captcha con PHP y JpGraph que estan al final de los ejemplos de estas graficas, hay vienen muchos ejemplos de este tipo que sugieres ;)

21/12/2007

3:00 pm

Hola, alguien sabra de alguna aplicación como esta pero que genere graficas tipo radar o tipo araña????

07/01/2008

3:18 am

Hola. He copiado el codigo y bajado las clases en el enlace que indica arriba. Cuando cargo la pagina en el explorador no me da ningun codigo de error (quiere decir que los includes estan bien puestos y que de codigo no ha problema), pero me sale la pagina en blanco. Alguien sabe porque puede ser y cual es la solucion. Muchas gracias.

18/01/2008

7:42 am

ya solucione el problema. Era relacionado con la libreria php_gd.dll

Ahora tengo otro problema jejeje.

Cuando lo que quiero es en vez de pasar un vector con los valores a mano, cogerlos de una base de datos, me dice: HTTP headers has already been sent… o algo asi.

No se como solucionarlo.
Alguien tiene un codigo que te saque la grafica a partir de datos de una base de datos.

Gracias