Generación de gráficospremium.redusers.com.s3.amazonaws.com/LIBROS/PHP desde... · 2014-05-22 · Algunos de los formatos más popula- ... Entre los atributos más importantes puestos

La inclusión de gráfi cos en aplicaciones web es habitual, y el número

de librerías que nos permiten agilizar el proceso de generación y

manipulación de imágenes crece día a día. Observaremos cómo

funcionan algunas de ellas y analizaremos en qué aspectos pueden

favorecer nuestros desarrollos.

Generaciónde gráficos

▼La librería GD ...............................2

phpThumbpara imágenes dinámicas ..............4JpGraph para la generación de gráfi cos ....14

▼Resumen .....................................41

▼Actividades .................................42

B#_Generacion de graficos.indd 1B#_Generacion de graficos.indd 1 21/04/2014 15:3821/04/2014 15:38

APÉNDICE B. GENERACIÓN DE GRÁFICOS2

www.redusers.com

La librería GDEl lenguaje PHP provee una extensión para utilizar la librería

GD (www.boutell.com/gd) a través de funciones predeterminadas.

Esta librería se utiliza sobre todo para generar gráfi cos en tiempo de ejecu-

ción. Permite dinamizar las salidas valiéndose de los ingresos de los usuarios

o de datos almacenados en bases de datos o archivos de confi guración.

Para su correcto funcionamiento, GD requiere que contemos con

PHP versión 4.3.2 o superior (la librería viene incluida en la distribución

estándar). Además, deberá estar habilitada en el archivo php.ini:

Para comprobar si disponemos o no de la librería, tenemos varias opciones:

• Utilizar la función phpinfo:

• Verifi car que esté habilitada alguna de las funciones de extensión:

extension=php_gd2.dll

<?phpphpinfo(); ?>

<?php

if (function_exists(“gd_info”)) {echo “GD esta disponible”;echo ‘<pre>’;print_r(gd_info());echo ‘</pre>’;} else {echo “GD no esta disponible !”;}

?>


PHP DESDE CERO 3

www.redusers.com

En instalaciones que requieren la compilación de PHP, deberán estar

incluidas las siguientes opciones:

Para verifi car que nuestro sistema cuenta con estas alternativas habili-

tadas, nuevamente disponemos de la salida de la función phpinfo.

Figura 1. La función gd_info devuelve información acerca del soportebrindado por nuestro sistema con relación a GD.

GD nos permite manipular diversos formatos de imágenes.

Debemos tener en cuenta que esto dependerá de la versión instalada;

por ejemplo, las anteriores a la 1.6 admiten GIF, pero no PNG, y lo in-

verso sucede con las superiores. Algunos de los formatos más popula-

res soportados por GD son los siguientes:

--with-gd--with-jpeg-dir=/usr--with-png--with-ttf



www.redusers.com

• GIF (CompuServe Graphical Interchange Format).

• JPG (o JPEG, Joint Photographic Experts Group).

• PNG (Portable Network Graphics o PNG is Not GIF).

En las páginas siguientes, veremos algunas de las múltiples librerías

escritas en PHP que hacen uso de GD para manipular imágenes.

phpThumb para imágenes dinámicasLa librería phpThumb se utiliza para crear y manipular imágenes (GIF,

PNG o JPEG) de manera dinámica. Aprovecha las características más avan-

zadas de la versión 2 de GD, aunque también es posible trabajar utilizando

versiones anteriores. Trabaja con imágenes GIF aun cuando la versión

de GD instalada en el servidor no soporte este formato (lo hace a través de

la clase GIFutil). Además, mantiene un mecanismo para evitar el uso

de la librería desde sitios externos o mostrar las imágenes almacenadas

(hotlinking). Podemos obtener más información y descargar esta herramien-

ta desde el sitio web ofi cial: http://phpthumb.sourceforge.net.

Lo primero que debemos hacer, luego de descargar la distribución y

copiarla a un directorio del servidor, es renombrar el archivo phpThumb.

confi g.php.default a phpThumb.confi g.php. La librería se utiliza a través de

una llamada al archivo phpThumb.php, que recibe una serie de parámetros

y devuelve el resultado correspondiente, es decir, la imagen generada.

Normalmente, los servicios de alojamiento web (hosting) dan soporte para la utiliza-

ción de la librería GD, por lo que no deberíamos tener inconvenientes para migrar apli-

caciones entre un servidor y otro. De todas maneras y para evitar futuros problemas,

es conveniente asegurarnos antes de realizar la contratación.

DISPONIBILIDAD DE LA LIBRERÍA


PHP DESDE CERO 5

www.redusers.com

El caso más común consiste en incluir la llamada dentro del atributo

src del elemento img:

Existe una sintaxis alternativa:

El último argumento es la ruta a la imagen, el penúltimo son las dimensio-

nes (ancho y alto), y lo demás corresponde a valores asignados a parámetros:

En el ejemplo anterior, recuperamos la imagen nombreImagen.png y defi ni-

mos que sea de 100px de ancho por 150px de alto. Además, incluimos dos

parámetros adicionales: f (formato de la imagen devuelta) y q (calidad).

Entre los atributos más importantes puestos a disposición por

phpThumb, se encuentran los siguientes:

<imgsrc=”phpthumb.php?src=nombreImagen.jpg”>

phpThumb.php/<parametro1>=<valor1>;<parame-

troN>=<valorN>;<w>x<h>;<imagen>

<imgsrc=”phpThumb.php/f=jpeg;q=70;100x150;nombreImagen.png”>

La librería phpThumb trabaja con las distintas versiones de GD, sin embargo, su com-

portamiento puede cambiar según contemos con las últimas disponibles (desde la 2 en

adelante) o las no tan nuevas. Algunas de las variaciones pueden estar relacionadas con

la calidad en la visualización de las imágenes, por ejemplo.

VERSIONES DE GD



www.redusers.com

• src: indica la dirección de la imagen por tratar.

• new: permite crear una imagen nueva y recibe como valores un número

hexadecimal (color) y, opcionalmente, un porcentaje de opacidad.

Además, requiere que se defi nan los atributos w y h. Con el siguiente

código generamos una imagen color amarillo de 200px por 100px:

Para defi nir el grado de opacidad (por ejemplo 20%):

• w: establece un ancho máximo en pixeles para la imagen.

• h: establece un alto máximo en pixeles para la imagen.

• f: establece un formato de salida para la imagen, que puede tomar

como posibles valores a JPEG, PNG o GIF.

• q: defi ne la calidad (nivel de compresión) de la imagen y solo se

aplica al formato JPEG (1 para baja calidad, 95 para máxima calidad,

75 es valor por defecto).

• sx: quita un porcentaje de la imagen a partir del margen izquierdo (toma

valores entre 0 y 1). En el siguiente ejemplo, mostramos primero la imagen

original y, luego, la misma imagen con un cuarenta por ciento menos:

• sy: quita un porcentaje de la imagen a partir del margen superior (toma

valores entre 0 y 1). En el siguiente ejemplo, mostramos primero la ima-

gen original y, luego, la misma imagen con un diez por ciento menos:

phpthumb/phpthumb.php?new=FFFF00&w=200&h=100

phpthumb/phpthumb.php?new=FFFF00|20&w=200&h=100

phpthumb/phpthumb.php?src=/phpThumb/imagen2.png

phpthumb/phpthumb.php?src=/phpThumb/imagen2.png&sx=0.4


PHP DESDE CERO 7

www.redusers.com

Figura 2. La manipulación de imágenes a través de phpThumbse realiza invocando el archivo phpthumb.php.

• sw: es similar a sx solo que muestra únicamente el porcentaje a partir

del margen izquierdo. En el siguiente ejemplo, mostramos primero la

imagen original y, luego, el cincuenta por ciento de la misma imagen:

• sh: es similar a sy solo que muestra únicamente el porcentaje a partir

del margen superior. En el siguiente ejemplo, mostramos primero la

imagen original y, luego, el setenta por ciento de la misma imagen:


phpthumb/phpthumb.php?src=/phpThumb/imagen2.png&sy=0.1


phpthumb/phpthumb.php?src=/phpThumb/imagen2.png&sw=0.5


phpthumb/phpthumb.php?src=/phpThumb/imagen2.png&sh=0.7



www.redusers.com

• zc: devuelve una imagen con las dimensiones defi nidas cuyo contenido

es la imagen original adecuada:

• bg: permite modifi car el color de fondo de una imagen (valor hexadecimal).

• bc: representa el borde de la imagen (valor hexadecimal).

• ra: rota la imagen de acuerdo con el ángulo dado (positivo, en sentido

horario; negativo, en sentido antihorario):

• ar: rota la imagen 90 grados:

• iar (Ignore Aspect Ratio): ignora las dimensiones originales de la imagen

sin mantener su aspecto inicial.

phpthumb/phpthumb.php?src=/phpthumb/imagen.jpg&w=600&h=300&zc=1

phpthumb/phpthumb.php?src=/phpthumb/imagen.jpg&ra=90

phpthumb/phpthumb.php?src=/phpthumb/imagen.jpg&w=200&ar=p

phpthumb/phpthumb.php?src=/phpthumb/imagen.jpg&w=200&ar=P

Según la versión de GD que tengamos instalada en nuestra computadora, las fun-

cionalidades ofrecidas pueden variar y afectar las aplicaciones. En la mayoría de los

casos, esto no sucede, debido a que los cambios entre las versiones que se encuen-

tran disponibles, por lo menos hasta ahora, no son radicales.

VERSIONES DISPONIBLES


PHP DESDE CERO 9

www.redusers.com

• far: crea una imagen con el ancho y el alto especifi cados, pero mantiene

el aspecto original. El valor que recibe indica la alineación (L para la iz-

quierda, R para la derecha, T para arriba, B para abajo, C para el centro,

y las variaciones posibles, por ejemplo, BL para abajo a la izquierda):

• sia (Save Image As): defi ne el nombre que se le dará a la imagen cuando

el usuario quiera guardarla. No es necesario incluir la extensión:

• maxb: nos da la posibilidad de establecer un valor máximo en bytes

para la imagen. En el siguiente ejemplo, defi nimos el peso máximo

en 100000 bytes (alrededor de 100 kB):

• down: permite forzar la descarga de una imagen, recibe como valor el

nombre predeterminado con el cual se guardará. La descarga comienza

cuando accedemos a un enlace como el siguiente:

phpthumb/phpthumb.php?src=/phpthumb/imagen.jpg&w=420&h=120&iar=1

<img src=”phpthumb/phpthumb.php?src=/phpthumb/

imagen.jpg&w=200&h=300&far=C” border=”1”

phpthumb/phpthumb.php?src=/phpthumb/imagen.jpg&sia=nombre

phpthumb/phpthumb.php?src=/phpthumb/imagen.jpg&maxb=100000

phpthumb.php?src=/phpthumb/imagen.jpg&f=png&down=nuevaImagen.png



www.redusers.com

Figura 3. Es posible confi gurar el nombre de la imagen percibidopor el usuario de la aplicación.

A través del atributo fl tr, phpThumb permite la aplicación de fi ltros

sobre las imágenes. Se utiliza de la siguiente manera:

El número de valores es variable:

Y podemos incluir más de un fi ltro a la vez:

Entre los fi ltros disponibles se encuentran los que fi guran en la tabla:

phpthumb.php?src=imagen.jpg&fl tr[]=opcion|valor

phpthumb.php?src=imagen.jpg&fl tr[]=opcion|valor1|valor2|valorN

phpthumb.php?src=imagen.jpg&fl tr[]=opcion|valor&fl tr[]=opcionN|valorN


PHP DESDE CERO 11

www.redusers.com

FILTROS DE IMÁGENES

▼ NOMBRE ▼ DESCRIPCIÓN

Brit Brillo, toma valores entre -255 y 255.

Cont Contraste, toma valores entre -255 y 255.

Gam Corrección de la gama, toma valores positivos.

Sat Saturación, toma valores entre 0 y –100.

Gray Convierte a escala de grises, no recibe valores.

Sep Sepia, toma valores entre 0 y 100.

Blur Difuminar, toma valores entre 0 y 25.

over Ubica una imagen por encima de otra. Recibe el nombre de la imagen y la indicación de si se superpone a la original (0) o viceversa (1).

wmi Agrega una marca de agua a la imagen. Recibe como valores la ruta a la imagen y la alineación (L para izquierda, R para derecha, T para arriba, B para abajo, C para centro, y las variaciones posibles, por ejemplo, BL para abajo a la izquierda).

wmt Agrega un texto sobre la imagen. Recibe como valores el texto, el tamaño de la fuente (1 a 5), la alineación y un color (valor hexadecimal), entre otras opciones.

Flip Da vuelta la imagen en sentido horizontal (valor x) o vertical (valor y).

Ric Redondea los bordes de la imagen. Recibe como valores el radio horizontal y el vertical.

bord Asigna un borde a la imagen. Recibe como valores el ancho en pixeles, el radio horizontal y el vertical, y el color (hexadecimal).

crop Extrae una parte de la imagen dadas las coordenadas (izquierda, derecha, arriba, y abajo; si están entre 0 y 1, se consideran porcentajes).

Tabla 1. Algunas de las opciones disponibles para el atributo fltr.



www.redusers.com

Como vimos, el archivo phpThumb.php admite una gran cantidad de argu-

mentos, de los cuales el más importante es src que sirve para indicar la ruta a

la imagen (también es posible invocar archivos remotos, aunque puede ralen-

tizar la normal ejecución del script). Además, phpThumb mantiene un avanza-

do sistema de caché, que permite reutilizar las imágenes almacenadas en la

memoria para evitar procesamientos en el servidor. En el archivo phpThumb.

confi g.php, se incluyen ciertas directivas para confi gurar el funcionamiento de

la librería, entre las que se encuentra cache_directory (directorio de la caché):

Figura 4. phpThumb permite importar y exportar archivosde imagen en diferentes formatos.

Otras opciones relativas:

• Deshabilitar los mensajes de advertencia ante posibles fallos durante

la generación o administración de la caché:

$PHPTHUMB_CONFIG[‘cache_directory’]

ICOBMPGIF

phpThumb()

PNGJPEG

FormatosImageMagickBMPGIFPNGJPEG

$PHPTHUMB_CONFIG[‘cache_disable_warning’]


PHP DESDE CERO 13

www.redusers.com

• Número de subdirectorios admitidos para organizar y almacenar

los archivos de la caché:

• Eliminar imágenes almacenadas en la caché que no hayan sido

utilizadas en los X días posteriores al último acceso (null para

nunca eliminar):

• Tamaño máximo de la caché (en bytes):

• Número máximo de archivos en la caché:

• Directorio temporal (null para autodetectar y utilizar el directorio

temporal del sistema):

• Formato de salida predeterminado (JPEG, PNG o GIF):

$PHPTHUMB_CONFIG[‘cache_directory_depth’]

$PHPTHUMB_CONFIG[‘cache_maxage’] = 86400 * X;

$PHPTHUMB_CONFIG[‘cache_maxsize’]

$PHPTHUMB_CONFIG[‘cache_maxfi les’]

$PHPTHUMB_CONFIG[‘temp_directory’]

$PHPTHUMB_CONFIG[‘output_format’]



www.redusers.com

JpGraph para lageneración de gráfi cos

JpGraph es una librería orientada a objetos, que permite la genera-

ción de gráfi cos, casi siempre de tipo estadístico.

La cantidad de opciones de confi guración relativas a la visualización

de gráfi cos es inmensa y se detallan de manera clara y precisa en el

manual de la aplicación, que incluye centenares de ejemplos prácticos

de uso. Está disponible para todas las versiones de PHP y requiere que

se habilite la extensión GD, cuyo objetivo es, como hemos visto, la ge-

neración de imágenes (la versión instalada en el servidor puede ir des-

de la 1.8 hasta la 2 y superiores).

En el momento de descargar JpGraph (http://jpgraph.net/download),

deberemos optar por una de las dos distribuciones: la defi nida para

PHP 4 o la disponible para PHP 5 y superiores.

Una vez descargada la librería, descomprimimos el archivo corres-

pondiente y copiamos el directorio src (que contiene las clases) a un

lugar accesible por las demás páginas. Para utilizar JpGraph, tenemos

que incluir en nuestras páginas el archivo jpgraph.php:

include “jpgraph/jpgraph.php”;

Los gráfi cos generados a partir de JpGraph son, en defi nitiva, archivos de formatos

conocidos y populares, y pueden ser incluidos en documentos PDF (PHP brinda libre-

rías especiales para crear esta clase de archivos), por ejemplo, para generar reportes

profesionales y personalizados por el propio desarrollador de la aplicación.

EXPORTACIÓN DE GRÁFICOS


PHP DESDE CERO 15

www.redusers.com

Luego, debemos agregar referencias a archivos que contienen las clases

correspondientes al tipo de gráfi co elegido, como veremos a continuación.

Entre los tipos de gráfi cos soportados es posible mencionar:

• Lineales

• Barra

• Torta

• Anillo

• Mapas HTML

• Gráfi cos polares

• Radar

• Diagramas de Gantt

• Texto (por ejemplo,

para generar imágenes CAPTCHA)

• Figuras

• Leds

• Código de barras

• Rosa de los vientos

• Velocímetros

• Puntos

En cuanto al licenciamiento, JpGraph nos ofrece una versión gratuita

y otra paga, que agrega ciertas funcionalidades a la primera, entre las

que podemos citar:

• Tratamiento de códigos de barra.

• Gráfi cos tipo velocímetro.

• Gráfi cos tipo rosa de los vientos.

• Generación de tablas anexas para enumerar los datos ilustrados.

Como podemos observar, las diferencias no son tantas, y la versión base

debería permitirnos llevar a cabo la mayoría de los objetivos incluidos en un

desarrollo profesional. Podemos obtener más información acerca de JpGraph,

JPGRAPH ES

UNA LIBRERÍA QUE

PERMITE GENERAR

GRÁFICOS

ESTADÍSTICOS



www.redusers.com

incluyendo una gran cantidad de ejemplos de utilización, en su sitio web

ofi cial: http://jpgraph.net.

El gráfi co generado podrá ser PNG, GIF (siempre y cuando la versión

de GD componga este tipo de formato) o JPG, por defecto en ese orden

de prioridad. Si necesitamos defi nir otro orden, modifi camos la constante

DEFAULT_GFORMAT del archivo jpg-confi g.inc.php:

Este documento contiene múltiples opciones de confi guración, aun-

que los valores de manera predeterminada deberían funcionar para la

mayoría de los usuarios.

Los distintos tipos de gráfi cos mantienen propiedades y métodos

comunes, entre los que podemos citar:

PROPIEDADES Y MÉTODOS DE LOS GRÁFICOS

▼ PROPIEDAD ▼ DESCRIPCIÓN

Title Título del gráfi co.

Subtitle Subtítulo del gráfi co.

Subsubtitle Segundo subtítulo del gráfi co.

Legend Leyenda.

▼ MÉTODO ▼ DESCRIPCIÓN

Add Se utiliza para añadir un elemento al gráfi co.

SetMargin Defi ne el margen del gráfi co.

SetMarginColor Defi ne el color del margen del gráfi co.

DEFINE(“DEFAULT_GFORMAT”, “jpg”);


PHP DESDE CERO 17

www.redusers.com

PROPIEDADES Y MÉTODOS DE LOS GRÁFICOS

SetColor Defi ne el color del gráfi co.

SetBox Defi ne si el gráfi co estará encerrado en una caja.

SetShadow Permite asignar una sombra al gráfi co.

SetGridDepth Agrega líneas encima del gráfi co o debajo de él.

SetAngle Defi ne el ángulo de inclinación del gráfi co.

SetBackgroundImage Incluye una imagen de fondo al gráfi co generado.

SetAxisStyle Defi ne el estilo de los ejes horizontales y verticales.

Tabla 2. Descripción de las propiedades y métodos disponiblesde los gráfi cos generados.

A continuación, veremos cómo generar y personalizar algunos de los

gráfi cos disponibles a través de JpGraph.

Gráfi cos linealesQuizás es uno de los tipos más utilizados y de los más simples de im-

plementar mediante JpGraph. Lo primero que debemos hacer es incluir los

Una de las dudas más frecuentes a la hora de analizar una aplicación web es cómo mostrarle

la información generada al usuario. JpGraph es una valiosa opción en este contexto, ya que

permite, de manera sencilla, generar gráfi cos intuitivos para exponer los datos almacenados.

FINES

(CONTINUACIÓN)



www.redusers.com

archivos jpgraph.php (que sirve de base para la generación de los distintos

tipos de gráfi cos) y jpgraph_line.php (específi co para los lineales):

Luego, creamos un objeto de tipo Graph que actúa a modo de contene-

dor de los diferentes gráfi cos y recibe como argumentos el ancho de la

imagen por generar, el alto y el formato del archivo:

Una opción que debemos defi nir es el tipo de escala por utilizar en los

ejes: lineal (lin), logarítmica (log), textual (text) o entera (int). La única que

no está disponible para ambos ejes es la textual (solo para X). Mediante el

método SetScale, indicamos la escala uniendo las constantes; la primera

es para el eje X y la segunda, para el Y:

El método admite cuatro argumentos más, todos ellos opcionales:

mínimo y máximo del eje Y, y mínimo y máximo del eje X.

Siguiendo con el ejemplo, generamos un objeto LinePlot (que recibe

como argumento un array de datos) que será luego agregado al gráfi co:

include ‘jpgraph/jpgraph.php’;

include ‘jpgraph/jpgraph_line.php’;

$grafi co = new Graph(450, 250, “auto”);

$grafi co->SetScale(“textlin”);

$datos = array(10, 12, 3, 14, 21, 13);$linea = new LinePlot($datos);$grafi co->Add($linea);


PHP DESDE CERO 19

www.redusers.com

Por último, enviamos la salida al navegador mediante el método Stroke:

Podemos devolver el gráfi co generado a un archivo (esto es válido para

todas las clases de gráfi cos):

Además de las ya vistas en el ejemplo anterior, existen muchísimas otras

opciones para confi gurar el aspecto de un gráfi co. Por ejemplo, el método Set-

Margin aplicado sobre la propiedad img del contenedor nos permite establecer

el margen del gráfi co (izquierda, derecha, superior e inferior, en ese orden):

También podemos utilizar el método SetShadow para darle una sombra

al contenedor del gráfi co. Recibe como argumentos true (valor predetermi-

nado, para mostrar el sombreado), ancho (en pixeles) y color (un array que

contiene los valores RGB). Todos son opcionales:

A través de las propiedades xaxis e yaxis, es posible acceder a los ejes

del gráfi co y modifi car sus características, por ejemplo:

$grafi co->Stroke();

$grafi co->Stroke(‘imagenes/grafi co.png’);

$grafi co->img->SetMargin(45, 10, 10, 45);

$grafi co->SetShadow(true, 2, array(23,12,55));

$grafi co->xaxis->title->Set(“tituloeje x”);

$grafi co->yaxis->title->Set(“titulo eje y”);



www.redusers.com

Con SetColor, defi nimos el color de la línea (formato hexadecimal) y,

con SetLegend, el título de referencia a ella:

El método SetFormat establece un formato para los valores, permitiendo

defi nir la cantidad de decimales o los enteros por visualizar, por ejemplo:

Para que esto tenga efecto, debemos indicar que los valores serán exhibi-

dos, lo que es posible lograr a través del método Show de la propiedad value:

El método setFont admite tres argumentos: tipo de fuente, estilo y tamaño:

Entre las fuentes predeterminadas se encuentran:

$linea->SetColor(“#FF0000”);

$linea->SetLegend(“Leyenda aqui”);

$linea->value->SetFormat(“%0.2f”);

$linea->value->Show();

$grafi co->title->SetFont(FF_VERDANA, FS_BOLD, 10);

GD no es una extensión ligada a un formato específi co o a alguna versión del lenguaje en par-

ticular. Por el contrario, trata de incluir más y más opciones en cada nueva versión disponible.

APERTURA


PHP DESDE CERO 21

www.redusers.com

FUENTES PREDETERMINADAS PARA UN GRÁFICO LINEAL

▼ CONSTANTE ▼ FUENTE

FF_ARIAL Arial

FF_TIMES Times Roman

FF_COURIER Courier New

FF_VERDANA Verdana

FF_BOOK Bookman

FF_HANDWRT Handwriting

FF_COMIC Sans Comic

Tabla 3. Constantes para defi nir el tipo de fuente.

Y entre los estilos para modifi car el comportamiento por defecto de las fuen-

tes, tenemos los siguientes:

ESTILOS DE FUENTE PARA UN GRÁFICO LINEAL

▼ CONSTANTE ▼ DESCRIPCIÓN

FS_NORMAL Normal

FS_BOLD Negrita

FS_ITALIC Itálica

FS_BOLDITALIC Itálica y negrita

Tabla 4. Constante para defi nir el estilo de la fuente.



www.redusers.com

Es posible incluir más constantes para personalizar la fuente incluida

en los gráfi cos. Podemos obtener información acerca de cómo instalar

juegos de caracteres adicionales, en el manual ofi cial y en la dirección

http://jpgraph.net/doc.

El método SetType nos permite personalizar los puntos remarcados

en las líneas del gráfi co:

Algunas de las constantes defi nidas para personalizar los puntos

remarcados en las líneas de gráfi cos son las siguientes:

PERSONALIZACIÓN DE PUNTOS REMARCADOS

▼ CONSTANTE ▼ DESCRIPCIÓN

MARK_SQUARE Cuadrado.

MARK_UTRIANGLE Triángulo con la punta hacia arriba.

MARK_DTRIANGLE Triángulo con la punta hacia abajo.

MARK_DIAMOND Rombo.

MARK_CIRCLE Círculo vacío.

MARK_FILLEDCIRCLE Círculo relleno.

MARK_CROSS Cruz; signo suma.

MARK_STAR Asterisco.

MARK_X Cruz; signo multiplicación.

$linea->mark->SetType(MARK_UTRIANGLE);


PHP DESDE CERO 23

www.redusers.com

PERSONALIZACIÓN DE PUNTOS REMARCADOS

MARK_LEFTTRIANGLE Triángulo con la punta hacia la izquierda.

MARK_RIGHTTRIANGLE Triángulo con la punta hacia la derecha.

MARK_FLASH Rayo.

Tabla 5. Constante para defi nir el estilo de los puntos remarcados.

Es posible incluir más de una línea en un mismo gráfi co:

<?php

include ‘jpgraph/jpgraph.php’;

include ‘jpgraph/jpgraph_line.php’;

$datosLinea1 = array(2, 4, 5, 7.2, 9, 1);

$datosLinea2 = array(2, 3.2, 4, 5, 2, 1);

$grafi co = new Graph(500, 300, “auto”);


$linea1 = new LinePlot($datosLinea1);

$linea1->SetColor(“#66CC00”);

$linea1->value->Show();

$linea1->value->SetFormat(“%0.1f”);

$linea1->SetLegend(“Linea 1”);

$grafi co->Add($linea1);

$linea2 = new LinePlot($datosLinea2);

$linea2->SetColor(“#FF6666”);

$linea2->value->Show();

(CONTINUACIÓN)



www.redusers.com

Los gráfi cos de líneas permiten representar información de manera

sencilla y personalizable, son una opción válida a la hora de implementar

maneras alternativas de presentación de datos en aplicaciones web.

Gráfi cos de barraOtro de los tipos de gráfi cos comúnmente utilizados para representar

situaciones en aplicaciones web es el de barras. Para implementarlos me-

diante JpGraph, contamos con la clase BarPlot, que recibe como argumento

un array de datos, al igual que LinePlot:

Lo primero que debemos hacer antes de instanciar la clase será incluir los

archivos correspondientes para trabajar barras (jpgraph.php y jpgraph_bar.php):

$barra = new BarPlot($datos);

include (“jpgraph/jpgraph.php”);

include (“jpgraph/jpgraph_bar.php”);

$linea2->value->SetFormat(“%0.1f”);

$linea2->SetLegend(“Linea 2”);

$grafi co->Add($linea2);

//leyenda en sentido horizontal

$grafi co->legend->SetLayout(LEGEND_HOR);

$grafi co->Stroke(‘imagen.png’);

?>


PHP DESDE CERO 25

www.redusers.com

Luego, generamos un contenedor a través de la clase Graph:

Y defi nimos la escala, al igual que en los ejemplos anteriores,

con el método SetScale:

Asignamos valores a algunas de las propiedades generales admitidas

por la mayoría de los gráfi cos, en este caso título, leyenda del eje X

y leyenda del eje Y:

Defi nimos la fuente de datos y la pasamos como argumento al cons-

tructor de la clase BarPlot:

Los objetos de esta clase tienen sus propios métodos disponibles,

entre los que podemos citar los siguientes:

• SetLegend: defi ne la leyenda o el título para especifi car de manera

textual qué es lo que se está midiendo.

$grafi co = new Graph(300, 200, ‘auto’);


$grafi co->title->Set(“Titulo del grafi co”);

$grafi co->yaxis->title->Set(“Y”);

$grafi co->xaxis->title->Set(“X”);

$datos = array(24, 12, 11, 15, 3, 14);




www.redusers.com

:

• SetFillColor: nos permite asignar un color a las barras del gráfi co.

• SetAbsWidth: recibe como argumento el número de pixeles de ancho

de cada una de las columnas.

• Opcionalmente, podemos utilizar SetWidth, que defi ne el ancho con

relación al espacio disponible (por ejemplo 90%):

• El método Show aplicado a la propiedad value indica que los valores

de cada columna serán exhibidos (este no es el comportamiento

predeterminado).

$barra->SetLegend(“Valores”);

$barra->SetFillColor(“#FFCC33”);

$barra->SetAbsWidth(30);

$barra->SetWidth(“0.9”);

PHP no cuenta con un generador de reportes verdaderamente popular y afi anzado, sin

embargo, mantiene una serie de herramientas que se pueden utilizar en conjunto para

generarlos. Una de ellas puede ser, sin dudas, JpGraph y otra, FPDF, que permite la

generación de documentos en formato PDF.

REPORTES


PHP DESDE CERO 27

www.redusers.com

• En el mismo sentido, podemos establecer el color de la fuente:

• Defi nimos la alineación vertical a través del método SetValuePos, cuyos

posibles valores son top, middle y bottom.

• Por último, añadimos la barra al contenedor y enviamos el gráfi co

al navegador para poder visualizarlo:

• En lugar de SetFillColor, podemos agregar contraste al color de las barras

mediante SetFillGradient, que recibe como argumentos los valores hexade-

cimales de los colores componentes (o un nombre reconocido por JpGraph)

y un estilo defi nido mediante alguna de las constantes disponibles:

• GRAD_CENTER

• GRAD_HOR

• GRAD_LEFT_REFLECTION

• GRAD_MIDHOR

• GRAD_MIDVER

• GRAD_RAISED_PANEL

• GRAD_RIGHT_REFLECTION

$barra->value->Show();

$barra->value->SetColor(‘#000000’);

$barra->SetValuePos(‘bottom’);

$grafi co->Add($barra);

$grafi co->Stroke();



www.redusers.com

• GRAD_VER

• GRAD_WIDE_MIDHOR

• GRAD_WIDE_MIDVER

Por ejemplo:

Este tipo de gráfi co permite variantes, como la inclusión de múltiples ba-

rras una sobre otra o alineadas a través de las clases GroupBarPlot y AccBarPlot.

Gráfi cos de tortaLos gráfi cos de este tipo se generan incluyendo los archivos jpgraph_pie.php

y jpgraph_pie3d.php y, en lugar de la clase Graph, se toma como base a PieGraph:

• index.html

• grafi co.php

$barra->SetFillGradient(“#FFFF00”, “#993333”, GRAD_VER);

<html>

<head>

<title>grafi cos con jpgraph</title>

</head>

<body><imgsrc=”grafi co.php” border=”0” /></body>

</html>

<?php

include “jpgraph/jpgraph.php”;


PHP DESDE CERO 29

www.redusers.com

include “jpgraph/jpgraph_pie.php”;include “jpgraph/jpgraph_pie3d.php”;

$datos[] = 10;$datos[] = 30;$datos[] = 32;$datos[] = 15;

$leyendas[] = “2007”;$leyendas[] = “2008”;$leyendas[] = “2009”;$leyendas[] = “2010”;

$grafi co = new PieGraph(350, 240, “auto”);$grafi co->SetMarginColor(‘#CCCC99’);$grafi co->SetShadow();$grafi co->title->Set(“Titulo del grafi co”);

$torta = new PiePlot3D($datos);$torta->SetSize(0.5);$torta->SetCenter(0.40);$torta->SetLabelPos(0.45);$torta->SetLegends($leyendas);

$torta->value->SetFont(FF_FONT2, FS_NORMAL);$torta->value->SetColor(“#FFFFFF”);

$grafi co->Add($torta);$grafi co->Stroke();

?>



www.redusers.com

El constructor PiePlot3D recibe como argumento un array que deberá

contener los datos por grafi car (no porcentajes, sino valores).

El método SetSize especifi ca el tamaño de la torta y puede tomar

valores entre 0 y 0.5:

Por su parte, SetCenter defi ne la posición con relación al contenedor (0.5

para ubicarla en el centro):

El método SetLabelPos establece la distancia entre cada título de cada

porción y el centro:

Otra opción disponible es ExplodeAll, que nos permite separar las por-

ciones de la torta agregando un margen intermedio:

$torta->SetSize(0.5);

$torta->SetCenter(0.40);

$torta->SetLabelPos(0.45);

El comportamiento predeterminado de la mayoría de las aplicaciones que generan imáge-

nes a partir de otras ya existentes consiste en enviar la salida directamente al navegador,

por lo que debemos tener la precaución de no imprimir ninguna información antes, para no

interferir el procesamiento por parte del cliente.

REDIRECCIÓN DE LA SALIDA


PHP DESDE CERO 31

www.redusers.com

Al generar el gráfi co, los valores pasados como argumento a PiePlot3D

se convierten en porcentajes.

AnillosEstos gráfi cos son una variación de los de torta y se implementan

de manera similar. En primer lugar, debemos utilizar la clase PiePlotC

en lugar de PiePlot3D:

$torta->ExplodeAll();

<?php

include “jpgraph/jpgraph.php”;include “jpgraph/jpgraph_pie.php”;include “jpgraph/jpgraph_pie3d.php”;

$datos[] = 10;$datos[] = 30;$datos[] = 32;$datos[] = 15;

$leyendas[] = “2007”;$leyendas[] = “2008”;$leyendas[] = “2009”;$leyendas[] = “2010”;

$grafi co = new PieGraph(350, 240, “auto”);$grafi co->SetMarginColor(‘#CCCC99’);$grafi co->SetShadow();$grafi co->title->Set(“Titulo del grafi co”);

$anillo = new PiePlotC($datos);



www.redusers.com

Un método adicional de utilidad es SetMidColor, que permite defi nir

el color de fondo del círculo central del anillo:

Si este valor es igual al de SetMarginColor, el fondo del gráfi co quedará

establecido con un color uniforme.

LedsEn este contexto, un led podría defi nirse como una serie de puntos

iluminados que contrastan con los demás, formando caracteres. Fueron

incluidos recientemente en las últimas versiones de la librería. Los signos

soportados para incluir en esta clase de gráfi cos son:

• Numéricos (del 0 al 9).

• Puntos (.).

• Espacios ( ).

$anillo->SetMidColor(‘#CCCC99’);

$anillo->SetSize(0.4);$anillo->SetCenter(0.40);$anillo->SetLabelPos(0.75);$anillo->SetLegends($leyendas);

$anillo->value->SetFont(FF_FONT2, FS_NORMAL);$anillo->value->SetColor(“#FFFFFF”);

$grafi co->Add($anillo);$grafi co->Stroke();

?>


PHP DESDE CERO 33

www.redusers.com

• Numerales (#).

• Letras mayúsculas (de la A a la L).

Inicialmente, debemos incluir el archivo jpgraph_led.php y generar un

objeto DigitalLED74 (que recibe como argumentos opcionales el radio,

de manera predeterminada es 2, y el margen, por defecto es 0.6):

El método Stroke, en este caso, recibe como argumento el texto por generar:

Además, podemos incorporar como segundo argumento una constante

que representa el color del texto generado:

• LEDC_RED (rojo)

• LEDC_GREEN (verde)

• LEDC_BLUE (azul)

• LEDC_YELLOW (amarillo)

• LEDC_GRAY (gris)

$led = new DigitalLED74();

$led->Stroke(rand(1000000000, 900000000));

JpGraph es un claro ejemplo de una aplicación que utiliza librerías externas para

funcionar (GD), pero que, sin embargo, se ha sabido ganar un nombre propio y un

prestigio en relación con los desarrolladores de aplicaciones que necesitan incorpo-

rar gráficos estadísticos en sus programas.

MÉRITOS PROPIOS



www.redusers.com

Figura 5. El soporte para leds se incluyó recién en las últimas versionesde JpGraph y está en pleno proceso de desarrollo.

CAPTCHALas imágenes CAPTCHA (Completely Automated Public Turing test totell

Computers and Humans Apart, prueba pública y automática para diferenciar

máquinas y humanos) se utilizan para comprobar si quien está manejando

una determina computadora es un ser humano o un robot.

Muestran una cadena de caracteres que el usuario debe ingresar en una caja

de texto para acceder a cierto servicio de una página web (descarga de un

archivo, etcétera). Si es un ser humano, podrá hacerlo con éxito.

JpGraph incluye una implementación sencilla y potente para, en pocas

líneas de código, generar aplicaciones funcionales. El archivo que debemos

incluir en este caso es jpgraph_antispam.php:

Y luego inicializar un objeto AntiSpam:

$led->Stroke(‘DIA #1’, LEDC_GREEN);

include “jpgraph/jpgraph_antispam.php”;

$spam = new AntiSpam();


PHP DESDE CERO 35

www.redusers.com

La cadena de caracteres contenida en la imagen puede ser defi nida de

dos maneras: al azar (mediante el método Rand que recibe como argumen-

to la longitud del texto) o de forma predeterminada (a través del método

Set que recibe como argumento el string):

En cualquier caso y para comparar lo que ingresa el usuario con lo

que dice la imagen, será necesario guardar el contenido (en una variable

de sesión, por ejemplo):

Por último, imprimimos la imagen generada:

$spam->Rand($longitud);

$spam->Set($cadena);

session_start();

$_SESSION[‘cadena’] = $spam->Rand($longitud);

session_start();

$_SESSION[‘cadena’] = $spam->Set($cadena);

Los datos grafi cados a partir de la librería JpGraph pueden ser de origen variado.

La única condición que requieren es poder representarse a través de arrays (matrices)

PHP, algo que por supuesto de ningún modo es un inconveniente y que podemos ge-

nerar dentro de la aplicación antes de invocar a la librería.

ORIGEN DE LOS DATOS



www.redusers.com

Suponiendo que lo anterior se almacenara dentro de un archivo llama-

do grafi co.php, en el formulario de ingreso compararíamos el texto enviado

por el usuario con lo almacenado en la variable cadena:

$spam->Stroke();

<?php

session_start();

if (count($_POST)) {if ($_SESSION[‘cadena’] == $_POST[‘texto’]) {die (‘<li>Ingreso correcto’); } else {echo ‘<li>Error en ingreso’; }}

echo ‘<br /><imgsrc=”grafi co.php”>’;

echo ‘<form method=”post”>’;echo ‘<input type=”text” name=”texto” id=”texto”>’;echo ‘<input type=”submit”>’;echo ‘</form>’;

?>

Es enorme la cantidad de opciones puestas a disposición del desarrollador para modifi car

la apariencia o el comportamiento de un gráfi co generado con JpGraph.

OPCIONES DISPONIBLES


PHP DESDE CERO 37

www.redusers.com

Figura 6.El soporte para generarimágenes CAPTCHA propuestopor JpGraph es sencillode implementar y a la vezmuy potente.

Mapas HTMLUn mapa HTML sirve para ligar partes de una imagen a diferentes

acciones (enlaces a distintas páginas o archivos, por ejemplo). En JpGraph,

es posible crear este tipo de elementos que se diferencian del resto de los

gráfi cos, principalmente, porque se genera no solo el archivo correspon-

diente a la imagen, sino un fragmento HTML que deberá ser incluido.

Es posible incluir más de un mapa en una misma página. Suponiendo que

lo generemos desde mapa.php, se invocaría de la siguiente manera:

• index.php

El contenido de mapa.php no difi ere en cuanto a lo que sería habitual en

la creación de gráfi cos: las únicas diferencias son la utilización de los mé-

todos SetCSIMTargets y StrokeCSIM. Cada elemento del mapa necesita dos

valores (un enlace válido y un título) que se asignan mediante el método

<html>

<head>

<title>jpgraph - mapa</title>

</head>

<body><?php include ‘mapa.php’; ?></body>

</html>



www.redusers.com

SetCSIMTargets. En lugar de Stroke, utilizamos el método StrokeCSIM,

que debe recibir el nombre del archivo actual:

<?php

include (“jpgraph/jpgraph.php”);include (“jpgraph/jpgraph_bar.php”);

$grafi co = new Graph(500, 200, ‘auto’);

for ($c=0;$c<12;$c++) {$enlaces[$c] = ‘/detalle.php?mes=’.($c+1); $titulos[$c] = ‘Mes numero ‘.($c+1); $datos[$c] = rand(0, 100);}


$grafi co->title->Set(“Titulo del grafi co”);$grafi co->yaxis->title->Set(“Y”);$grafi co->xaxis->title->Set(“X”);


$barra->SetLegend(“Valores”);

$barra->SetFillGradient(‘yellow’, ‘white’, GRAD_VER);

$barra->SetWidth(“0.9”);

$barra->value->Show();

$barra->value->SetFormat(“%0.0f”);

$barra->value->SetColor(‘#000000’);


PHP DESDE CERO 39

www.redusers.com

El código fuente de index.html contiene el mapa HTML incrustado en el

contenido. El gráfi co se genera utilizando valores aleatorios, por lo cual

la salida será diferente en cada ejecución.

Utilización de gráfi cos en la cachéEn ocasiones, los gráfi cos generados por un script no varían de manera

dinámica, por lo que invocar su creación a través de las clases y los méto-

dos disponibles a partir de JpGraph consume recursos innecesariamente.

Para administrar el uso de la caché de gráfi cos, existen las constantes

USE_CACHE (habilitar la memoria caché), READ_CACHE (utilizar los gráfi cos

que están en la caché) y CACHE_DIR (ruta absoluta a un directorio tempo-

ral, que debe contar con permisos de escritura), todas disponibles en el

archivo jpg-confi g.php:

Si la caché está habilitada, podremos utilizarla incluyendo dos argu-

mentos en el constructor del objeto correspondiente al contenedor:

DEFINE(“USE_CACHE”, true);

DEFINE(“READ_CACHE”, true);

DEFINE(“CACHE_DIR”, “/imagenes/cache/”);

$barra->SetValuePos(‘bottom’);

$barra->SetCSIMTargets($enlaces, $titulos);

$grafi co->Add($barra);

$grafi co->StrokeCSIM(‘mapa.php’);

?>



www.redusers.com

El tercer argumento es el nombre de la imagen en el directorio temporal

(por ejemplo, grafi co.png), y el cuarto es el tiempo en minutos antes de actua-

lizar la imagen (0 para no actualizar nunca). Si la variable nombreImagenCache

es igual a auto, se utilizará como nombre de imagen el nombre del script

más la extensión que corresponda. Por ejemplo, si el gráfi co se genera desde

la página grafi co.php, el archivo almacenado se llamará grafi co.png, si es que

utilizamos PNG como formato. Si la imagen no se encuentra disponible en la

caché, se ejecuta el script correspondiente para generarla.

En el caso de los mapas, deberemos invocar el método CheckCSIMCache,

que recibe como argumentos nombreImagenCache y tiempoExpiracion:

$grafi co = new Graph($ancho, $alto, $nombreImagenCache, $tiempoExpiracion);

$grafi co = new Graph($ancho, $alto);

$grafi co->CheckCSIMCache($nombreImagenCache, $tiempoExpiracion);

//código

$grafi co->StrokeCSIM();

PNG (Portable Network Graphics o PNG is Not GIF) es un formato cada vez más

popular, impulsado por la comunidad de código abierto como alternativa a GIF.

Admite la posibilidad de crear imágenes con transparencia, algo que, en su momen-

to, caracterizaba únicamente a GIF.

EL FORMATO PNG


PHP DESDE CERO 41

www.redusers.com

En cuanto a las constantes, contamos con CSIMCACHE_DIR, similar a

CACHE_DIR, pero exclusivo para mapas:

Recordemos siempre que la ruta deberá ser absoluta y que el directorio

tendrá que contar con permisos de lectura y escritura.

Las opciones brindadas por JpGraph son casi infi nitas y, en cada nueva

versión, se agregan más y más características que perfeccionan lo que ya

se ofrecía o dan nuevas alternativas a la hora de generar gráfi cos. Se trata,

sin dudas, de una herramienta de nivel profesional.

DEFINE(“CSIMCACHE_DIR”, “/imagenes/cache/mapas/”);

En este apéndice, analizamos en detalle algunas de las principales aplicaciones que

hacen uso de la librería GD para generar y manipular diferentes tipos de imágenes

(como por ejemplo: gráficos, mapas HTML, imágenes CAPTCHA, entre otras) desde

PHP: phpThumb, JpGraphe Image_Graph.

RESUMEN



www.redusers.com

TEST DE AUTOEVALUACIÓN

1 ¿Por qué considera que GD es tan popular?

2 ¿Utiliza directamente la extensión GD en sus desarrollos? ¿Por qué?

3 ¿Por qué algunas versiones de GD no soportan el formato GIF?

4 ¿En qué casos utilizaría la caché para almacenar imágenes?

5 ¿Cuál es el estado actual de la extensión GD?

EJERCICIOS PRÁCTICOS

1 Genere un álbum fotográfi co utilizando phpThumb.

2 Desarrolle un buscador de imágenes con phpThumb.

3 Implemente una encuesta en línea y grafi que los resultados parciales y fi nales con JpGraph.

4 Modifi que la aplicación anterior utilizando Image_Graph en lugar de JpGraph.

Si tiene alguna consulta técnica relacionada con el contenido, puede contactarse

con nuestros expertos: [email protected].

PROFESOR EN LÍNEA

Actividades


Documents

Generación de gráficospremium.redusers.com.s3.amazonaws.com/LIBROS/PHP desde... · 2014-05-22 · Algunos de los formatos más popula- ... Entre los atributos más importantes puestos