generacion de graficos con gd

[kaslimon]

Hola a todos!!

Me gustaría consultaros un problema.
He diseñado un módulo (resultados_encuesta.php) que se encarga de recibir los datos de una encuesta, procesarlos y crear un gráfico con los resultados mediante la biblioteca gd. En dicho módulo se encuentra solamente el código, nada de HTML.

Si en el campo action de la encuesta pongo directamente resultados_encuesta.php todo funciona perfectamente. Sin emabargo, para que sea un poco más atrativo he intentado incluir el modulo anterior en otra pagina: encuesta.php pero de esta forma no funciona. Aparecen un montón de letras.

Al principio pense que sería necesaria alguna etiqueta meta para que entendiera el png pero lo he estado haciendo pruebas y no es eso.

¿teneís alguna idea?

Muchas gracias!

[Cluster]

Tendrías que llamar a tu resultado_encuestas.php por un tag de imagen común (si es que ese código sólo genera la imagen con sus respectivos header() y demás ...)

Es decir .. en cualquier página HTML/etc que deses mostrar esos "resultados" (que será el gráfico generado sólo):

<img src="resultado_encuestas.php">

Un saludo,

[kaslimon]

Muchas gracias Cluster pero no me funciona.

El código también se encarga de actualizar los datos de la votacion. Es decir, primero inserta el voto en la BD y luego crea y muestra la imagen. He probado a hacer lo que me comentas y aparece la tipica cruz roja como si no hubiera imagen

[kaslimon]

Hola de nuevo!, aun no he solucionado la cuestión sin embargo he encontrado otra estrategia que si me permite conseguir lo que yo quería.

Se trata de guardar la imagen en el disco mediante la funcion ImagePng($imagen,"ruta");

El problema que se me plantea ahora es que en sucesivas creaciones de la imagen, ésta se sobreescribe que es lo que yo quiero, sin embargo el navegador siempre muestra la incial (está en cache). ¿como evitar esto?

[Cluster]

Tendrás que aislar y separar el código que hace tu actualización de datos del que los muestra. Aunque en tu proceso de "actualizar datos" implique a continuación mostrar su resultado.

Si pones el código que usas completo de los scripts que intervengan tal vez veamos por donde "cortar" y separar el código para que puedas tener un "procesa_votos.php" y un "ver_resultados.php" ..

Un saludo,

[kaslimon]

Pues haciendo caso a superCluster intentare afrontar el problema raiz como un campeon. El motivo por el cual he evitado esta solución es porque la veo bastante compleja, debido a la organización del código.

Hay partes del código en inglés (variables) ya que los he obtendio en un libro, se entienden bien y las podría haber pasado a castellano pero temía equivocarme.

ahi va el código en cuestión:

//################################################## ######################################
// Encuestas V 1.0 (Recibe datos y muestra resultados)
//################################################## ######################################


//Validamos la información llegada de la encuesta
if (!isset($_POST["voto"]))
{
print("<br/><br/></br><font size='4' color='red'><center>Debe seleccionar una respuesta</center></font><br/>");
print("<center><button onclick='window.close();'> Cerrar </button></center>");
exit;
}

$voto=$_POST["voto"];
$id_enc=$_POST["id_encuesta"];


require_once("conexion.php");
$conexion=conectar();

//Insertamos el voto en la BD
$resultado_voto="resultado".$voto;
$sqlUpdate="UPDATE encuestas SET total_votos=total_votos + 1, $resultado_voto=$resultado_voto + 1 WHERE id=$id_enc";
$rs1=mysql_query($sqlUpdate,$conexion) or die ("Error al consultar la base de datos: " . mysql_error());


//Tomamos los datos que vamos a mostrar
$sqlSelect="SELECT * FROM encuestas WHERE id=$id_enc";
$rs2=mysql_query($sqlSelect,$conexion) or die ("Error al consultar la base de datos: " . mysql_error());
$resultado=mysql_fetch_array($rs2);


$numero_opciones= $resultado["numero_opciones"]; // Número de respuestas
$total_votos= $resultado["total_votos"];
$pregunta=$resultado["pregunta"];



/*********************************************
Cálculos iniciales para el gráfico
**********************************************/
$num_candidates=$numero_opciones;
$total_votes=$total_votos;

putenv('GDFONTPATH=C:\WINDOWS\Fonts');
$width=600; //anchura de la imagen en píxeles
$left_margin = 50;
$right_margin = 50;
$bar_height=40;
$bar_spacing= $bar_height/2;
$font = 'Arial';
$title_size = 14;
$main_size=12;
$small_size=10;
$text_indent =15; //Ubicación para las etiquetas de texto a la izquierda

//establecemos el puntos inicial desde el que dibujar
$x=$left_margin + 60; //lugar en el que dibujar la linea base del gráfico.
$y=50; //lugar en el que dibujar la línea base del gráfico.
$bar_unit = ($width - ($x + $right_margin)) / 100; //un "punto" en el gráfico

//Calculamos la altura del gráfico - las barras, más los huecos, más cierta distancia del margen
$height = $num_candidates * ($bar_height + $bar_spacing) + 50;

$height2 =$num_candidates * ($bar_height + $bar_spacing) + 180; //Altura incluyendo la leyenda



/*******************************************
Crear la imagen de base
*******************************************/

// creamos un lienzo vacío
$im = imagecreate($width,$height2);

// Asignamos colores
$white=ImageColorAllocate($im,255,255,255);
$red=ImageColorAllocate($im,255,0,0);
$blue=ImageColorAllocate($im,0,64,128);
$black=ImageColorAllocate($im,0,0,0);
$pink = ImageColorAllocate($im,255,78,243);
$yellow = ImageColorAllocate($im,255,255,132);


$text_color = $black;
$percent_color = $black;
$bg_color = $yellow;
$line_color = $blue;
$bar_color = $blue;
$number_color = $red;

// Creamos el lienzo en el que dibujar
ImageFilledRectangle($im,0,0,$width,$height2,$bg_c olor);

// Dibujamos un rectángulo en el lienzo
ImageRectangle($im,0,0,$width-1,$height2-1,$line_color);

// Añadimos el título
$title = $pregunta;
$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; // center it in x
$title_y = ($y - $title_height)/2 + $title_above_line; // center in y gap
ImageTTFText($im, $title_size, 0, $title_x, $title_y,
$text_color, $font, $title);

// Dibujamos una línea base ligeramente por encima de la primera barra hasta un poco por debajo de la última
ImageLine($im, $x, $y-5, $x, $height-15, $line_color);




/*******************************************
Dibujar datos en el gráfico
*******************************************/

// Dibujamos las barras basándonos en los datos de la base de datos
for ($i=1;$i<=$numero_opciones;$i++) {
$etiqueta="Opción ".$i;
$resultado_enc="resultado".$i;
$votos_respuesta=$resultado[$resultado_enc];

if ($total_votes > 0)
$percent = intval(round(($votos_respuesta/$total_votes)*100));
else
$percent = 0;

// mostramos el porcentaje de este valor
ImageTTFText($im, $main_size, 0, $width-40, $y+($bar_height/2),
$percent_color, $font, $percent.'%');
if ($total_votes > 0)
$right_value = intval(round(($votos_respuesta/$total_votes)*100));
else
$right_value = 0;

// longitud de la barra para este valor
$bar_length = $x + ($right_value * $bar_unit);

// dibujamos la barra
ImageFilledRectangle($im, $x, $y-2, $bar_length, $y+$bar_height, $bar_color);

// Dibujamos el título para este valor
ImageTTFText($im, $main_size, 0, $text_indent, $y+($bar_height/2),
$text_color, $font, $etiqueta);

// Dibujamos la línea mostrando el 100%
ImageRectangle($im, $bar_length+1, $y-2,
($x+(100*$bar_unit)), $y+$bar_height, $line_color);

// Mostramos los número
ImageTTFText($im, $small_size, 0, $x+(100*$bar_unit)-60, $y+($bar_height/2),
$number_color, $font, $votos_respuesta.'/'.$total_votes);

// Pasamos a la siguiente barra
$y=$y+($bar_height+$bar_spacing);
}

//Mostramos la leyenda
for ($i=1;$i<=$numero_opciones;$i++) {
$etiqueta="Opción ".$i.":";
$opcion_enc="opcion".$i;
$opcion=$resultado[$opcion_enc];

ImageTTFText($im, $small_size, 0, $text_indent + 20, $y+($bar_height/2), $text_color, $font, $etiqueta);
ImageTTFText($im, $small_size, 0, $text_indent + 90, $y+($bar_height/2), $text_color, $font, $opcion);

$y=$y + $bar_spacing;

}

/*******************************************
Mostrar imagen
*******************************************/
Header('Content-type:image/png');
$ruta="imagenes\\temp\\encuesta".time().".png";
ImagePng($im,$ruta);


/*******************************************
Liberar recursos
*******************************************/
ImageDestroy($im);


mysql_free_result($rs2);
//Cerramos la conexion
mysql_close($conexion);
?>

[Cluster]

El código lo has segmentado bastante bien ..

Fijate que :

Código PHP:

  //Insertamos el voto en la BD 
$resultado_voto="resultado".$voto; 
$sqlUpdate="UPDATE encuestas SET total_votos=total_votos + 1, $resultado_voto=$resultado_voto + 1 WHERE id=$id_enc"; 
$rs1=mysql_query($sqlUpdate,$conexion) or die ("Error al consultar la base de datos: " . mysql_error()); 
 
// hasta aquí sería el proceso de contabilizar tu voto. 
// ------- cortar aquí ----------------------------------------------------------- 
// y hacia abajo tenemos la parte que nos va mostrar (previo consulta SQL a tu BD) esos resultados gráfiamente. 
 
//Tomamos los datos que vamos a mostrar 
$sqlSelect="SELECT * FROM encuestas WHERE id=$id_enc"; 
$rs2=mysql_query($sqlSelect,$conexion) or die ("Error al consultar la base de datos: " . mysql_error()); 
$resultado=mysql_fetch_array($rs2);  
   

Es decir .. puedes partir ese código en dos (por donde indico).

Lo único que debes "modificar" un poco sería el "ver_encuesta.php" (2º parte del código que vas a obtener). Ese script lo único que requerirá es que le pases por el URL el "id de tu encuesta":

Actualmente todo el script captura esa variabel por POST por qué llega de tu fomulario .. pero ahora va a llegar por GET por que se la vamos a mandar por el URL:

Código PHP:

  $id_enc=$_GET["id_encuesta"];  
   

Además te hará falta incluir el:

Código PHP:

  require_once("conexion.php"); 
$conexion=conectar();  
   

para tu conexión a tu BD y quitar los mysql_close() y msyql_free_result() del final ..(que tampoco hacen mucho en ese punto concreto justo al final del script).

También podrás dejar:

Código PHP:

  //ImagePng($im,$ruta); 
//sin la $ruta 
ImagePng($im);  
   

Y de esta forma ya podras llamar a tu "ver_encuesta.php" como te mencioné al principio:

Código PHP:

  <img src="ver_encuesta.php?id_encuesta=nº">  
   

desde cualquier página de tu sitio.

----

La primera parte del código que obtendras (ese "actualiza_encuesta.php") seguirá trabando igual que ahora .. salvo que al final de su proceso .. tendrás que redireccionar a la página HTML o bien directamente al ver_encuesta.php según donde quieras ver esa encuesta.

Para eso .. usa:

Código PHP:

  header("Location: ver_encuesta.php?id_encuesta=".$id_enc); 
exit;  
   

Justo por donde "cortastes".

(Bueno, . .no se te olviden los ?> de cierre y si hay condicionales (como ese IF del principio) cerrarlo: } en el script que corresponda (el primero).

Como veras .. no es tan dificil .. Las imagenes se crearán dinámicamente .. no tendras dando vueltas archivos en el servidor y cliente y liarte con caché y nombres de archivo aleatorios y demás hierbas raras.

Un saludo,

[kaslimon]

Muchísimas gracias por las molestias Cluster.

Funciona!!!!!!!!!!!!!!!

Yo había intentado mil subdivisiones distintas pero nada de nada.

Muchísmas gracias