Sunteți pe pagina 1din 3

Como presentar una grfica de barras sencilla con php

Si estas interesado en presentar una grfica de barras en tu sitio web y no tienes idea por donde comenzar, pues djame decirte que este artculo puede ser un excelente inicio. Aqu te muestro con un ejemplo como lo puedes desarrollar, no te lo pierdas. En este artculo te muestro paso a paso como realizar una grfica de barras a partir de obtener los datos que pintan t grfica. Esto lo vamos a hacer utilizando un truco con las tablas, sin tener que utilizar una librera distinta o meternos con las funciones de manejo de imgenes en php, te interesa?, contina leyendo. Para fines prcticos lo primero que tienes que hacer es un formulario en HTML que solicite y enve los datos que quieres interpretar en una grfica. El cdigo que te propongo puede ser el siguiente: <html> <title>Datos A Graficar</title> </head> <body> <h1>Hola Anota En Los Siguientes Cuadros Los valores A Graficar</h1><br /> <b>Anota el valor en numero entero, ya que el codigo php <br /> se encargara de calcular el porcentaje</b><br /> <form name=valores method=post action=grafica.php> Valor 1:<input type=text name=v1 /> Valor 2:<input type=text name=v2 /> Valor 3:<input type=text name=v3 /> <input type=submit name=Enviar value=Graficar /> </form> </body> </html>

Una vez que lo tengas gurdalo con el nombre de valores.html, ahora vamos a programar el archivo grafica.php que va a ser el encargado de mostrar los datos graficados en trminos de porcentaje, veamos el cdigo:

<html> <head> <title>Mi primer Grafica en PHP</title> </head> <body> Grafica Resultante: <?php //Primero leemos los datos enviados //por el formulario $v1 = $_POST['v1']; $v2 = $_POST['v2']; $v3 = $_POST['v3']; //sumamos para saber cual es el //total o 100% $total = $v1+$v2+$v3;

//El valor maximo de longitud //de la barra es 400 $long = 400; //calculamos la longitud //cada valor enviado $long_v1 = $v1 * $long $long_v2 = $v2 * $long $long_v3 = $v3 * $long de / $long; / $long; / $long;

//Es hora de los porcentajes a //mostrar $por_v1 = 100 * $v1 / $total; $por_v2 = 100 * $v2 / $total; $por_v3 = 100 * $v3 / $total; ?> <! Ahora muestra la grfica > <table border=0> <tr> <td><b>Valor 1</b></td> <td>&nbsp;</td><td width=<?php echo $long_v1; ?> bgcolor=#000066 </td> <td>&nbsp;<?php echo $por_v1; ?>&nbsp;(<i><?php echo $v1; ?></i>)</td> </tr> </table> <table border=0> <tr> <td><b>Valor 2</b></td> <td>&nbsp;</td><td width=<?php echo $long_v2; ?> bgcolor=#CC9900> </td> <td>&nbsp;<?php echo $por_v2; ?>&nbsp;(<i><?php echo $v2; ?></i>)</td> </tr> </table> <table border=0> <tr> <td><b>Valor 3</b></td> <td>&nbsp;</td><td width= <?php echo $long_v3; ?> bgcolor=#006600></td> <td>&nbsp;<?php echo $por_v3; ?>&nbsp;(<i><?php echo $v3; ?></i>)</td> </tr> </table> </body> </html>

El cdigo esta comentado para su mejor entendimiento. Las siguientes imgenes te muestran el resultado que deben tener los cdigos anteriores una vez ejecucin:

Sencillo verdad, recuerda que una forma de agradecer es comentar, y sigo aqu a tus ordenes para ayudarte en lo que se pueda as que no dudes en comentar. Y para descargar este ejemplo lo puedes hacer haciendo click aqu.

S-ar putea să vă placă și