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.

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

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.

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.

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.

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.

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:


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

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>)