GRAFICACIÓN CON DELPHI

Uno de los puntos más relevantes en cuanto a análisis numérico se refiere, es visualizar los
resultados de un proceso, ya sean las coordenadas (x, f(x)) resultantes de una ecuación, una serie
de datos de campo, el resultado de datos de un proceso, etc. La mejor manera de lograr lo anterior
es mediante una gráfica.

GRAFICANDO FUNCIONES

El algoritmo básico para graficar una función matemática no cambia substancialmente de un tipo a
otro de funciones. Por ejemplo, para una función del tipo Y= F(X) se requiere conocer el dominio en
el que se evaluará la variable independiente (el límite inferior y superior de la variable X). Luego se
requiere conocer cómo se atravesará dicho dominio, que en otras palabras significa de conocer la
función transición o paso entre cada valor de x en el que se pretenda evaluar la función F(X).

Si una función implica más de una variable independiente, por ejemplo Z=F(X, Y), el proceso
involucrará conocer los dominios de las variables X e Y, así como las funciones de paso para
ambas variables. En este caso, es necesario predefinir el orden en el que se incrementen las
variables independientes. La evaluación de la función se realiza para cada valor del grupo de x e y
antes mencionado.

Observando lo anterior, el algoritmo de graficación básico para el caso de una función con una sola
variable independiente, sería de la siguiente manera:

1. Inicializar con el primer elemento del dominio de la variable independiente

2. Evaluar la función Y = F(X)
3. Enviar a la gráfica el punto (X, Y)
4. Si el valor de x es igual o mayor al último valor del dominio de X, terminar. En caso
contrario, aplicar la función de transición a la variable X, en otras palabras X=Tansición(X),
convirtiendo el resultado de dicha transición en el nuevo valor de X. Con este nuevo valor
de la variable independiente, se repite el proceso desde el paso 2.

El diagrama de flujo del proceso anterior quedaría de la manera que se muestra en la figura 1a.
Para graficar funciones que involucran dos variables independientes es análogo, solamente que en
este caso se tendrán dos ciclos anidados por cada variable independiente (figura 1b).

En los diagramas de flujo, la función de paso está indicada como Transición(X) y no

necesariamente es la misma para todas las variables independientes. Una función de paso sencilla
podría ser el incrementar la variable independiente (X o Y) en una unidad, en cuyo caso la función
de paso quedaría expresada de la siguiente manera:

X := X + 1; o Y:= Y + 1;

Tómese como ejemplo el siguiente problema:

Un albañil tiene que colocar 100 bloques para construir un segmento de muro. Cada que el albañil
coloca un bloque en el muro, se mide el tiempo en minutos (T) que tarda en colocarlo. Para este
ejemplo, supóngase que el tiempo que tarda el albañil en colocar un bloque está dado por la
siguiente expresión:
T:= 8/X + 0.02X + 2

Donde X representa la cantidad de bloques colocados en el muro. Elaborar un algoritmo para

graficar los puntos correspondientes (X, T).
 (a) (b)
Inicio Inicio

Xinicial := primer valor de X

Xinicial := primer valor de X Xfinal := último valor de X

Xfinal := último valor de X Yinicial := primer valor de Y

Yfinal := último valor de Y

X := Xinicial X := Xinicial
Y := Yinicial

Ciclo X := Xinicial
Y := Yinicial

Y := F(X); Fin Ciclo X Fin

(X, Y)
X >= Xfinal Ciclo Y
NO

SI Z := F(X, Y);
X := Transición (X);
X >= Xfinal
NO
(X, Y, Z)
SI
Fin de ciclo X
X := Transición (X);
Y >= Yfinal
NO

Fin de ciclo SI
Y := Transición (Y);

Fin de ciclo Y

Figura 1.- Algoritmo para graficar funciones de una (a) y dos variables independientes (b)

En este caso, el dominio de la variable independiente comprende desde 1 hasta 100. El algoritmo
de graficación de este problema quedaría de la siguiente manera utilizando seudocódigo:

Xinicial := 1;
Xfinal := 100;
X := Xinicial;
Mientras X sea menor o igual a Xfinal hágase
Inicio
T:= 8/X + 0.02*X + 2;
Graficar( X, T );
X:= X+1;
Fin;

El seudocódigo anterior hace uso de un ciclo controlado por una condición que se prueba al inicio
(similar al ciclo While), pero también se puede hacer uso de una instrucción cíclica con pasos fijos
(tal como el ciclo For) o una instrucción que compruebe la condición de término al final (Repeat).
Los siguientes casos ilustran las soluciones alternativas a este problema:
Caso 1: Usando ciclos con pasos fijos:

Desde Contador := 1 hasta 100 hágase

Inicio
T:= 8/X + 0.02*X + 2;
Graficar( X, T );
X:= X+1;
Fin;

Caso 2: Usando ciclos con comprobación al final:

Repetir
T:= 8/X + 0.02*X + 2;
Graficar( X, T );
X:= X+1;
Hasta que X sea mayor o igual a Xfinal

Se tiene que tener especial cuidado en el caso 1, pues la variable que lleva la cuenta de los ciclos
tiene que ser de tipo ordinal. En este caso particular, el conteo coincide con el número de bloques
que el albañil tiene que colocar.

Nótese también la diferencia entre las condiciones de termino del ciclo para la solución inicial y la
del caso 2. Originalmente el ciclo se ejecuta mientras X sea menor o igual al valor final y para el
caso 2, el ciclo se ejecuta hasta que el valor X sea mayor o igual al valor final.

En cualquiera de los casos que se han expuesto hasta ahora, el paso de un valor de X a otro no
necesariamente se tendrá que realizar en incrementos enteros. Así mismo, por cuestiones de
sencillez, en esta sección se limitará el uso de las gráficas a dos dimensiones.

EL OBJETO TCHART©

Delphi posee un control específicamente orientado a desplegar gráficas de dos dimensiones, por lo
que el caso de graficar funciones de una variable independiente está cubierto por dicho control. Se
incluyen en el entorno de desarrollo los componentes Chart, en la pestaña Additional. Para Ilustrar
este proceso, selecciónese un proyecto en blanco y localice el control Chart de la barra
correspondiente.

Para incluir una gráfica tipo Chart en un formulario, se tiene que seleccionar el objeto Chart y
colocarlo en un formulario. Coloque dicho control sobre el formulario. Una vez hecho esto, el
formulario cuenta con un objeto gráfico en blanco (fig. 2). Seleccionando sobre él, con el botón
secundario del ratón (fig. 3), se puede acceder a Edit Chart (fig. 4), que va a ser la herramienta
principal de trabajo.

La base de todo lo que se realice va a partir de las Series, sobre ellas se crearán los atributos y
formas de visualización, serán quienes tomen los valores para componer la gráfica. Así pues, se
añadirá con el botón Add la primera de ellas. Una vez que se ha pulsado, aparecerá la Galería con
un aspecto similar al que se puede apreciar en la Figura 5. Por defecto, en la parte
inferior derecha está activa la marca para crear en 3D. Si no es esa la intención, solo se tiene que
utilizar el ratón para desactivarla, con lo que todas las series perderán el fondo. Cualquier opción
que se elija va a verse reflejada en el panel del gráfico, con unos valores en principio aleatorios.
 Figura 2.- Objeto Gráfico en blanco.

Figura 3.- Acceso al editor de gráficas

Figura 4.- Editor de Graficas

 Figura 5.- Galería de Gráficas

Una vez elegida la serie que resulte conveniente, se puede apreciar que en el panel de edición
aparece ésta dibujada en miniatura en la parte izquierda, a continuación hay una marca que se
utiliza para activar o no la serie (fig. 6). Para este ejemplo, se suprimió la opción de tres
dimensiones (3D en la fig. 5). Si no se ve el formulario, se puede desplazar la ventana de edición.
En ésta ventana se ha creado el gráfico correspondiente a la serie seleccionada, con unos valores
arbitrarios, y que desactivando esta marca la figura desaparece. Además, en el módulo de código
correspondiente tenemos dos valores en la sección type, el TChart y el correspondiente a lo que
hemos elegido, por ejemplo TLineSeries, TBarSeries, etc.

Figura 6.- Añadir una serie

Las restantes opciones en la pantalla de edición son el color, que veremos como modificarlo, y el
título. En los botones de la derecha veremos que el editor nos deja añadir cuantas series queramos
y del tipo que sean. Es lógico, puesto que en un mismo gráfico se puede combinar distintos valores
o representar los mismos de distintas formas superpuestas e incluso tenerlos creados, aunque
inactivos, hasta el momento de su uso.

El resto de las opciones son simples, borrar una serie, cambiar su título, duplicarla o sustituirla por
otra de la Galería. En este momento se ha creado el esqueleto del gráfico, con él que se podrá
empezar a trabajar.
 Nota A cada uno de las gráficas a representar se le da el nombre de Serie, de manera que
: la creación de éstas es la base de, inicio para el manejo de este software. Esto es muy
similar a la manera de graficar de Microsoft Excel.

COLOCACIÓN DE BLOQUES

Recordando lo visto previamente, para graficar en dos dimensiones se necesitan conocer los
siguientes elementos:

1. Iniciar en un valor para la variable independiente.

2. El punto de finalización para la variable independiente.
3. Construir el ciclo que servirá para obtener los puntos (X,Y) en el dominio de la función que
se graficará, desde el punto de inicio hasta el punto final de la variable independiente.
Dentro de este ciclo:
a. La ecuación a graficar o la relación entre la variable dependiente e independiente
b. La función de transición, paso o incremento entre los valores de la variable
independiente.

Con el proyecto ya iniciado, se editará el objeto Chart y se agregará una serie tipo FastLine. En
este ejemplo, dicha serie tendrá el nombre de Series1.

Se agregará al formulario un botón de ejecución. En este momento, se debe de contar con un

formulario similar al de la figura 7.

Figura 7.- Aplicación de ejemplo

Se tomará el seudocódigo del ejemplo del albañil como ejemplo para construir el procedimiento de
ejecución:

Xinicial := 1;
Xfinal := 100;
X := Xinicial;
 Mientras X sea menor o igual a Xfinal hágase
Inicio
T:= 8/X + 0.02*X + 2;
Graficar( X, T );
X:= X+1;
Fin;

En el botón de ejecución se agregará el seudocódigo ya traducido a pascal:

 procedure TForm1.Button1Click(Sender: TObject);
var
Xinicial, Xfinal, X, T: real;
begin
Xinicial := 1;
Xfinal := 100;
X := Xinicial;
While X <= Xfinal do
begin
T:= 8/X + 0.02X + 2;
Series1.AddXY( X, T ); //Graficar ( X, T )
X:= X+1;
end;
end;

Nótese que la función “Graficar” fue sustituida por la aplicación del método AddXY del objeto
Series1, creado dentro del objeto Chart. En efecto, con la creación de cada serie de datos dentro
de una gráfica también se heredan métodos y propiedades para cada serie. En el caso de una
serie del tipo FastLine, para agregar un punto y trazar una línea entre el punto anterior y el
siguiente, este método es el más sencillo a seguir. Otros tipos de series (diagramas de pastel,
flechas, diagramas Gantt, etc.), tienen métodos específicamente diseñados para agregar
información respectivamente.

Es en este momento que ya se puede probar la aplicación y observar los resultados que se
obtendrán. La figura 8muestra el resultado visualizado en el objeto Chart al pulsar el botón de
ejecución del formulario:

Figura 8.- Tiempo de colocación de bloques vs número de bloques

MOVIMIENTO DE PARTÍCULAS

Para este ejemplo, se tiene que la posición de una partícula que se mueve en una trayectoria
rectilínea, está dada por la siguiente relación:

X = T3 – 6T2 + 15T – 40
Donde T es el tiempo que trascurre desde el instante Tinicial = 0 hasta Tfinal = 10 segundos, X es
la posición de la partícula en la recta en la que se desplaza. Trazar la gráfica que muestre cómo
varía la posición X sobre la trayectoria rectilínea, con respecto al tiempo de recorrido de la
partícula. Tómense intervalos de evaluación entre valores de T de 0.25 seg.

En este ejemplo, la variable independiente sería el tiempo y en consecuencia, la posición dentro de

la recta será la variable dependiente. Para este caso, se partirá del algoritmo que se tiene hasta
ahora y de un formulario como el la figura 9:

Figura 9.- Formulario de trabajo

Nota En este caso, en lugar de usar un botón de ejecución normal, se utilizará un objeto
: Bitmap Button. La única diferencia entre estos tipos de botones es que el primero
puede desplegar una imagen en su cara. En su defecto, el lector puede usar un botón
normal.

Tomando el algoritmo para graficar previamente expuesto, se adaptará para este problema
específico:

Tinicial := 0;
Tfinal := 10;
T := Tinicial;
Mientras T sea menor o igual a Tfinal hágase
Inicio
T:= T*T*T – 6*sqr(T) + 15*T -40;
Graficar( X, T );
T:= T + 0.25;
Fin;

Traduciendo el seudocódigo anterior en instrucciones de Object Pascal, el código que se escribirá

en el botón de ejecución queda de la siguiente manera:
 procedure TForm1.BitBtn1Click(Sender: TObject);
var
Tinicial, Tfinal, T, X: real;
begin
Tinicial := 0;
Tfinal := 10;
T := Tinicial;
While T <= Tfinal do
begin
X:= T*T*T – 6*sqr(T) + 15*T -40;
Series1.AddXY( T, X );
T:= T + 0.25;
end;
end;

Al pulsar el botón de ejecución, la gráfica resultante queda según la figura 10:

Figura 10.- Posición de la partícula sobre la trayectoria con respecto del tiempo.

Modificando la información desplegada en la gráfica.

En esta sección se verá cómo modificar el aspecto general de una gráfica. Tómese como ejemplo
la gráfica de la figura 10. Para ello será necesario acceder al editor mediante la selección del objeto
en el formulario y pulsando el botón secundario del ratón. Al seleccionar al editor se desplegará el
menú que se mostró en la figura 4.

Seleccionando la lengüeta “Titles”, se despliegan las opciones correspondientes al título de la

gráfica (figura 11)
 Figura 11.- Edición y formato del título

Introduzca el título “Posición de la partícula” en el campo de edición del título (fig. 12)

Figura 12.- Editando el título

Cámbiese al pie de la gráfica (fig. 13a) e introduzca el texto “Dinámica de Partículas” en el campo
de edición (fig. 13b).

(a) (b)

Figura 13.- Modificando el pie de gráfica

Para eliminar el cuadro de legendas que aparece en el lado derecho de la gráfica, selecciónese la
lengüeta Legend y desmárquese el cuadro Visible (fig. 14).

Figura 14.- Quitando el cuadro de leyendas.

Una vez hecho lo anterior, la gráfica quedará tal como se muestra en la figura 15
 Figura 15.- Visualización de diseño.

Si se requiere que el usuario proporcione los puntos de inicio y fin de la evaluación de la gráfica, se
tendrán que agregar las correspondientes cajas de edición (figura 16) de donde el procedimiento
del botón tomará los valores.

Figura 16.- Formulario con espacios para que el usuario proporcione los límites de
evaluación

Así mismo, se tienen que adaptar las líneas de código correspondientes en el procedimiento del
botón.

Tinicial := strtofloat(Edit1.Text);
Tfinal := strtofloat(Edit2.Text);
El funcionamiento de la aplicación anterior se puede visualizar en la figura 17

Figura 17.- Gráfica de la ecuación de movimiento de la partícula con respecto al tiempo, para
el intervalo T= -10 a 10 segundos
CAÍDA LIBRE DE UNA PARTÍCULA DESDE UNA ALTURA H

Supóngase que se deja caer una partícula desde la azotea de un edificio. Se pide elaborar una
gráfica tipo fastline de dos dimensiones, que muestre cómo varía la altura (en metros) de una
partícula sujeta a la caída libre, desde la altura especificada por el usuario, hasta el suelo, en un
tiempo t (en segundos). Pártase del formulario de la figura 18. Tómense incrementos en el tiempo
de 0.25 segundos. Hágase uso de las opciones de la lengüeta Axis del editor de la gráfica para
modificar tanto los títulos de los ejes, la lengüeta Titles para modificar el título del gráfico, así como
la lengüeta Legend para no hacer visibles las legendas de la gráfica.

Figura 18.- Caída libre, formulario de trabajo

La ecuación que rige la posición de una partícula en un movimiento uniformemente acelerado, con
una velocidad y posición iniciales iguales a cero, está dada por la expresión de la ecuación 1:

S( t )  at 2 Ec. 1

Sustituyendo el término genérico S por H y conociendo que la aceleración es la de la gravedad

(expresada en términos de g):

H( t )  gt 2 Ec. 2

Recordando que la altura que se calculará es igual a la diferencia entre la altura original
(proporcionada por el usuario), menos la obtenida por la expresión 2, se llega a la expresión de la
ecuación 3.

2
H( t )  H  gt
0 Ec. 3

El siguiente listado es el código que el programador puede escribir en el botón para resolver este
problema en particular:
 procedure TForm1.BitBtn1Click(Sender: TObject);
const
g = 9.81;
var
H0, HT, T : real;
begin
H0 := strtofloat(Edit1.Text);;
T := 0;
Repeat
HT:= H0 – g*sqr(t);
Series1.AddXY( T, HT );
T:= T + 0.25;
Until HT <= 0
end;

El código anterior da como resultado la gráfica siguiente:

Figura 19.- Caida libre (defectuoso)

El hecho de que aparezcan términos de altura menores a cero implica que, aunque el código está
correcto, los últimos valores ( T, HT ) se envían a la gráfica, aunque posteriormente el ciclo se
detenga. Para evitar esta discrepancia, basta con agregar una sentencia que envíe el flujo del ciclo
al final del mismo, cuando se detecta que se ha llegado a un valor menor al límite, antes de que se
llegue a la sentencia de graficación. Si la siguiente instrucción se coloca antes del envío de la
pareja de puntos, la gráfica da como resultado un curva correcta.

Por ejemplo:

Repeat
...
if HT < 0 then continue;
Series1.AddXY( T, HT );
...
Until HT <= 0

Producirá un comportamiento mas adecuado que en el caso anterior (fig. 20).

 Figura 20.- Versión de graficación correcta

TRAZO DE POLÍGONOS

Supóngase que se necesita realizar un trazo de un polígono cerrado de dos dimensiones, a partir
de sus coordenadas. En este tipo de aplicación, el usuario ingresa en el sistema las coordenadas
(X ,Y) de cada punto. El trabajo del sistema será conectar cada pareja de puntos consecutivos (X1,
Y1) y (X2, Y2). Cuando se llega al último punto, el sistema deberá conectar a este con el primero
que el usuario halla asignado.

En este caso se utilizará un ejemplo en el que el usuario ingrese cuatro parejas de datos, para
trazar el polígono. Para ello será necesario poner ocho cajas de edición en un formulario en blanco,
sus correspondientes etiquetas, un botón de ejecución y un campo de gráficas.

Para este problema, se hará uso de una gráfica de flechas para representar las líneas del polígono
a dibujar. Para este ejemplo, se agregará una serie del tipo Arrow, (fig.21). para este caso se
desmarcará la opción 3D.

Figura 21.- Diagrama de flechas

En la lengüeta Titles del formulario de edición se puede modificar el título de la gráfica. Se de-
seleccionar la visibilidad de las leyendas en la lengüeta Legend. En la lengüeta Axis se
seleccionará la opción de modificar el título del eje izquierdo (fig. 22a), de la misma manera se
modificará la del eje inferior (fig. 22b).

(a) (b)
 Figura 22.- Títulos de los ejes.

El propósito de lo anterior es obtener un formulario similar al de la figura 23.

Figura 23.- Formulario para el ejemplo de graficar un polígono cerrado.

Para graficar una flecha, es necesario establecer un punto de inicio (X1, Y1) y uno de terminación
(X2, Y2). En Delphi, esto se logra con el método AddArrow de la serie. Dicho método tiene la
sintaxis siguiente:

Serie.AddArrow(X1, Y1, X2, Y2,'Texto', color)

Donde X1, Y1, X2, Y2 son los puntos de inicio y fin de la flecha. ‘Texto’ es un texto que aparece
sobre la flecha a trazar en la gráfica. Por último, color puede tomar cualquiera de (aunque no está
limitado a) los siguientes valores: clAqua (Agua), clBlack (Negro), clBlue (Azul), clDkGray (Gris
Oscuro), clFuchsia (Fucsia), clGray (Gris), clGreen (Verde), clLime (Lima), clLtGray (Gris ligero),
clMaroon (Marrón), clNavy (Azul Marino), clOlive (Verde oliva), clPurple (Púrpura), clRed (Rojo),
clSilver (Plata), clTeal (Teal), clWhite (Blanco), clYellow (Amarillo).

El siguiente código en el botón, resuelve el problema de trazar las flechas entre los puntos que el
usuario introducirá en las cajas de edición:

procedure TForm1.BitBtn1Click(Sender: TObject);

var
PX1, PY1, PX2, PY2,
PX3, PY3, PX4, PY4: real;
begin
series1.clear;
PX1:= strtofloat(Edit1.Text);
PY1:= strtofloat(Edit2.Text);
PX2:= strtofloat(Edit3.Text);
PY2:= strtofloat(Edit4.Text);
PX3:= strtofloat(Edit5.Text);
 PY3:= strtofloat(Edit6.Text);
PX4:= strtofloat(Edit7.Text);
PY4:= strtofloat(Edit8.Text);

series1.AddArrow(PX1, PY1, PX2, PY2,'', clblack);

series1.AddArrow(PX2, PY2, PX3, PY3,'', clblack);
series1.AddArrow(PX3, PY3, PX4, PY4,'', clblack);
series1.AddArrow(PX4, PY4, PX1, PY1,'', clblack);
end;

Teniendo el código anterior en el botón de ejecución, se dispondrá a probar la aplicación, con los
valores de la tabla 1:
Tabla 1.- Coordenadas X, Y del problema
X Y
0 0
4 3
2 4
1 5

Figura 24.- Trazo de un polígono cerrado con cuatro coordenadas

Es claro que esta aplicación será factible de ser utilizada para aquellos problemas en los que se
involucren cuatro parejas coordenadas. Sin embargo, la mayoría de los problemas que involucran
el trazo de polígonos (sobre todo en topografía), involucran una cantidad indefinida de puntos. El
problema involucra los siguientes puntos:

1. Se necesita de contar en este caso de un dispositivo para capturar la información del

usuario (una serie no predefinida de parejas de datos) en el formulario. El contenido de
dicho dispositivo deberá de ser enviado a un archivo de texto para su procesamiento.
2. Para cargar la información en memoria, se deberá de leer línea por línea el archivo de
texto, donde se deberá tener especial atención al punto inicial (pues será el inicio y fin del
polígono). En este caso, dicho punto será conocido como X0, Y0
3. El primer punto (sea X1, Y1) de la sucesión será igual al punto inicial.
4. Se leerá la siguiente serie de valores X e Y (X2, Y2).
5. Se trazará la flecha del punto X1, Y1 al punto X2, Y2
6. Para trazar el siguiente punto, se hará al punto X1, Y1 igual al X2, Y2 y se repetirá el
proceso desde el paso 4, mientras no sea fin del archivo.
7. Cerrar el archivo
8. Trazar la última flecha desde el último punto leído (en este caso X2, Y2), hasta X0, Y0.
El siguiente diagrama de flujo representa la secuencia y lógica de los pasos anteriores:

Inicio

Guardar la lista de Archivo

datos del usuario de texto

X0, Y0

X1:= X0
Y1:=Y0

Not
EOF(Archivo)

X2, Y2

Trazar línea de
(X1, Y1) a
(X2, Y2)

X1:= X2
Y1:=Y2

Trazar línea de
(X2, Y2) a
(X0, Y0)

Fin

Figura 25.- Diagrama para graficar un polígono cerrado, a partir de una serie no definida de
datos.

Para el desarrollo de esta aplicación, se utilizará un formulario similar al de la figura 26.

 Figura 26.- Formulario de trabajo.

En dicho formulario se han agregado:

1. Un campo memorando, que servirá para que el usuario ingrese la lista de puntos que se
graficarán. Nótese que se ha sustituido el contenido original del memorando (modificando
la propiedad Lines del campo) y se han agregado dos pareja datos, como valores iniciales.
Se tiene que hacer la aclaración de que el usuario ingresará parejas de datos numéricos.
Si el usuario ingresa letras o títulos en el memorando, se obtendrán mensajes de error.
2. Un objeto Chart, que servirá para trazar el polígono. Se utilizará uno con propiedades
similares al del ejemplo anterior.
3. Un botón de ejecución.

Se presenta a continuación el código correspondiente a escribir en el botón de ejecución:

procedure TForm1.BitBtn1Click(Sender: TObject);

var
X0, Y0, X1, Y1, X2, Y2: real;
Archivo : textfile;
begin
Memo1.Lines.SaveToFile('Coordenadas.TXT'); {Guardando a archivo}
series1.clear; {Limpiando la serie}
assignfile(Archivo,'Coordenadas.TXT'); {asignando el archivo}
reset(Archivo); {Abriendo el archivo}
readln(Archivo, X0, Y0); {leyendo la pareja de puntos iniciales}
X1:= X0; {inicializando la primera pareja de puntos}
Y1:= Y0;
While not eof(Archivo) do
begin
readln(Archivo, X2, Y2); {leyendo la siguiente coordenada}
series1.AddArrow(X1, Y1, X2, Y2,'', clblack);
{Trazando desde (X1, Y1) a (X2, Y2)}
X1:= X2; {preparando el siguiente punto }
Y1:= Y2;
end;
closefile(Archivo); {cerrando el archivo}
series1.AddArrow(X2, Y2, X0, Y0,'', clblack);
{cerrando el último lado del polígono}
end;
Para probar la aplicación se utilizarán los datos que se presentan e la tabla 2
Tabla 2.- Datos de prueba
X Y
0.00 0.00
3.00 2.50
3.00 4.50
2.50 2.50
1.00 4.30

Una vez compilada, la aplicación coloca la información según se muestra en la figura 27:

Figura 27.- Formulario de trabajo.

Diagramas de Gantt y Cronogramas Object Pascal

El manejo de información gráfica es de suma importancia al momento de presentar información

que se encuentra relacionada con el desarrollo de actividades en un cronograma. Los cronogramas
de barras o “gráficos de Gantt” fueron concebidos por el ingeniero norteamericano Henry L. Gantt,
uno de los precursores de la ingeniería industrial contemporánea de Taylor. Gantt procuro resolver
el problema de la programación de actividades, es decir, su distribución conforme a un calendario,
de manera tal que se pudiese visualizar el periodo de duración de cada actividad, sus fechas de
iniciación y terminación e igualmente el tiempo total requerido para la ejecución de un trabajo. El
instrumento que desarrolló permite también que se siga el curso de cada actividad, al proporcionar
información del porcentaje ejecutado de cada una de ellas, así como el grado de adelanto o atraso
con respecto al plazo previsto.

Este tipo de gráfico consiste básicamente en un sistema de coordenadas en que se indica:

En el eje Horizontal: un calendario, o escala de tiempo definido en términos de la unidad más

adecuada al trabajo que se va a ejecutar: hora, día, semana, mes, etc.
En el eje Vertical: Las actividades que constituyen el trabajo a ejecutar. A cada actividad se hace
corresponder una línea horizontal cuya longitud es proporcional a su duración en la cual la
medición efectúa con relación a la escala definida en el eje horizontal conforme se ilustra.

Características

 Cada actividad se representa mediante un bloque rectangular cuya longitud indica su

duración; la altura carece de significado.
 La posición de cada bloque en el diagrama indica los instantes de inicio y finalización de
las tareas a que corresponden.

Tarea Duración
A 2
B 3
C 2
D 3
E 2
F 3
G 3
H 2

Figura 28.- Un Gráfico de Gantt típico

Elaboración de un Diagrama de Gantt

Para construir un diagrama de Gantt utilizando Delphi se han de seguir los siguientes pasos:

1. Pártase de un formulario en blanco y colóquese un objeto TChart en él (Fig. 2).

2. Utilizando el editor de Gráficos (Fig. 4), agréguese una serie nueva tipo Gantt (Fig. 29a)

3. Para este ejemplo, se cambiará el título por defecto de la serie (“Series1”, Fig. 29b), por
“Actividades” (Fig. 29c).

4. En la lengüeta “Axis”, seleccione el eje izquierdo (“Left”) y seleccione la sublengüeta

“Titles”, para modificar el título de dicho eje y cambiarlo a “Actividades”, (Fig. 29d)

5. En la misma lengüeta “Axis”, seleccione el eje inferior (“Bottom”) y seleccione la

sublengüeta “Titles”, para modificar el título de dicho eje y cambiarlo a “Fechas” (Fig. 29e).

6. En la lengüeta “Axis”, seleccione el eje izquierdo (“Left”) y seleccione la sublengüeta

“Scales”, para modificar la escala de dicho eje. Cambiar las escalas a automáticas (Fig.
29f).

7. En la misma lengüeta “Axis”, seleccione el eje inferior (“Bottom”) y seleccione la

sublengüeta “Scales”, para modificar la escala de dicho eje. Cambiar la fecha máxima por
 cálculo automático y la fecha mínima por una fecha fija cuyo valor sea Enero/01/2003 (Fig.
29g).

8. Seleccionando la paleta “Titles” del Editor de gráficas, cámbiese el título del gráfico por
“Cronograma” (Fig. 29h).

9. Añádase un botón de ejecución para introducir el código del ejemplo.

Hechos los pasos anteriores, se debe de contar con un formulario similar al de la Figura 30. La
información que se presenta en el objeto gráfico es completamente aleatoria. De hecho, si en este
momento se manda a ejecutar el formulario, el gráfico se muestra en blanco. Sin embargo, cuando
se envíe información al gráfico, se mostrará el nombre de la actividad y un dígito, que en este caso
representa el equivalente entero de la fecha de inicio.

(b)

(a)

(c)

(d) (e)

(f)
(g)
 (h)

Figura 29.- Insertando un gráfico Gantt

 Figura 30.- Formulario de trabajo

Nota Para eliminar el cuadro de legendas de la vista de la gráfica, en el editor de gráficos,

: selecciónese la lengüeta “Legend” y desmárquese el cuadro “Visible” (Fig. 14).

Para añadir una actividad, agréguese el siguiente código al botón de ejecución:

procedure TForm1.BitBtn1Click(Sender: TObject);

begin
{Agregando Actividad}
Series1.AddGantt( EncodeDate( 2003, 1, 1 ),
EncodeDate( 2003, 1, 2 ),
0,
'Limpieza' );
end;

AddGantt es una función que agrega una barra a una serie Gantt. Su sintaxis es la siguiente:

SERIE_A_AGREGAR.AddGantt( Fecha_de_Inicio,
Fecha_de_Término,
Altura_en_el_eje_izquierdo,
Rótulo_de_la_Barra );

Tanto la fecha de inicio como la de término son números equivalentes en el sistema de fechas del
sistema operativo. Es por ello que en lugar de utilizar los referidos números, mejor se utiliza la
función de codificación de fechas EncodeDate. La Altura es un número entero que le dice al
objeto gráfico a qué nivel, a partir del eje horizontal se colocará la barra. Finalmente el rótulo de la
barra es el texto que aparecerá en el eje izquierdo.

La sintaxis de la función EncodeDate es la siguiente:

 EncodeDate( Año, Mes, Día)

Donde Año, Mes y Día son números válidos para fechas. El año, deberá estar comprendido entre
1 y 9999. El mes, entre 1 y 12. Para el día, se tiene que verificar su congruencia con el mes (1 a
28, 29, 30, o 31 dependiendo del mes).

La figura 31 muestra la aplicación en ejecución:

Figura 31.- Agregando una barra.

Tomando como punto de partida el programa anterior, se procederá a hacer que la aplicación tome
los datos que el usuario le proporcione. Para ello será necesario agregar seis cajas de edición al
formulario para capturar las fechas de inicio y término, se agregará una caja para capturar el rótulo,
así como una más para la altura. Además de lo anterior, se agregará un botón para limpiar la
gráfica y uno para salir de la aplicación. Con esto el formulario quedará de la siguiente manera:
 Figura 32.- Formulario con espacios para ingresar información

El proceso del botón de ejecución implicará los siguientes pasos:

1.- Leer los valores proporcionados por el usuario y asignarlos a las variables correspondientes:
Actividad, de tipo string; tanto las fechas de inicio y terminación (día, mes y año), serán de
tipo entero; finalmente el nivel será de tipo entero.
2.- Una vez leídos, se envían al gráfico usando AddGantt.

El siguiente código ejecuta el proceso anterior:

procedure TForm1.BitBtn1Click(Sender: TObject);

var
Actividad: shortstring;
InicioDia, InicioMes, InicioYear,
FinDia, FinMes, FinYear,
Nivel : integer;
begin
{Leer Variables}
Actividad := Edit1.Text;
InicioDia := strtoint(Edit2.Text);
InicioMes := strtoint(Edit3.Text);
InicioYear := strtoint(Edit4.Text);
FinDia := strtoint(Edit5.Text);
FinMes := strtoint(Edit6.Text);
FinYear := strtoint(Edit7.Text);
Nivel := strtoint(Edit8.Text);
{Añadir Actividad}

Series1.AddGantt( EncodeDate( InicioYear, InicioMes, InicioDia ),

EncodeDate( FinYear, FinMes, FinDia ),
Nivel,
Actividad );
end;
La siguiente figura muestra el resultado de ejecutar el programa con tres actividades que se le han
proporcionado junto con sus respectivas fechas de inicio y terminación (y nivel).

Figura 33.- Ingresando actividad por actividad

El hecho de poder enviar al objeto gráfico la información que el usuario ingrese correspondiente a
cada actividad es un gran adelanto con respecto a la aplicación anterior. Pero igual que en el caso
de la aplicación de graficación de polinomios, la mayoría de los problemas que implican reportar
información temporal de actividades, involucran una cantidad indefinida de actividades. El
problema involucra los siguientes puntos:

1. Se necesita de contar en este caso de un dispositivo para capturar la información del

usuario o generada por otra aplicación (una lista no definida previamente de datos de
actividades, con sus fechas de inicio y fin) en el formulario. El contenido de dicho
dispositivo deberá de ser enviado (en el caso de información producida por el usuario,
ingresada a través del formulario) a un archivo de texto o leída de un archivo (para el caso
de información producida por una tercera aplicación) para su procesamiento.
2. Para esta aplicación, se cargarán los datos en memoria a partir de la lectura línea a línea
de un archivo de texto, teniendo en cuenta qué información tiene cada línea del archivo.
Cada línea que se leerá la siguiente serie de valores: Nombre de la actividad, fecha de
inicio (día, mes y año), fecha de terminación (día, mes y año).
3. Para que cada barra sea graficada en un nivel diferente, se hará uso de un contador de
niveles, que vaya cambiando de manera automática. Es una práctica común que cada
actividad sea añadida de arriba hacia abajo en el objeto gráfico, por lo que se hará
decrementar el contador de niveles.
4. Se trazará la barra de la actividad con su nombre, la fecha inicio codificada, la fecha de fin
codificada y el nivel correspondiente, mientras no sea fin del archivo.
5. Cerrar el archivo una vez que no halla más información en el.

El siguiente diagrama de flujo muestra cómo se llevaría a cabo el proceso descrito anteriormente.

Para esta aplicación, se hará que el usuario ingrese la información de las actividades en un
memorando, para luego grabarla en un archivo de texto (Véase la fig. 35). Observe que en el
formulario de trabajo se han separado la operación de grabar la información de la de
procesamiento, con el fin de simplificar el código que se programarán en los botones. También
obsérvese que el nombre de la actividad está en una línea aparte del de la información numérica
correspondiente a la misma, para evitar confundir al lector del sistema. El código correspondiente
para el dibujo del diagrama de Gantt se muestra a continuación:

Inicio

Guardar la lista de Archivo

datos del usuario de texto

Nivel = 10

Not EOF(Archivo)

Actividad,
Inicio (día, mes, año)
Fin (día, mes, año)

Trazar Barra
Actividad,
Inicio, CódigoFecha(día, mes, año)
Fin, CódigoFecha(día, mes, año)
Nivel

Decrementa(Nivel)

Fin

Figura 34.- Graficando un número no definido de actividades, a partir de un archivo de texto.

El usuario agrega la información en un objeto del formulario.
 procedure TForm1.BitBtn1Click(Sender: TObject);
var
Actividad: shortstring;
InicioDia, InicioMes, InicioYear,
FinDia, FinMes, FinYear,
Nivel : integer;
Archivo: textfile;
begin
Nivel:= 10; //Inicializa el contador de niveles
Series1.Clear;
// Abrir y asignar el archivo de texto
assignfile(Archivo, 'temp.txt');
reset(Archivo);
// Mientras no sea el fin del archivo
while not eof(Archivo) do
begin
// Lee el nombre de la actividad
readln(Archivo, Actividad);
{ Si es una línea en blanco, continua(salta) todo el código
siguiente, hasta el fin del ciclo y vuelve a comenzar }
if Actividad = '' then continue;
readln(Archivo, InicioDia,
InicioMes,
InicioYear,
FinDia,
FinMes,
FinYear);
// Añadir Actividad a la gráfica
Series1.AddGantt(
EncodeDate( InicioYear, InicioMes, InicioDia ),
EncodeDate( FinYear, FinMes, FinDia ),
Nivel,
Actividad );
Dec(Nivel); // Disminuye el Nivel Actual
end;
closefile(Archivo); //Cierra el Archivo
end;

La figura 36 muestra cómo se despliega el diagrama de Gantt con la siguiente información:

Inicio
1 1 2003 2 1 2003
Limpieza
2 1 2003 3 1 2003
Nivelación
3 1 2003 5 1 2003
Trazo
5 1 2003 7 1 2003
Fin
7 1 2003 8 1 2003
 Figura 35.- Formulario de trabajo

Figura 36.- Procesando la información del usario.

Nótese que a diferencia de aplicaciones como MS Project o Primavera® Project Planner®, las
barras no pueden manipularse de manera directa, y no se pueden establecer relaciones de
precedencia de manera dinámica, con solo manipular el botón del mouse. Sin embargo existen
controles más complejos que el TChart que sí permiten este tipo de manipulaciones. La
herramienta que se presenta en este trabajo sin embargo, facilita la elaboración de aplicaciones
capaces de reportar información con dimensiones temporales.

Con respecto a la lectura de los archivos de texto, estos no son precisamente eficientes a la hora
de leer y escribir información con tipos mixtos. Lo mejor en este caso es usar archivos con tipo o en
su defecto utilizar una aplicación que maneje bases de datos. Lo anterior produce mejores
resultados a la hora de leer información.

Se debe hacer notar también que un Memo no es precisamente la mejor manera de representar la
información para captura. El objeto más adecuado para ello es un control rejilla (Grid), similar al de
las hojas de cálculo, pero la implementación de dicha solución queda para un posterior desarrollo.