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

Introducción.-

Cuando construimos nuestras páginas web hay muchas ocasiones en las que manejamos datos de todo tipo, especialmente si nuestras páginas están relacionadas con el mundo empresarial. Estos datos solemos darlos diréctamente, en forma numérica pura, y aunque en este formato son claramente apreciables por personas entendidas en la materia, a veces necesitamos una forma más intuitiva de presentarlos. Y aquí es donde muchas veces echamos de menos el saber cómo expresar estos datos en forma de gráficos.

Si ante esta necesidad exploramos la web en busca de soluciones seguro que encontraremos cantidad de páginas que usan gráficos, de las que podremos ver su código fuente y aprender cómo se crean los mismos, adaptando estos nuevos  conocimientos a nuestras páginas. Pero la mayor parte de las ocasiones este código que tan útil nos parece a sido escrito por desarrolladores expertos, que han creado un "monstruo" de instrucciones JavaScript y capas que escapa al entendimiento de personas menos avanzadas.

En este capítulo vamos a hacer una pequeña introducción al mundo de los gráficos mediante HTML dinámico, y aunque los ejemplos que vamos a tratar no serían considerados muy ortodoxos por los grandes gurús de la web, sí creo que nos valdrán para entender un poco de qué va la cosa.

Vamos a usar DHTML porque es un medio fiable y útil de manejar dinámicamente datos, capas y funciones de JavaScript, lo que nos va a permitir en muchas ocasiones no sólo crear los gráficos, si no también actaulizar los mismos " en tiempo real". Y luego os diré porqué.

Supongo de antemano que conocéis algo de HTML, JavaScript y tratamiento de capas, pero voy a procurar explicaros todo de forma clara para que podáis entenderlo bien.

Básicamente, a la hora de crear un gráfico vamos a necesitar:

* una función  matemática que nos ayude a obtener los diferentes puntos que van a formar nuestro gráfico.

* una serie de capas que se sitúen en las coordenadas obtenidas en el paso anterior, y que van a contener algún signo en su interior que es el que se va a mostrar en pantalla para pintar el gráfico. Yo voy a utilizar inicialmente el punto (.), ya que en realidad un gráfico está formado por puntos.

A la hora de pintar nuestras capas vamos a poder hacerlo bien directamente en el cuerpo del BODY, bien dentro de una capa padre. Cada una de estas opciones tiene sus ventajas e inconvenientes, por lo que una vez vistas ambas técnicas será cada desarrollador el que decidirá cuál se adapta más a sus necesidades.

Sistema de referencia.-

Un sistema de referencia ortogonal directo es aqué en que los ejes coordenados que lo constituyen forma entre si 90º, y asdemás siguen la regla conocida como "del sacacorchos" o a izquierdas. Al trabajar en una página web el sitema usado es ortogonal, pero los ejes no son directos, es decir, siguen un sentido de derechas, aunque esta particularidad no nos va a afectar a la hora de construir nuestra función. Nuestros ejes de coordenadas van a ser pués:

* origen de coordenadas --> esquina superior izquierda de la ventana del navegador, que tendrá las coordenadas (0,0).

* eje X --> eje horizontal que comienza en el origen de coordenadas y cuyo sentido positivo va hacia la derecha.

* eje Y --> eje vertical que comienza en el origen de coordenadas y cuyo sentido positivo va hacia abajo.

O (0,0)
----------------------------------------------------------------------------------------X+
|
|
|
|
|
|
|
|
|
Y+

Y si más dilación, vamos a empezar el tema pintando una recta entre dos puntos de la pantalla...