ElTicus.com

Programación, lenguajes y recursos para programadores

Código fuente
Como construir una gráfica de barras con CSS y PHP
(primera parte)
Publicado por JL Fecha: 2006-12-19 00:00:00 Idioma: Español Tipo de documento: Código fuente

Como construir una gráfica de barras con CSS y PHP (primera parte)


Gráfica de barras construida a partir de las propiedades de posicionamiento de CSS versión 1 (CSS positioning)


Ahora vamos a ver como utilizar elementos de bloque DIV para construir una gráfica de códigos de barras.


La idea surgió al plantearme como colocar una gráfica que me presente el número de visitas que recibe mi sitio y quería verlo expresado en una gráfica para ver
de manera más directa el ascenso o descenso de la audiencia.

Mi primera opción fué generar la gráfica como un JPG utilizando las funciones GD de PHP, y bueno, la gráfica se ve bonita y funcionó bastante bien, no obstante, si la grafica es muy grande, resulta en un archivo muy pesado. (si a alguien le interesa, puedo publicarlo más adelante).

Entonces, me encontré con las llamadas propiedades de posicionamiento de CSS versión 1 (CSS positioning) y pensé que se podían aprovechar para hacer una gráfica de barras con unos cuantos elementos de manera que fuera muy liviana.

Las propiedades de posicionamiento nos permiten controlar un elemento de HTML tal como se controlarían las las propiedades de un objeto gráfico sobre un formulario en un lenguaje como Visual Basic. Podemos indicarle la posición, el tamaño, el orden, la visibilidad entre otras cosas.

Para utilizar estas funciones, es necesario agregarlas dentro de la propiedad style='' de un elemento. El elemento que vamos a utilizar es el contenedor

que es un objeto que surgió junto con el HTML dinámico y la utilización de estilos.

Con el objeto de simplificar el entendimiento del procedimiento, no nos meteremos más a fondo en el uso de las hojas de estilo en cascada y nos limitaremos a colocar los elementos CSS en la sección style del elemento. PEro debo mencionar que en una entrega posterior ahondaremos en la manera de hacer esto mismo de manera mas eficiente y más correcta.

A continuación presento algunas de las funciones utilizadas.

Funciones de posicionamiento de CSS 1
Propiedad Sirve para valores posibles
position Indicar el modo como se va a posicionar el elemento en la página absolute (en la posición indicada)
relative (en donde le toque según el contenido)
static (enuna posición específica de la pantalla)
left posición del extremo izquierdo del elemento Un valor como número o porcentaje
top posición del extremo superior del elemento Un valor como número o porcentaje
width Ancho del elemento Un valor como número o porcentaje
height Alto del elemento Un valor como número o porcentaje
visibility Si es o no visible el elemento hidden (no es visible)
visible (si es visible)

Y pues aquí les entrego una primera propuesta de una gráfica de barras con CSS. Esta función ya está probada tanto en Mozilla firefox como en Internet Explorer 6.

Cabe mencionar que es una priemra propuesta y tiene varias carencias que arreglé mas adelante y publicare en un artículo posterior, pero para fines educativos o para alguien no muy exigente.


<?PHP
/* *********************************************
    FUNCION que despliega una gráfica de barras 
    dentro de un DIV relativo.
    Recibe como parametros:
    Ancho y alto de la gráfica y array con los valores
    a graficar.  
   ********************************************* */

 function DesplegarGrafica($ancho,$alto,$valores)
 {
//  Definimos el div contenedor como un cuadro amarillo con bordo azul
//  NOTA: Es obligatorio que la posición sea relativa en Internet Explorer 6
   echo "<div style='background-color:yellow; 
                     border-style:solid; 
                     border-width:1px; 
                     border-color:blue; 
                     position: relative;  
                     width:$ancho; 
                     height:$alto;'>\n"
;
   
   $maximovalor=0.0;                          //
   $nbarras=0;                                //
   foreach($valores as $nom => $val)          // <-- En este ciclo  
   {                                          //     buscamos el
     if($val>$maximovalor) $maximovalor=$val; //   numero de barras  
     $nbarras++;                              //  y el máximo valor.
   }                                          // 
   
   $alturatexto = 20;
   $anchobarra=$ancho / $nbarras;
   $escala=($alto-$alturatexto)/$maximovalor;   
   $i=0;
// Ciclo que imprime cada una de las barras   
   foreach($valores as $nom => $val)
   {
     $leftB= intval($i*$anchobarra);
     $widthB=$anchobarra-10;    
     $topB=($alto-$alturatexto) - ($val * $escala);
     $heightB=($alto-$alturatexto)-$topB;   
     // Pintamos una barra de color rojo con bordo blanco 
     echo "<div style='background-color:red;
                       border-style:solid; 
                       border-width:1px;
                       border-color:black;
                       position:absolute;
                       width:$widthB;
                       height:$heightB;
                       left:$leftB;
                       top:$topB'>\n"
;    
     // Colocamos el valor dentro de la barra                  
     echo "<center><b><font color=white> $val </font></b></center>"; 
     echo "</div>";
     $topT=($alto-$alturatexto);
     // Definimos un area transparente que contendrá la leyenda de abajo
     echo "<div style='position:absolute;
                       width:$widthB;
                       height:$alturatexto;
                       left:$leftB;
                       top:$topT'>\n"
;    
     echo "<center> $nom </center>";
     echo "</div>";    
     $i++;
   }   
   echo "</div>";  
 }


/* *********************************************
     Ahora como ejemplo, utilizamos la función, 
     y deberá aparecer la gráfica en pantalla.
   ********************************************* */

 $ancho = 400;
 $alto = 200; 
 $valores=array('Mexico'=>20, 
                'USA'=>18,
                'Brasil'=>42,
                'Argentina'=>12,
                'Cuba'=>9
               );

 echo "<html><body>";
 echo " La gráfica se vé así:  <br>";
 DesplegarGrafica($ancho,$alto,$valores);
 
?>

Para ayudar a entender la manera como se utilizan las distintas variables, podemos analizar el siguiente esquema:


Algunas cosas que se le deben mejorar:


  • Poder indicarle los colores desde la llamada a la función.
  • Colocar los estilos en una definición de estilos aparte ya sea en el encabezado o en un archivo CSS.
  • Ponerle textura a las barras por medio de una imagen degradada.
  • Cambiar la manera como se colocan los letreros ya que si son mas anchos que las barras, se enciman.


Si tienen problemas para implementarlo dejenme un mensaje aquí. Más adelante prometo poner la función corregida con las mejoras sugeridas.




Hay 1 comentarios sobre este tema por parte de los lectores


Haz un comentario sobre este tema
Nombre email (no se muestra)
comentario:
Escribe las 2 letras que ves aquí: Imagen anti-spam =

Comentarios de parte de los lectores:

1. Comentario de Lucas el 2016-09-21 10:37:43
La verdad es que está muy bien y muy sencillo,
sabrías decirme como hacer un array para extraerlo de una Base Datos.
Saludos


Artículos relacionados:
Código fuente Como cambiar el color de las barras de scroll del explorador Truco Como colocar un tooltip sobre los elementos de mi página Truco Como hacer tablas con esquinas redondas con CSS y HTML