|
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:
[imagen en="archivos/barras1.jpg"]
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.
| 
