Gráfica lineal y de barras en PHP

Cuando desarrollamos nuestra páginas web, nos interesa poder generar ciertas estadísticas sobre los datos que nosotros queramos, como pueden ser el número de visitas o la tasa de descargas. Por lo general, toda estadística va acompañada de su gráfica representativa que nos muestra de una forma mucho más visual los resultados. Debido a esto, voy a enseñaros como podeis generar vuestros gráficos estadísticos con PHP, generando gráficas lineales o de barras.

Para ello, lo primero que debemos hacer es descargarnos dos librerías que nos proveerán de las funciones y herramientas necesarias para realizar las gráficas.

Estas dos librerías son Jpgraph y Jpgraph_line(Van las dos en el mismo archivo descargado). Para usarlas bastaría con incluirlas a través de un include en el código php de nuesta página como veremos un poco más adelante.

En este ejemplo que os voy a presentar generamos un código que nos permite elegir el tipo de gráfíca a generar dependiendo de una variable llamada "gráfica" enviada mediante el método GET.

El código PHP que nos lo generaría sería el siguiente:

<?php

$grafica=$_GET['grafica'];

switch($grafica){

case "lineal":

	include("./lib/jpgraph/src/jpgraph.php");
	include("./lib/jpgraph/src/jpgraph_line.php");
 
	$dataX=array(1,2,3,4,5,6,7,8,9,10,11,12);
	$dataY=array(12,2,5,20,1,7,10,12,17,3,4,18);
	$height=350;
	$width=300;
	$titulo="Grafica lineal";
	$tituloX="Datos X";
	$tituloY="Datos Y";
	$color="blue";
	$ydata = $dataY;
	$graph = new Graph($width, $height, "auto");    
	$graph->SetScale( "textlin");
	$graph->img->SetMargin(50, 50, 20, 50);
	$graph->title->Set($titulo);

	$xdata =$dataX;
	$graph->xaxis->SetTickLabels($xdata);
	$graph->xaxis->title->Set($tituloX);

	$graph->yaxis->title->Set($tituloY);
	 
	$lineplot = new LinePlot($ydata);
	$lineplot->SetColor($color);
	 
	$graph->Add($lineplot);
	$graph->Stroke(); 

	break;
	
case "barras":

	include("./lib/jpgraph/src/jpgraph.php");
	include("./lib/jpgraph/src/jpgraph_bar.php");

	$dataX=array(1,2,3,4,5,6,7,8,9,10,11,12);;
	$dataY=(12,2,5,20,1,7,10,12,17,3,4,18);
	$height=350;
	$width=300;
	$titulo="Grafica lineal";
	$tituloX="Datos X";
	$tituloY="Datos Y";
	$color="blue";
	
	$ydata = $dataY;
	$graph = new Graph($width, $height, "auto");    
	$graph->SetScale("textlin");
	$xdata =$dataX;
	$graph->xaxis->SetTickLabels($xdata);
	$graph->img->SetMargin(50, 50, 20, 50);
	$graph->title->Set($titulo);
	$graph->xaxis->title->Set($tituloX );
	$graph->yaxis->title->Set($tituloY );
	 
	$barplot =new BarPlot($ydata);
	$barplot->SetColor($color);
	 
	$graph->Add($barplot);
	$graph->Stroke(); 
	
	break;
}

?>

Como vemos, podemos personalizar la gráfica en cierto grado a nuestro gusto. Podemos seleccionar el color de las barrasola linea, el título, tanto de la gráfica como de los ejes o el alto y ancho.

Los datos que queremos reflejar en la gráfica se establece mediante 2 arrays $dataX y $dataY que representan los datos X e Y respectivamente.

La llamada correspondiente a la generación de la gráfica se realizará mediante HTML y un ejemplo de ello sería el siguiente:

<div class='dibujo-grafica' align='center'>

<img src="Grafica.php?grafica=<?php echo $grafica; ?> " alt='grafico'/>

</div>

De este modo, la gráfica la generamos como si fuera una imagen más dentro de nuestra página HTML.

A partir de este punto podríamos generar gráficas con datos provenientes de nuestra Base de Datos, generando diferentes gráficas en función de los datos que queremos, de los meses que queramos o lo que nuestros clientes requieran.

Si teneis cualquier pregunta no dudeis en escribirme o poner vuestros comentarios.

Espero que os sea de utilidad.