En la entrega anterior vimos como Instalar esta librería en nuestro servidor de pruebas o en nuestro sitio web y no morir en el intento, esta vez comenzaremos a hacer uso de lo que instalamos esa vez creando nuestra primera gráfica.
AVISO:
Para mayor comodidad de ahora en adelante asumiremos que trabajamos en un entorno de hosting donde no tendremos acceso al directorio PHP y por tanto hemos guardado nuestra librería en el directorio “jpgraph”
Los Datos a Emplearse
Dado que para generar gráficas estadísticas necesitamos datos, para efectos de ejemplo usaremos los datos estadísticos de manchas solares, datos ya disponibles para uso público. Los datos utilizados aquí se toma de SIDC (El Solar Influencias Centro de Análisis de Datos) en Bélgica . En este ejemplo vamos a utilizar el resumen de datos históricos que muestra el número total de manchas solares por año desde 1700.
Preparación de la Data
Lo primero para nuestra gráfica y para nuestro script de PHP es recopilar la data a emplearse, dado que JpGraph no es muy exigente con el origen de los datos, esta tarea sera relativamente fácil y deberemos preocuparnos únicamente que los datos sean número enteros o de coma flotante.
Para generar una gráfica de datos, el origen de los mismos puede ser:
- Datos escritos directamente en el script. Esta método se recomienda únicamente si la data es realmente estática.
- Datos almacenados en un archivo de texto plano.(Usaremos esta forma para este ejemplo)
- Datos almacenados en archivos binarios.
- Datos cuyo origen es una base de datos.
- Datos enviados al script por intermedio de la URI pasando los parámetros POST o GET
Lo común en todos los casos es que el desarrollador tenga acceso al menos de lectura a la fuente de los datos, en este caso un archivo de texto plano con dos columnas de datos la primera referida al año ( con un “.5″ añadido a propósito para indicar el promedio del mismo) y la segunda indicando el número de manchas solares para el año correspondiente. Para efectos de muestra visualizaremos las 10 primeras lineas:
Código :
1700.5 5.0
1701.5 11.0
1702.5 16.0
1703.5 23.0
1704.5 36.0
1705.5 58.0
1706.5 29.0
1707.5 20.0
1708.5 10.0
1709.5 8.0
Suponiendo que estos datos están almacenados en un archivo de nombre “yearssn.txt” y que dicho archivo se encuentra en el mismo directorio que nuestro script a realizar, este debera obtener al final dos matrices de datos, una para cada columna:
Código :
<?php
function readsunspotdata($aFile, &$aYears, &$aSunspots) {
$lines = @file($aFile,FILE_IGNORE_NEW_LINES|FILE_SKIP_EMPTY_LINES);
if( $lines === false ) {
throw new JpGraphException('Can not read sunspot data file.');
};
foreach( $lines as $line => $datarow ) {
$split = preg_split('/[\s]+/',$datarow);
$aYears[] = substr(trim($split[0]),0,4);
$aSunspots[] = trim($split[1]);
};
};
$year = array();
$ydata = array();
readsunspotdata('yearssn.txt',$year,$ydata);
?>
En este script lo que hemos hecho es leer el archivo de texto y dividir la data en 2 matrices las cuales usaremos ahora para poder crear nuestra gráfica, también se ha incluido un excepción en el caso que la data a obtenerse no este disponible en este primer ejercicio no hemos ahondado en el manejo de errores y se ha colocado este solo ha manera de ejemplo, más adelante se tratará el tema en detalle.
Ahora disponemos de dos matrices, $year y $ydata.
TIP:
Otra forma de manejar archivos externos es trabajando con archivos de valores separados por comas (.CSV) para los cuales PHP tiene métodos específicos para su lectura ReadFileData:: FromCSV ().
Nuestro primer gráfico básico
Para este ejemplo básico usaremos un gráfico de lineas, el código a continuación se centra en la generación del gráfico, pero el código anterior deberá de ser incluido previamente para que funcione todo el conjunto.
Para la generación de cualquier gráfico con esta librería, tenemos necesariamente que incluir al menos 02 archivos, “jpgraph.php” y el archivo que se refiera al gráfico en especifico que vamos a utilizar en este caso en concreto “jpgraph_line.php” ya que la inclusión de estos archivos es vital para el funcionamiento del script, recomendamos el uso de require_once(‘jpgraph/jpgraph.php); se recomienda esta práctica para la inclusión de todas las clases que usemos en el futuro.
Código :
<?php
// Ancho y Alto del gráfico
$width = 600; $height = 200;
// Creamos una instancia de Graph
$graph = new Graph($width,$height);
// Especificamos la Escala que desamos usar,
// int = Escala de enteros para el eje X
// int = Escala de enteros para el eje Y
$graph->SetScale('intint');
// Establecemos el titulo para graph
$graph->title->Set('Sunspot example');
// Establecemos los títulos para el eje X
$graph->xaxis->title->Set('(year from 1701)');
// Establecemos los títulos para el eje Y
$graph->yaxis->title->Set('(# sunspots)');
// Creamos el Dibujo del Gráfico de Lineas
$lineplot=new LinePlot($ydata);
// Añadimos el dibujo a nuestra gráfica
$graph->Add($lineplot);
// Mostramos la gráfica
$graph->Stroke();
?>
El resultado del script de arriba es la imagen que vemos a continuación, para mayor detalle observese los comentarios.
Hasta aquí el día de hoy, la próxima vez concluiremos este ejemplo añadiendo algunas modificaciones a la gráfica que hemos creado hoy, añadiremos un etiquetas al eje X, cambiaremos los colores del área delimitada por la linea e incluso estableceremos la transparencia (canal alpha) para dicho relleno, crearemos un gráfico de barras con la misma data y limitaremos el número de barras a mostrar.
.
.