junio 18, 2009 11

Gráficos en PHP con JpGraph. Parte II.

By in Librerías, PHP

Hoy vamos a ver como crear gráficos de barras. Empecemos con un sencillo ejemplo:

<?php
// Evita que se vean los errores
error_reporting(0);
include("include/jpgraph.php");
include("include/jpgraph_bar.php");
$datos1 = array(9, 5, 12, 11, 6, 10, 9, 11, 10, 4, 7, 3);
$grafico = new Graph(400, 300, "auto");
$grafico->SetScale("textlin");
$grafico->title->Set("Ejemplo JpGraph");
$grafico->xaxis->title->Set("Eje X");
$grafico->yaxis->title->Set("Eje Y");
$barplot1 = new BarPlot($datos1);
$barplot1->SetColor("red");
$barplot1->SetFillColor("red");
$grafico->Add($barplot1);
$grafico->Stroke();
?>

El gráfico quedaría tal cual:

Cuarto ejemplo con JpGraph

En este caso hemos usado la clase BarPlot, en lugar de la LinePlot de los anteriores ejemplos, para generar el gráfico de barras. En esta ocasión vemos que se llama a un método de la clase BarPlot llamado SetFillColor. Este método se usa para asignar el color de fondo de las barras. Existe otro método llamado SetFillGradient que nos permite realizar el relleno de las barras mediante un gradiente. Podemos también controlar el ancho de las barras con el método SetWidth. Vamos a ver esto último con un ejemplo:

<?php
// Evita que se vean los errores
error_reporting(0);
include("include/jpgraph.php");
include("include/jpgraph_bar.php");
$datos1 = array(9, 5, 12, 11, 6, 10, 9, 11, 10, 4, 7, 3);
$grafico = new Graph(400, 300, "auto");
$grafico->SetScale("textlin");
$grafico->title->Set("Ejemplo JpGraph");
$grafico->xaxis->title->Set("Eje X");
$grafico->yaxis->title->Set("Eje Y");
$barplot1 = new BarPlot($datos1);
$barplot1->SetColor("red");
// Un gradiente Horizontal de rojo a azul
$barplot1->SetFillGradient("red", "blue", GRAD_HOR);
// 25 pixeles de ancho para cada barra
$barplot1->SetWidth(25);
$grafico->Add($barplot1);
$grafico->Stroke();
?>

El gráfico sería:

Quinto ejemplo con JpGraph

También podemos combinar gráficos, como por ejemplo uno de barras con uno de lineas, como en el ejemplo siguiente:

<?php
// Evita que se vean los errores
error_reporting(0);
include("include/jpgraph.php");
include("include/jpgraph_bar.php");
include("include/jpgraph_line.php");
$datos1 = array(9, 5, 12, 11, 6, 10, 9, 11, 10, 4, 7, 3);
$datos2 = array(5, 7, 1, 11, 13, 4, 9, 6, 12, 7, 1, 4);
$grafico = new Graph(400, 300, "auto");
$grafico->SetScale("textlin");
$grafico->title->Set("Ejemplo JpGraph");
$grafico->xaxis->title->Set("Eje X");
$grafico->yaxis->title->Set("Eje Y");
$barplot1 = new BarPlot($datos1);
$barplot1->SetColor("red");
// Un gradiente Horizontal de rojo a azul
$barplot1->SetFillGradient("red", "blue", GRAD_HOR);
// 25 pixeles de ancho para cada barra
$barplot1->SetWidth(25);
$lineplot = new LinePlot($datos2);
$lineplot->SetColor("green");
$lineplot->SetWeight(2);
$grafico->Add($barplot1);
$grafico->Add($lineplot);
$grafico->Stroke();
?>

Que quedaría de la siguiente manera:

Sexto ejemplo con JpGraph

Con esto es todo por hoy. Para finalizar y por no faltar a la costumbre os dejo aquí los archivos con los ejemplos del artículo:

Ejemplos con JpGraph. Parte II.

ACTUALIZACIÓN 2012-12-05

Se ha añadido al código una linea de código que desactiva el reporte de errores de PHP. Esto se debe a que la versión de jpGraph para PHP 4 produce errores en versiones de PHP 5, que provocan que las imágenes generadas no se vean bien.

Todos los ejemplos de este artículo y de los demás artículos sobre jpGraph los podéis encontrar en gitHub, en el siguiente repositorio:

https://github.com/mjcarrascosa/jpGraphDemo

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

junio 17, 2009 4

Tutorial de TinyMCE. Parte III.

By in JavaScript, Librerías

Hoy vamos a ver dos propiedades muy interesantes para extender los diálogos de enlaces y de imágenes. Estas propiedades son external_link_list_url y external_image_list_url. Estas propiedades nos permiten añadir a los diálogos una lista de enlaces y de imágenes en un archivo externo. Este archivo contendrá código en JavaScript donde se define un array con los enlaces y las imágenes. Veamos como quedaría el código de nuestro quinto ejemplo:

ejemploTinyMCE_5.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Quinto ejemplo con TinyMCE</title>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ejemploTinyMCE_5.js"></script>
<style>
#editor { width: 700px; height: 550px;}
</style>
</head>
<body onload="cargarTinyMCE();">
<h1>Quinto ejemplo con TinyMCE</h1>
<textarea id="editor"></textarea><br/>
</body>
</html>

ejemploTinyMCE_5.js:

function cargarTinyMCE()
{
	tinyMCE.init({
		mode : "exact",
		elements: "editor",
		theme : "advanced",
		plugins: "fullscreen, advlink",
		theme_advanced_buttons1 : "bold, italic, underline, separator, justifyleft, justifycenter, justifyright, justifyfull ",
		theme_advanced_buttons2 : "bullist,numlist,separator,outdent,indent,separator,undo,redo",
		theme_advanced_buttons3 : "image, link, fullscreen",
		theme_advanced_toolbar_location: "top",
		theme_advanced_toolbar_align: "left",
		external_link_list_url: "ejemploTinyMCE_5_links.js",
		external_image_list_url: "ejemploTinyMCE_5_images.php"
	});

  }

Se puede observar que se han añadido las dos opciones mencionadas. También vemos que en el caso de external_image_list_url se ha puesto como valor un archivo PHP. Esto es así porque se puede generar esta lista a partir de un script PHP, dando de este modo un número infinito de posibilidades. Esto también se puede hacer con la opción external_link_list_url. Veamos el código de los archivos:

ejemploTinyMCE_5_links.js:

var tinyMCELinkList = new Array(
	// Nombre, URL
	["Moxiecode", "http://www.moxiecode.com"],
	["mjcarrascosa.com", "http://mjcarrascosa.com"],
	["Google", "http://www.google.com"]
);

En el archivo se define un array llamado tinyMCELinkList. Cada elemento es a su vez un array con dos elementos, el primero el nombre de la URL (el que aparecerá en la lista) y el segundo la URL en si.

ejemploTinyMCE_5_images.php:

<?php

$dir = opendir(dirname(__FILE__).'/images');

$salida = "var tinyMCEImageList = new Array(\n";
$salida.= "//Nombre, URL\n";

$imagenes = array();
while(($imagen = readdir($dir)) != false)
{
	if($imagen != '.' && $imagen != '..')
	{
		$imagenes[] = '["'.$imagen.'", "images/'.$imagen.'"]';
	}
}

$salida .= join(",\n", $imagenes);
$salida .= ');';
header('Content-type: text/javascript');
echo $salida;
?>

Este archivo nos genera un array llamado tinyMCEImageList. En este array cada elemento es también un array con dos elementos, el primero el nombre de la imagen y el segundo la URL de esta. El script lo que hace es buscar todos los archivos de la carpeta images y meterlos en el array. También enviamos la cabecera Content-Type con el valor text/javascript, para que el navegador sepa que lo que recibe es código con JavaScript. El resultado de ejecutar este script es:

var tinyMCEImageList = new Array(
//Nombre, URL
["imagen1.jpg", "images/imagen1.jpg"],
["imagen2.jpg", "images/imagen2.jpg"],
["imagen3.jpg", "images/imagen3.jpg"]);

Con esto termina la tercera parte de este tutorial. Para finalizar el código de los ejemplos:

Ejemplos del tutorial de TinyMCE Parte III

No que decir tiene que cualquier duda se puede preguntar en los comentarios.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,

junio 16, 2009 4

Gráficos en PHP con JpGraph. Parte I

By in Librerías, PHP

JpGraph es una librería que nos permite generar gráficos mediante PHP, de una forma realmente sencilla y bajo nuestro total control. Sus principales características son:

  • Detecta automáticamente que versión del GD.
  • Permite insertar texto a los gráficos y soporte para tipos de letra.
  • Niveles de transparencia.
  • Posibilidad de generar complejos gráficos de Gantt.
  • Manejo de las escalas para los ejes del gráfico.
  • Soporta varios formatos de imágenes: PNG, GIF y JPG.
  • Permite generar gráficas de barras horizontales.
  • Soporte para gráficas de tipo científico.
  • Soporte para generación de escala automática, dependiendo de los datos.
  • Soporta para distintos tipos de relleno para las gráficas.
  • Una excelente documentación.

Vamos a ver un par de ejemplos.

Generación de un gráfico de lineas

Lo primero que vamos a ver es como generar un gráfico de lineas:

<?php
// Evita que se vean los errores
error_reporting(0);
include("include/jpgraph.php");
include("include/jpgraph_line.php");
//Array con los datos del gráfico
$datos = array(9, 5, 12, 11, 6, 10, 9, 11, 10, 4, 7, 3);
// Clase que genera el gráfico de tamaño 400x300
$grafico = new Graph(400, 300, "auto");
$grafico->SetScale("textlin");
// Creamos un juego de datos, del tipo linea
$lineplot = new LinePlot($datos);
$lineplot->SetColor("red");
// Añadimos el juego de datos
$grafico->Add($lineplot);
// Generamos el gráfico
$grafico->Stroke();
?>

Este gráfico quedaría de la siguiente forma:

Primer ejemplo con JpGraph

Podemos tener también varios juegos de datos:

<?php
// Evita que se vean los errores
error_reporting(0);
include("include/jpgraph.php");
include("include/jpgraph_line.php");
$datos1 = array(9, 5, 12, 11, 6, 10, 9, 11, 10, 4, 7, 3);
$datos2 = array(5, 7, 1, 11, 13, 4, 9, 6, 12, 7, 1, 4);
$grafico = new Graph(400, 300, "auto");
$grafico->SetScale("textlin");
$lineplot1 = new LinePlot($datos1);
$lineplot1->SetColor("red");
$lineplot2 = new LinePlot($datos2);
$lineplot2->SetColor("green");
$grafico->Add($lineplot1);
$grafico->Add($lineplot2);
$grafico->Stroke();
?>
<

Este gráfico quedaría de la siguiente manera:

Segundo ejemplo con JpGraph

Podemos además añadir texto al gráfico:

<?php
// Evita que se vean los errores
error_reporting(0);
include("include/jpgraph.php");
include("include/jpgraph_line.php");
$datos1 = array(9, 5, 12, 11, 6, 10, 9, 11, 10, 4, 7, 3);
$datos2 = array(5, 7, 1, 11, 13, 4, 9, 6, 12, 7, 1, 4);
$grafico = new Graph(400, 300, "auto");
$grafico->SetScale("textlin");
// Titulo del gráfico
$grafico->title->Set("Ejemplo JpGraph");
// Etiqueta para el eje X
$grafico->xaxis->title->Set("Eje X");
// Etiqueta para el eje Y
$grafico->yaxis->title->Set("Eje Y");
$lineplot1 = new LinePlot($datos1);
$lineplot1->SetColor("red");
$lineplot2 = new LinePlot($datos2);
$lineplot2->SetColor("green");
$grafico->Add($lineplot1);
$grafico->Add($lineplot2);
$grafico->Stroke();
?>

Esta vez el gráfico nos quedaría de la siguiente forma:

Tercer ejemplo con JpGraph

Como se puede ver es bastante sencillo e intuitivo. Pero con esto basta por hoy, en próximos días veremos otros tipos de gráficos y como personalizar estos mucho más.

Y para finalizar los archivos con los ejemplos (no incluye JpGraph, que hay que meterlo en una carpeta llamada include):

Ejemplos con JpGraph. Parte I.

ACTUALIZACIÓN 2012-12-05

Se ha añadido al código una linea de código que desactiva el reporte de errores de PHP. Esto se debe a que la versión de jpGraph para PHP 4 produce errores en versiones de PHP 5, que provocan que las imágenes generadas no se vean bien.

Todos los ejemplos de este artículo y de los demás artículos sobre jpGraph los podéis encontrar en gitHub, en el siguiente repositorio:

https://github.com/mjcarrascosa/jpGraphDemo

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,

junio 15, 2009 0

Mostrar imagenes desde un script en PHP

By in PHP

En ocasiones nos puede interesar generar una imagen desde un script en PHP (por ejemplo un gráfico o aplicarle el efecto polaroid que expliqué aquí hace poco). Para enviarla al navegador existen varias funciones de la librería GD dependiendo del formato que queramos, que son:

Función Formato
image2wbmp WBMP
imagegd2 GD2
imagegd GD
imagegif GIF
imagejpeg JPEG
imagepng PNG
imagexmb XBM

Estas funciones nos pueden servir también para guardar la imagen en un archivo, pasándole el nombre de este, y nos permiten algunos parámetros adicionales como puede ser la calidad de la imagen, aunque esto último varía dependiendo del formato.

Lo que tenemos que hacer es enviarle al navegador la cabecera ‘Content-Type’ con el MIME Type del formato que queramos y después llamar a alguna de estas funciones indicándole un recurso de imagen. Aquí un pequeño ejemplo que carga una imagen llamada ‘imagenx.jpg’, donde x es un valor que se pasa como parámetro al script:

<?php
//El nombre de la imagen
$nombreImagen = 'imagen'.$_GET['id'].'.jpg';
//Cargamos la imagen en formato JPEG
$imagen = imagecreatefromjpeg($nombreImagen);
//Enviamos la cabecera Content-Type
header('Content-Type: image/jpeg');
//Enviamos la imagen al navegador
imagejpeg($imagen);
//Destruimos la imagen
imagedestroy($imagen);
?>

Además de usar la función imagejpeg hemos usado la función imagecreatefromjpeg, que carga la imagen a partir de un fichero JPEG. Lo mejor, como siempre recomiendo, es mirar la documentación de GD, donde vienen explicadas todas las funciones de esta librería.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: ,

junio 14, 2009 2

Efecto polaroid con PHP y GD

By in PHP

Hoy vamos a ver una función que nos permite aplicarle un efecto polariod a una imagen.

La función es:

<?php
/**
 * Función para aplicar el efecto polaroid a una imagen.
 *
 * @param string $path Ruta de la imagen
 * @param float $giro Angulo de giro de la imagen
 * @param int $rfondo componente rojo del color de fondo
 * @param int $gfondo componente verde del color de fondo
 * @param int $bfondo componente azul del color de fondo
 * @return resource imagen con el efecto polaroid aplicada 
 */
function efectoPolaroid($path, $giro, $rfondo, $gfondo, $bfondo)
{
	// Cargamos la imagen a la que queremos aplicar el efecto polaroid
	$imgBase = imagecreatefromjpeg($path);
	//Creamos una nueva imagen.
	$img = imagecreatetruecolor(imagesx($imgBase) + 25, imagesy($imgBase) + 65);
	$blanco = imagecolorallocate($img, 255,255,255);

	//Rellenamos la nueva imagen de blanco
	imagefill($img,0,0, $blanco);

	//Copiamos la imagen a la que queremos aplicar el efecto polariod en nuestra nueva imagen.
	imagecopy($img, $imgBase, 11, 11, 0, 0, imagesx($imgBase), imagesy($imgBase));

	//Eliminamos nuestra imagen de memoria, ya que ya no hace falya
	imagedestroy($imgBase);

	//Color del borde
	$color = imagecolorallocate($img, 192,192,192);
	//Le ponemos un borde gris a nuestra imagen.
	imagerectangle($img, 0,0, imagesx($img)-4, imagesy($img)-4, $color);

	//Colores para la sombra
	$gris1 = imagecolorallocate($img, 208,208,208);
	$gris2 = imagecolorallocate($img, 224,224,224);
	$gris3 = imagecolorallocate($img, 240,240,240);

	//Le añadimos una pequeña sombra
	imageline($img, 2, imagesy($img)-3, imagesx($img)-1,imagesy($img)-3,$gris1);	
	imageline($img, 4, imagesy($img)-2, imagesx($img)-1,imagesy($img)-2,$gris2);	
	imageline($img, 6, imagesy($img)-1, imagesx($img)-1,imagesy($img)-1,$gris3);	
	imageline($img, imagesx($img)-3, 2, imagesx($img)-3,imagesy($img)-4,$gris1);	
	imageline($img, imagesx($img)-2, 4, imagesx($img)-2,imagesy($img)-4,$gris2);	
	imageline($img, imagesx($img)-1, 6, imagesx($img)-1,imagesy($img)-4,$gris3);

	//Rotamos la imagen
	$fondo = imagecolorallocate($img, $rfondo, $gfondo, $bfondo);
	$rotatedImg = imagerotate($img, $giro, $fondo);

	//Destruimos la imagen con la que hemos estado trabajando
	imagedestroy($img);

	//Devolvemos la imagen rotada
	return $rotatedImg;
}
?>

Aplicando la función a la siguiente imagen, con angulo de rotación -25º y color de fondo blanco:

imagen para aplicarle el efecto polaroid

imagen para aplicarle el efecto polaroid

Nos queda esta otra:

Imagen con efecto polariod

Imagen con efecto polariod

Ahora la descarga del archivo con la función con el efecto polaroid:

Código con la función del efecto polaroid

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , ,