Buenas a todos, ¿qué hay? El post de hoy lo voy a dedicar a la creación de una gráfica. Esta aplicación es muy útil sobre todo para realizar encuestas en la Web. Voy a mostrar primero la aplicación completa y luego lo explicaré más detenidamente. Aquí se muestra el archivo voto.html visto en el navegador:
Cuando le demos al botón Mostrar Resultados nos redireccionará al archivo resultado.php en el que se mostrará una gráfica:
Pues bien, de eso trata este post: la realización de esta sencilla aplicación. Pero para que esta aplicación funcione habrá que crear una base de datos para que nos almacene los resultados. Así que vamos a ello:
create database Encuesta;
use Encuesta;
create table resultados (
usuarios varchar (30),
votos int
);
insert into resultados values
('Tenis', 0),
('Futbol', 0),
('Senderismo', 0);
Si guardamos este código en el bloc de notas lo guardamos con un nombre, por ejemplo, encuesta y lo importamos a MySql, automáticamente se crea la base de datos y la tabla. Si tenéis problemas con esto me enviáis un mail y os lo explico.
Vamos a crear ahora el archivo voto.html, el código html será el siguiente:
<html>
<head>
<title>Encuesta</title>
<head>
<body>
<h1>Encuesta sobre actividades recreativas</h1>
<p>¿Cuál es tu actividad preferida?</p>
<form method=post action="resultado.php">
<input type=radio name=voto value="Tenis">Tenis<br>
<input type=radio name=voto value="Futbol">Futbol<br>
<input type=radio name=voto value="Senderismo">Senderismo<br><br>
<input type=submit value="Mostrar Resultados">
</form>
</body>
Como veis es un formulario sencillo que muestra las tres actividades: Tenis, Futbol y Senderismo llamando a la variable voto. Cuando elijamos una de las tres actividades nos redireccionará a la página resultado.php, cuyo código es el siguiente:
<?
// conexión con la base de datos
if (!$db_conn = @mysql_connect("localhost", "amizba", "kfkek521"))
{
echo "No se puede conectar a la base de datos<br>";
exit;
};
@mysql_select_db("Encuesta");
if (!empty($voto)) // Si se ha seleccionado una de las tres actividades
{
$voto = addslashes($voto);
$query = "update resultados
set votos = votos + 1
where usuarios = '$voto'";
if(!($result = @mysql_query($query, $db_conn)))
{
echo "No se ha podido conectar a la base de datos<br>";
exit;
}
};
// resultados actuales de la encuesta
$query = "select * from resultados";
if(!($result = @mysql_query($query, $db_conn)))
{
echo "No se puede conectar a la base de datos<br>";
exit;
}
$usuarios = mysql_num_rows($result);
// calculo total del numero de votos
$total_votos=0;
while ($row = mysql_fetch_object ($result))
{
$total_votos += $row->votos;
}
mysql_data_seek($result, 0); // resetear el resultado
// configurar constantes
$width=500; // ancho de la imagen en pixeles - encajará en 640x480
$left_margin = 50; // espacio a dejar a la izquierda de la imagen
$right_margin= 50; // lo mismo para la derecha
$bar_height = 40;
$bar_spacing = $bar_height/2;
$font = "arial.ttf";
$title_size= 16; // puntos
$main_size= 12; // puntos
$small_size= 12; // puntos
$text_indent = 10; // posición para las etiquetas de texto a la izquierda
// configurar el punto inicial desde el cual dibujar
$x = $left_margin + 60; // colocar la línea de base para dibujar del gráfico
$y = 50; // lo mismo
$bar_unit = ($width-($x+$right_margin)) / 100; // un "punto" en el gráfico
// cálcula el alto del gráfico - barras más espacios más el margen
$height = $usuarios * ($bar_height + $bar_spacing) + 50;
// crear un lienzo en blanco
$im = imagecreate($width,$height);
// Asignar colores
$white=ImageColorAllocate($im,255,255,255);
$blue=ImageColorAllocate($im,0,64,128);
$black=ImageColorAllocate($im,0,0,0);
$pink = ImageColorAllocate($im,255,78,243);
$text_color = $black;
$percent_color = $black;
$bg_color = $white;
$line_color = $black;
$bar_color = $blue;
$number_color = $pink;
// Crear "lienzo" para dibujar
ImageFilledRectangle($im,0,0,$width,$height,$bg_color);
// Dibujar borde en torno al lienzo
ImageRectangle($im,0,0,$width-1,$height-1,$line_color);
// Añadir Título
$title = "Resultados Encuesta";
$title_dimensions = ImageTTFBBox($title_size, 0, $font, $title);
$title_length = $title_dimensions[2] - $title_dimensions[0];
$title_height = abs($title_dimensions[7] - $title_dimensions[1]);
$title_above_line = abs($title_dimensions[7]);
$title_x = ($width-$title_length)/2; // centrarlo en x
$title_y = ($y - $title_height)/2 + $title_above_line; // centrarlo en y
ImageTTFText($im, $title_size, 0, $title_x, $title_y,
$text_color, $font, $title);
// Dibujar una línea de base un poco por encima de la primera localización de la barra
// a un poco por debajo de la última
ImageLine($im, $x, $y-5, $x, $height-15, $line_color);
// Obtener cada línea de los datos de la base de datos y dibujar las barras correspondientes
while ($row = mysql_fetch_object ($result))
{
if ($total_votos > 0)
$percent = intval(round(($row->votos/$total_votos)*100));
else
$percent = 0;
// muestra el tanto por ciento para este valor
ImageTTFText($im, $main_size, 0, $width-30, $y+($bar_height/2),
$percent_color, $font, $percent."%");
if ($total_votos > 0)
$right_value = intval(round(($row->votos/$total_votos)*100));
else
$right_value = 0;
// tamaño de barra para este valor
$bar_length = $x + ($right_value * $bar_unit);
// dibujar barra para este valor
ImageFilledRectangle($im, $x, $y-2, $bar_length, $y+$bar_height, $bar_color);
// dibujar título para este valor
ImageTTFText($im, $main_size, 0, $text_indent, $y+($bar_height/2),
$text_color, $font, "$row->usuarios");
// dibujar contorno mostrando 100%
ImageRectangle($im, $bar_length+1, $y-2,
($x+(100*$bar_unit)), $y+$bar_height, $line_color);
// mostrar números
ImageTTFText($im, $small_size, 0, $x+(100*$bar_unit)-50, $y+($bar_height/2),
$number_color, $font, $row->votos."/".$total_votos);
// hacia abajo a la siguiente barra
$y=$y+($bar_height+$bar_spacing);
}
Header("Content-type: image/png");
ImagePng($im);
ImageDestroy($im);
?>
Es un archivo largo, no obstante hay comentarios en él para ayudar a comprender lo que hace y lo que es cada cosa.
Bien, pues ya tenemos esta aplicación hecha, ahora os voy a proponer un pequeño proyecto para que practiquéis, es el sondeo de ventas de los diferentes productos que ofrece una empresa. Imaginaros la empresa X ofrece cuatro productos A, B, C y D. Hay que realizar un gráfico en el que determine en un tanto por cien los productos que más se venden o prefieren los usuarios. Echarle un poco de imaginación y de gran ayuda tenéis la aplicación de este post. Hasta aquí doy como finalizado este post esperando ansiosa vuestros resultados… si tenéis dudas o tenéis otra forma de realizar esta pequeña aplicación que hemos visto hoy me lo podéis hacer saber en un mail o comentario. Hasta la próxima!!
está genial tu blog, muy util para dar acercarse mejor a php sin mucha experiencia.
ResponderEliminargran ejemplo, muchas gracias. Muy buen blog
ResponderEliminar