JpGraph: Graficos con PHP

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.

jpgraph_logo.png

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

Podemos notar que hemos creado primero la imagen de 350×250 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.

demo-line.png

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:

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

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

demo-lineadv.png

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.

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

demo-linetwo.png

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.

php
  1. include("inc/jpgraph.php");
  2. include("inc/jpgraph_bar.php");
  3.  
  4. $ydata = array(11, 3, 8, 12, 5, 1, 9, 13, 5, 7);
  5. $graph = new Graph(350, 250, "auto");    
  6. $graph->SetScale("textlin");
  7.  
  8. $graph->img->SetMargin(40, 20, 20, 40);
  9. $graph->title->Set("JpGraph Demo");
  10. $graph->xaxis->title->Set("Altura" );
  11. $graph->yaxis->title->Set("Total" );
  12.  
  13. $barplot =new BarPlot($ydata);
  14. $barplot->SetColor("orange");
  15.  
  16. $graph->Add($barplot);
  17. $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:


demo-bar.png

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.

Comentarios Total 58 comentarios



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

Captcha con PHP y JpGraph » unijimpe
Publicado: 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. [...]

paolovaliente
Publicado: 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?¿?¿?

paolovaliente
Publicado: 12/11/2007 8:25 pm

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

lucas
Publicado: 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?

Sergio Tejeda
Publicado: 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 :)

ERWIN
Publicado: 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

Sergio Tejeda
Publicado: 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 ;)

Sawachika
Publicado: 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????

yop324
Publicado: 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.

yop324
Publicado: 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

Ray Ronaldo Rivas Rodriguez
Publicado: 24/02/2008 7:36 pm

esto es exelente desearia por favor que me envien mas serca de php quisiera dominar este lenguaje y sus herramientas

GabrielFlowers
Publicado: 16/04/2008 9:46 am

como hago los graficos tipo cienfico, donde pueda graficar funciones explicitas en dos ejes y=f(x)(por ejm: y=x^2+3)???

Javo
Publicado: 16/05/2008 8:24 pm

Y en vez de un array de ese tipo no podria ser una sentencia sql de una tabla?

patricio meneses
Publicado: 11/06/2008 8:26 pm

soy nuevo en esto y necesito su ayuda, no entiendo como pasarle los datos al grafico.

yo tegom una pagin en php en donde lee desde una base de datos acces, ahi nace mi duda como graficar los valores de la base. agradeceria me respondieran.

carlos
Publicado: 12/06/2008 4:06 pm

me gustaria saber si tambien puedo generar a partir de datos de una tabla, el grafico pero en imagenes ya existentes.
por ejemplo si tengo un mapa de un pais poder hacer que con los datos de la tabla, hacerlo cambiar.
saludos

Ruben
Publicado: 19/06/2008 6:10 am

Buenos días,
yop324dijo:
“ya solucione el problema. Era relacionado con la libreria php_gd.dll”.

a mi también me pasa lo mismo, alguien puede explicar que es exactamente ?

Edgar
Publicado: 24/06/2008 10:45 am

buenos dias, tendran un ejemplo de como usar php, jpgraph y ajax, es para graficar en tiempo real.. se los agradeceria mucho! saludos!

jesus
Publicado: 05/07/2008 6:11 pm

hola, segui todas las indicaciones para me indican para generar unas graficas con php pero solo me sale un cuadrito de imagen como que no existira la imagen. si alguien tiene idea del error que estoy cometiendo le agradeceria y me ayudara. hasta luego y gracias por su atencion.

Lipe
Publicado: 11/07/2008 10:57 am

me gustria saber si estas libresiar para utilizar graficos se puede usar en openbsd y que tengo que volver a configurar el archivo httpd.conf

Cristian
Publicado: 03/09/2008 4:07 pm

Una consulta se puede hacer un gráfico usando MySQL para el tratamiento de los datos?, si es un si alguien tiene una parte de código o una guía para entender más menos que pasos realizar.

Er_papa
Publicado: 26/09/2008 2:52 pm

Una duda, como podria poner una barra del diagrama de un color distinto del resto.

daniel
Publicado: 28/09/2008 8:33 pm

hola

quisiera saber como pouedo guardar la imagen, ya la genero, pero me gustaria guardarla temporalemte para poder guardar el gráfico en un archivo pdf.

me explico, le muestro la consualta al usuario, pero l doy la opción de que pueda guardarlo en una archivo pdf, como puedo hacerlo, utilizo la libreria FPDF pero ella me pide que ya exista la imagen en el disco duro, por eso no la puedo pasar al archico pdf.

gracias att Daniel

Priscy
Publicado: 09/10/2008 3:33 pm

hOLA YO TAMBIEN QUISIERA SABER COMO LLAMARLE DESDE EL FORM LE MANDO UN PERO NO ME MUESTRA LA IMAGEN. ADEMAS QUIERO SABER LA UBICACION EN LA QUE DEBO PONER LA LIBRERIA

Alexis
Publicado: 27/10/2008 2:25 pm

Hola.
Quisiera saber si en un gráfico de barras, una sola barra puede tener más de un color, ya que necesito que una misma barra muestre un total de varias cosas, que estan diferenciadas por colores.
Si me pudieras responder, muchas gracias.

Picky
Publicado: 28/10/2008 3:57 pm

Hola no entiendo las librerias me da miles de errores y no puedo probar ningun ejemplo:

Notice: Use of undefined constant IMG_PNG – assumed ‘IMG_PNG’ in /var/www/html/report/graficas/src/jpgraph_errhandler.inc.php on line 188
JpGraph Error Your PHP installation does not seem to have the required GD 2.x library enabled. Please see the PHP documentation, “Image” section. Make sure that “php_gd2.dll” statement is uncomment in the [modules] section in the php.ini file.

Antonias
Publicado: 07/11/2008 7:37 pm

para mostrar graficos con consultas a MySQL, simplemente se hacen llegar los datos o se hacen en la misma pagina las consultas, luego en html se llama al grafico como imagen.
osea si el archivo q genera el grafico se llama ‘Grafico.php’ en el html para mostrar el grafico es

JT
Publicado: 29/12/2008 1:42 pm

Necesito poder generar gráficos de barra o tortas pero que en cada barra pueda hacer referencia a un hipervínculo. Querría saber si este softwar o algún otro lo permite.
Gracias

lizardo
Publicado: 20/01/2009 1:52 pm

hola tienen alguna web donde pueda ver el funcionamiento de este componente gracias

Martin Abraham
Publicado: 13/07/2009 3:27 pm

Qusiera saber como hacer un grafico cartesiano x-y en el cual se pueda regular el rango de x, es decir poder setear fecha inicial y final a graficar

Gracias

Frank
Publicado: 14/07/2009 3:25 pm

Ya existe una versión para php 6?

Carolina
Publicado: 14/08/2009 10:01 am

Hola. A mi me da este error:
No path specified for CACHE_DIR. Please specify CACHE_DIR manually in jpg-config.inc

Que sera?

Sergio Giovanny
Publicado: 28/08/2009 7:02 pm

Si muy potente y todo pero no sirve en un Hosting en internet… solo funcina en equipos locales…

Lastima….

si alguien la hizo funcionar en un servidor de internet (Linux) comente como lo hizo.
gracias.

Angela
Publicado: 14/10/2009 11:00 am

Hola, alguien puede indicarme o explicarme como podria modificar los datos de x, enviando asi dos arrays diferentes uno en x y otro en y para generar la grafica?
les agradeceria su colaboracion…

colilo
Publicado: 20/11/2009 5:45 pm

Hola amigos. Pues la verdad si quieren hacer gráficos estadísticos dinámicos, osea aquellos que muestran los resultados de una encuesta por ejemplo (en los que primero se vota y luego se muestra el gráfico estadístico) desconozco si existe cómo hacerlo con JPGraph. En un trabajo que hice utilicé una librería llamada GraphPico la misma que es muy sencilla para ser usada, pero permite gráficos dinámicos, yo complementé eso con una tabla de datos abajo del gráfico. Las desventajas son que sólo permite 10 datos y sólo tiene tres tipos de gráficos: pasteles, barras y porcentajes.
Si les sirve pues descárguelan del Internet y pruébenlas.

victor
Publicado: 03/12/2009 12:20 pm

hola tan solo tengo una duda , como puedo cambiar el valor del eje x ?

guarus
Publicado: 29/01/2010 11:05 am

Saludos a la gente del blog. Mi presunta es la siguiente:

¿Cómo puedo graficar, sino conozco a ciencia cierta la cantidad de valores de x, y? Me explico, tengo una tabla desde donde obtengo los valores tanto de x como de y que deseo graficar. He intentado pero me da error, despues de realizar varias pruebas, no me da error, pero tampoco muestra la grafica, y en algunas de dichas pruebas, me muestra sólo una X en lugar del grafico.

Si al guien me prodría asesorar al respecto le agradecería.
Gracias de antemano.

PD. He intentado tanto con el grafico de barras (bar), como el de torta (pie), y obtengo los mismo resultados comentados. Si embargo, asignando valores fijos a x,y no tengo ningun inconveniente.

lili
Publicado: 06/05/2010 2:30 pm

Una consulta se puede hacer un gráfico usando MySQL para el tratamiento de los datos?, si es un si alguien tiene una parte de código o una guía para entender más menos que pasos realizar.

Liliana
Publicado: 06/05/2010 2:31 pm

deseo q me expliquen como hacer graficos jgraf con datos de mysql

Javier
Publicado: 31/05/2010 5:07 pm

Alguien sabe como crear codigos PDF417 con esta libreria? o con algun otra de php?

JpGraph – Generar gráficos con PHP
Publicado: 16/06/2010 2:37 pm

[...] el blog de Unijimpe podéis encontraros una pequeña guía para empezar a usar JpGraph que podéis descargar desde la [...]


[...] el blog de Unijimpe podéis encontraros una pequeña guía para empezar a usar JpGraph que podéis descargar desde la [...]

jazmin
Publicado: 14/07/2010 4:29 pm

hola quiero saber si la libreiria grafica valores mayores a 1000 y no les pone 1k

otto
Publicado: 05/08/2010 11:20 am

ya copie las librerias pero no me genera la grafica,
me sale el siguiente error:——
—————————————————
No se puede mostrar la imagen “http://localhost/ejemplos/prueba/estadistik_1.php” porque contiene errores.
———————————————–

matias
Publicado: 23/09/2010 1:43 pm

para los que quieran usar datos de una base en lugar de crear un array como el que hacen en el ejemplo,e s facil.
el array del ejemplo es asi:

$ydata = array(11, 3, 8, 12, 5, 1, 9, 13, 5, 7);

eso seria de manera manual. Para hacerlo con datos de una base, al array $ydata se lo hace de esta forma:

lo que hay que hacer es extraer los datos con un while y guardarlo en un array, supongamos:

$sql = “select perfumes from productos”;
$rsp = mysql_qery($sql);

$i = 0; //indice para el array

while($row = mysql_fetch_array($rsp)){

$ydata[$i] = $row["perfumes"]; //aca $ydata se convierte en un array, de indice 0 y con el valor que tenga el campo perfumes
$i++; // y aqui incrementamos en 1 el valor de $i, para que se convierta en 1, luego e 2, y asi ir asignandole indices distintos al array $ydata.
}

//ahora, $ydata es un array con todos los valores de perfumes que halla en el campo perfumes.

jonathan
Publicado: 05/10/2010 10:06 am

hola, me gustaria saber como puedo llamar datos estadisticos de una bd en mysql, me explico. quisiera saber cuantas uniformes se le han dado a determinado empleado, o cuantos uniformes se asignaron en el ultimo mes.


SetScale('textlin');

//adherir una sombra
$graph->SetShadow();

//Ajustar las margenes
$graph->SetMargin(80,80,80,80); //arriba, abajo, izquierda y derecha

//crear la barra
$bplot = new Barplot($datay);

//Ajustando el color
$bplot->SetFillColor('orange');
$graph->Add($bplot);

//configurar los titulos
$graph->title->Set('una grafica de barras');
$graph->xaxis->title->Set('X-title');
$graph->yaxis->title->Set('Y-title');

//$graph->title->SetFont(FF_FONT1,FS_FBOLD);
//$graph->yaxis->title->SetFont(FF_FONT1_BOLD);
//$graph->xyaxis->title->SetFont(FF_FONT1_BOLD);

//mostrar la grafica
$graph->stroke();

?>

jonathan
Publicado: 05/10/2010 10:07 am

el codigo faltante


SetScale('textlin');

Pablo
Publicado: 05/11/2010 7:58 pm

Error: 25128 The function imageantialias() is not available in your PHP installation. Use the GD version that comes with PHP and not the standalone version.

Fernando Diaz
Publicado: 08/02/2011 2:02 pm

hola me gustaria saber como llamo a la consulta en x los dias de un mes determinado

Omar
Publicado: 28/02/2011 3:33 am

Estimados una consulta… jpgraph lo que han implementado las graficas de tipo tortas,… han logrado que el recorrido de las porciones internas de las tortas vaya en sentido a las agujas del rejoj…la verdad que heporbado en todas partes y veo que la grafica siempre busca rellenar pero en sentido contrario..independientemente si le coloco SetStartAngle.. en 90 o 45 o 0-…a ver quien le ha pasdo lo mismo
por que deverdad no se porque dice la pag de soporte si va al sentido de las agujas pero es todo lo contrario

un saludo

ignacio
Publicado: 04/10/2011 5:33 pm

tengo una duda-pregunta como se puede poner el fondo del gráfico transparente. lo quiero con el fin de poner una imagen de donde desde el body se sobre esta que esten las graficas

christian
Publicado: 07/10/2011 8:50 am

el codigo esta bien solo que no sale la grafica

lu
Publicado: 10/10/2011 12:51 pm

hola una pregunta como puedo hacer una grafica de resultados de una encuestas los datos se almacenan en BD y de alli se hace la estadistica.

Javier Rodriguez
Publicado: 11/10/2011 9:01 am

Lu – es muy sencillo, cuando captures los datos de tu base datos los cargas a una matriz igual como estan los ejemplos $ydata …

charlie
Publicado: 25/11/2011 4:03 pm

hola , me gustaria saber como crear estos graficos en formato png , ya que para llamarlo desde otra archivo php , es , pero me gustaria que al llamar fuera , agradeceria mucho si me ayudaras.

PD: muy buen blog

Nelson Linares
Publicado: 20/04/2012 9:26 pm

hola, esta muy bueno el codigo pero alguien me puede decir como hacer este grafico en pdf, puede ser con la libreria fpdf o jumpiime, ya que lo inclui o hice la prueba el grafico me salio en pagina html y no en pdf. gracias

GabyNeeOchoa
Publicado: 22/10/2012 11:57 pm

Hey alguien me puede explicar como hago que me muestre la grafica… adapte el codigo a lo que yo necesito pero no me muestra la grafica… me aparece solo el cuadrito de que la imagen no puede ser mostrada y ningun error… he visto que otros tienen el mismo problema pero nadie explica como lo soluciono y quien ya lo hizo ni se aparece para explicar….. alguien que me ayude????

jrondon
Publicado: 29/01/2013 9:12 pm

Porque no me corre este programa en mi wampserver?………. quiero probar y me sale error!… quien me podria ayudar…

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)