HTMLWeb - Ponga un gráfico en su vida I

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

Gráfico de columnas.-

Vamos a cambiar ahora un poco de tema y vamos a ver cómo podemos construir un gráfico de bandas. Estos gráficos son muy útiles cuando queremos presentar una visión clara de una serie de datos que se pueden agrupar en un rango de valores no muy distanciados unos de otros, o bien cuando queremos presentar de una forma clara la evolución de una variable a lo largo de un periodo de tiempo.

Vamos a construir nuestro gráfico apoyandonos en una serie de capas, cada una de las cuales va a constituir una de las columnas, que inicialmente van a tener su altura a 0, y que luego, dinámicamente vamos a asignar una altura igual al valor de la variable que representan. Todas estas capas las vamos a incluir dentro de una capa padre (la capa que llamamos "caja"), con el fin de crear un fondo de color adecuado para delimitar el gráfico

Para comenzar vamos a definir todas nuestras barras mediante sus capas correspondientes, y para ello vamos a asignarle estilos de alto, ancho, posición y color de fondo en la cabecera de nuestra página, mediante el conjunto de instrucciones de estilo correspondientes. Para conseguir esto escribimos:

<html>
<head>
<title>Gráfico de bandas</title>
<style type="text/css">
#caja {position:absolute;top:50px;left:50px;width:380px;height:300px;background-color:#ffcc66;}
#barra1{position:absolute;top:260px;left:60px;width:30px;height:0px;background-color:red;}
#barra2{position:absolute;top:260px;left:100px;width:30px;height:0px;background-color:blue;}
#barra3{position:absolute;top:260px;left:140px;width:30px;height:0px;background-color:red;}
#barra4{position:absolute;top:260px;left:180px;width:30px;height:0px;background-color:blue;}
#barra5{position:absolute;top:260px;left:220px;width:30px;height:0px;background-color:red;}
#barra6{position:absolute;top:260px;left:260px;width:30px;height:0px;background-color:blue;}
#barra7{position:absolute;top:260px;left:300px;width:30px;height:0px;background-color:red;}
</style>

Con esto ya tenemos nuestros estilos, y sólo nos falta escribir en el body de la página una instrucción de capa para cada una de las bandas y para la caja padre. Podemos escribir el código para cada capa individualmente o podemos escribir todas de golpe mediante un bucle de JavaScript, que es lo que vamos a hacer. Para ello debemos escribir:

var n=7;
var texto=new Array(n);
texto[1]='l',texto[2]='m',texto[3]='x',texto[4]='j',texto[5]='v',texto[6]='s',texto[7]='d'

</script>

<body >

<scriptlanguage="JavaScript" type="text/javascript"><BR> document.write('<divid="caja">');<BR> for(i=1;i<=n;i++){
document.write('<div id=barra'+i+'><img src="bs.gif" width="1" height="1" border="0"></div>');
}
document.write('</div>');
</script>

</body>

y con esto se nos pintarán las capas en la página nada más cargar esta, aunque no se verán, ya que tienen altura cero. Para compatibilizar la escritura en Internet Explorer y en Nestcape Navigator introducimos dentro de cada capa una images bs.gif, de 1x1 píxeles y de color transparente, con lo que conseguimos que las capas se muestren adecuadamente, ya que si estuvieran vacias podríamos tener problemas de visualización y tamaño. Hemos establecido una variable "n" que va a determinar el número de barras de nuestro gráfico ( 7 en nustro caso, ya que debe haber una por cada día de la semana) y un array "texto" que vamos a usar a continuación para pintar el texto que va a ir al pié de cada barra.

Vamos a suponer que nuestro gráfico va a presentar la evolución de una variable dada a lo lorgo de una semana, y para ser más explicitos vamos a colocar un pie a cada banda, en el que vamos a escribir el día de la semana que va a representar cada banda. Para ello añadimos en las definiciones de estilo el correspondiente a cad pie de capa:

#pie1{position:absolute;top:260px;left:60px;width:40px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie2{position:absolute;top:260px;left:90px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie3{position:absolute;top:260px;left:130px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie4{position:absolute;top:260px;left:170px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie5{position:absolute;top:260px;left:210px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie6{position:absolute;top:260px;left:250px;width:45px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}
#pie7{position:absolute;top:260px;left:290px;width:40px;height:10px;background-color:#339900;font-size:10px;font-family:verdana;color:#003366;text-align:center;}

donde vemos que hemos asignado a cada pie la misma posición vertical (el mismo atributo de estilo TOP), coincidente con el de la banda que representa, e igualmente la misma posición horizontal que su banda asignada (propiedad LEFT). En la escritura de script del body añadimos en el bucle la instrucción para que nos pinte los pies:

document.write('<div id=titulo'+i+'>'+h[i]+'</div>');

lo que hemos conseguido con todo esto hasta ahora podemos verlo en la siguiente ventana.

Ahora tenemos que dar alturas a las barras. Lo vemos en el siguiente apartado...

n4 = (document.layers)? true:false;
n6 = (document.getElementById) true:false;
ie = (document.all)? true:false

que lo que hace es comprobar si el navegador reconoce la existencia de layer, con lo que será entonces Nestcape 4x, si reconoce la propiedad getElementById, con lo que será Nestcape 6 o si reconoce la referencia document.all, que el único navegador que lo hace así es Internet Explorer. Con este código tenemos ya una variable dependiente del navegador, y refiriéndonos a ella podremos escribir código para todos los navegadores.

El siguiente paso será establecer en el BODY una capa para escribir en ella:

Vamos a esplicar un poco esto: en primer lugar destacar que la capa debe estar posicionada absolutamente, ya que si no es así no podemos escribir dentro de ella. Además, debemos clipear la capa, recortarla, ya que si no lo hacemos el navegador de Nestcape no respetará las dimensiones establecidas, adpatándolas al contenido de la capa. Por último, debemos usar background-color para I Explorer y layer-background-color para Nestcape, ya que ambos navegadores asignan color de fondo a una capa de forma diferente.

El siguiente paso será escribir ya el contenido de la variable grafico obtenida anteriormente dentro de la capa padre, y para ello hay que hacerlo de forma diferente para cada navegador.

Internet explorer y Nestcape 6 aceptan la propiedad innerHTML, que permite escribir directament en la capa padre, si bien la forma de referirse a esta es diferente en ambos navegadores. Por lo tanto debemos escribir para estos:

if (ie) document.all['padre'].innerHtml=grafico;

if(n6) document.getElementById['padre'].innerHTML= grafico;

pero Nestcape 4x no admite la propiedad innerHTML, por lo que para poder escribir dentro de una capa debemos usar el comando document.write de la siguiente forma:

if(n4) {
with (document.layers['padre'].document) {
      open();
      write(grafico);
      close();
}

ya que al considerar este navegador cada capa como un documento individual, debemos primero abrirlo para su escritura, escribir en él y luego cerrarlo.

El código total de nuestra página será:

<html>
<head>
<script language="JavaScript" type="text/javascript">
var X=new Array(2),Y=new Array(2);
X[1]=200;X[2]=280;
Y[1]=150;Y[2]=50;
var a,b,p=150;
var x1=new Array(p);
var y1=new Array(p);
function linea(X1,Y1,X2,Y2)
{
a=((Y2-Y1)/(X2-X1));
b=(Y1-a*X1);
x1[0]=X1;
y1[0]=Y1;
for (i=1;i<p;i++)
{
    x1[i]=x1[(i-1)]+((X2-X1)/p);
    y1[i]=a*x1[i]+b;
}
var grafico='';
for (i=0;i<p;i++)
{
   grafico+='<div style="position:absolute;top:'+y1[i]+'px;left:'+x1[i]+'px;">.</div>\n';
}
n4 = (document.layers)? true:false
n6 = (document.getElementById)? true:false
ie = (document.all)? true:false

if (ie) document.all['padre'].innerHTML=grafico;
else if (n6) document.getElementById['padre'].innerHTML= grafico;
else if(n4)
{
    with (document.layers['padre'].document)
{
      open();
      write(grafico);
      close();
     }
}
}
</script>
</head>
<body onload="linea(X[1],Y[1],X[2],Y[2])">
<div id="padre" style="position:absolute;top:50px; left:200px;width:400px;height:300px;clip:rect(0,400,300,0);background-color:yellow;layer-background-color:yellow;"><div>
</body>
</html>

El resultado de este código puedes verlo en esta ventana flotante.

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