PONGA UN GRÁFICO EN SU VIDA (VI)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Gráfico de columnas. (continuación I)-

Bien; ya tenemos la base de nuestro gráfico. Ahora vamos a darle altura a cada una de las barras, y para ello vamos a definir en el script de cabecera un nuevo array "h", que va a contener las alturas de cada una de las barras en el gráfico. Una vez introducidas las alturas en la variable necesitamos una función que asigne estas alturas a las barras. Pero este tema es complicado, ya que para conseguir esto cada navegador requiere unas instrucciones diferentes. Para no complicar en exceso el código (ya que además el objeto de este artículo no es explicar las diferencias de trato de capas entre los navegadores) vamos a construir una función para Internet explorer, dejando claro que laúnica diferencia de uso para Nestcape Navigator 4x será cambiar la instrucción "document.all" por "document.layers", y para Nestcape Navigator 6x por "document.getElementById".

A la hora de asignar alturas a las capas de las barras debemos antes comprobar si estas existen, ya que si por cualquier motivo intentamos asignar una propiedad a una capa que no existe, el navegador generará un error y detendrá la ejecución de script. Esto lo conseguimos preguntando si existe esa capa "if (document.all['capa']).Si existe la capa se ejecutará el código que haya debajo, pero si no existe no lo hará, con lo que nos evitamos el error. Esta comprobación nos es siempre necesaria, pero si es siempre suficiente para construir un cñodigo correcto libre de errores. Bueno, el código a escribir será:

var h=new Array(n;
h[1]=100,h[2]=150,h[3]=50,h[4]=120,h[5]=80,h[6]=160,h[7]=30;
function barras()
{
  if(document.all){
    document.all('barra1').style.height=h[1];
    document.all('barra1').style.top=(260-h[1]);
    document.all('barra2').style.height=h[2];
    document.all('barra2').style.top=(260-h[2]);
    document.all('titulo2').style.top=(260-h[2]-25);
    document.all('titulo2').style.visibility="visible";

 if(document.all('barra3')){
    document.all('barra3').style.height=h[3];
    document.all('barra3').style.top=(260-h[3]);
}
if(document.all('barra4')){
   document.all('barra4').style.height=h[4];
   document.all('barra4').style.top=(260-h[4]);
}
if(document.all('barra5')){
   document.all('barra5').style.height=h[5];
   document.all('barra5').style.top=(260-h[5]);
}
if(document.all('barra6')){
   document.all('barra6').style.height=h[6];
   document.all('barra6').style.top=(260-h[6]);  
}
if(document.all('barra7')){
   document.all('barra7').style.height=h[7];
   document.all('barra7').style.top=(260-h[7]);
   }
  }
}

Vemos que tras comprobar que cada capa existe en el body, le asignamos la altura determinada por la variable h[i], que es el valor que debe representar esa columna. Pero si hacemos sólo esto, al estar las capas posicionadas siempre desde su extremo superior, sólo conseguiremos que se nos bajen para abajo en altura. Para corregir esto modificamos también la posición vertical de cada columna, fijandola a la altura base (260px) menos la altura que deba tener cada una. Es decir, "subimos" cada capa la altura que va a tener trás el cambio, con lo que su extremos inferior permanecerá donde debe, a 260 px del extremo superior de la pantalla del navegador.

Para poder activar la función establecemos un enlace en el body que llame a la función:

<a href="#" onClick="barras();return false">barras</a>

en el que usamos el manejador de eventos onClick con la instrucción return false para evitar errores en el enlace. El resultado hasta ahora lo podemos ver en la siguiente ventana.

Para finalizar nuestro gráfico vamos a colocar en la parte superior de cada columna una pequeña capa que nos va a servir para mostrar el valor numérico que representa.Para conseguir esto escribimos en el código de estilos:

#titulo1{position:absolute;top:260px;left:60px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
  #titulo2{position:absolute;top:260px;left:100px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
  #titulo3{position:absolute;top:260px;left:140px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
  #titulo4{position:absolute;top:260px;left:180px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
  #titulo5{position:absolute;top:260px;left:220px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
  #titulo6{position:absolute;top:260px;left:260px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}
  #titulo7{position:absolute;top:260px;left:300px;width:30px;height:10px;background-color:yellow;font-size:10px;font-family:verdana;color:#003366;visibility:hidden;text-align:center;}

Y ahora procederemos al igual que con los pies de columna para pintarlos en al body. Para que inicialmente no aparezcan hemos puesto su propiedad de visibilidad a "hidden", y ahora sólo nos queda establecer que cuando llamemos a la función barras esta propiedad pase a "visible", con la cual aparecerán, y que se posicionen en lo alto de su columna. Esto se consigue en cada caso mediante las instrucciones:

 document.all('titulo[i]').style.top=(260-h[1]-25);
 document.all('titulo[i]').style.visibility="visible";

El código final para nuestra página y su resultado lo podéis ver en el siguiente apartado.

Home > DHTML > Ponga un gráfico en su vida > 1 -  2 - 3  - 4 - 5 - 6 - 7