Generación de gráficos con TeeChart

Generación de gráficos con TeeChart

Autor:

José Luis Freire

jlfreire@elrinconcito.com

Prohibida la reproducción total o parcial sin permiso explícito del autor.

Figura 1

Generación de gráficos con TeeChart

Desarrollados para Delphi y Borland C++ Builder, su integración con el

entorno y relativa facilidad de manejo, convierten a estos componentes

en una importante herramienta.

Cuando se instala un paquete de Delphi, herramienta a la que vamos a referirnos en esta serie de

artículos, se incluyen en el entorno de desarrollo los componentes Chart, en la pestaña Additional,

DBChart en Data Controls y QRChart, en la correspondiente a QReport. Ambos son los estándares de

éste software elaborado por TeeMach, de Barcelona (a pesar de ello la documentación está en inglés,

aunque es de agradecer que la Web se esté traduciendo) del ya muy experto en programación gráfica

David Berneda.

Al adquirir la versión profesional del producto se generan otros, bajo la pestaña TeeChart, que a título

meramente enunciativo son ChartEditor, ChartPreviewer, Draw3D, ChartScrollBar,

TeeCommander, ChartListBox, SeriesDataSet y TeeOpenGL.

Hay más diferencias importantes entre una y otra versión, como son Superficies, Curvas Bezier, Polares,

Barras de Error, etc. o las opciones de ejemplo como la Brújula, el Reloj o Barras con Imágenes, entre

otras. No obstante, y a pesar de basarme en la 4 Profesional, serán omitidas las características particulares

de la misma, a fin de que seamos capaces de seguir y comprender los ejemplos que iremos exponiendo a

lo largo de estos artículos.

Desde el menú contextual

Desde la pestaña Additional y pinchando con el botón principal en el componente Chart lo trasladamos

a nuestro formulario como cualquier otro objeto. Habremos añadido un componente del tipo TChart,

denominado por defecto Chart1 en el Inspector de Objetos, y podemos trabajar con él tal y como estamos

acostumbrados, pero en el momento en el que seleccionemos cualquier opción con un doble clic, lo que

va a hacer es mostrarnos la pantalla de diseño que podemos obtener pulsando el botón secundario del

ratón en cualquier punto del componente, con lo que abrimos el menú.

Aparte de la versión, el © y el Acerca de..., hay tres opciones que nos importan: Edit Chart, Print

Preview y Export Chart.

La primera de ellas permite el diseño de lo que en ejecución serán nuestros gráficos. La segunda generará

una previsualización de lo que hemos elaborado, y nos permite imprimir seleccionando el dispositivo, la

posición del papel, los márgenes, etc. tal como muestra la Figura 1. La tercera, como se puede suponer,

está referido a la

exportación del gráfico,

para lo que ofrece tres

posibles tipos de

ficheros: BMP, WMF y

EMF, añadiendo un

cuarto propio, el TEE,

según la versión del

componente que

estemos utilizando.

Es evidente que

cualquiera de las

opciones mencionadas

puede realizarse

mediante código y en

ejecución. No obstante,

resulta muy útil tener

estas posibilidades en

diseño, y vamos a

referirnos a ésta forma

de trabajo por ahora.

El punto fuerte es la

1

2

Figura 2

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.

Generación de gráficos con TeeChart

o elaboración de los gráficos.

Trabajemos con Edit Chart creando Series

Como hemos dicho, si abrimos la paleta Additional nos encontramos con el componentes Chart, vamos

a ubicarlo en nuestra forma. Nos aparecerá simplemente un rectángulo preparado para 3D y con la

leyenda “TChart” en la parte superior.

Pinchando sobre él, con el botón secundario del ratón podemos acceder a Edit Chart, que va a ser

nuestra herramienta de trabajo. Cualquier opción que elijamos va a verse reflejada en el panel del gráfico,

con unos valores en principio aleatorios.

Pues bien, la base de todo lo que realicemos va a partir de las Series, sobre ellas crearemos los atributos y

formas de visualización, serán quienes tomen los valores para componer la gráfica. Así pues, vamos a

añadir con el botón Add la primera de ellas. Una vez que hemos pulsado nos aparecerá la Galería con un

aspecto similar al que se puede apreciar en la Figura 2, dependiendo de la versión que se esté utilizando.

Por defecto, en la parte

inferior derecha está activa la

marca para crear en 3D. Si no

es esa nuestra intención, solo

tenemos que utilizar el ratón

para desactivarla, con lo que

todas las series perderán el

fondo.

Una vez elegida la serie que

nos resulte conveniente,

podemos 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. Si no vemos el

formulario, podemos

desplazar la ventana de

edición. Nos daremos cuenta

que en éste 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.

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 podemos 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.

Bien, hemos creado el esqueleto de nuestro gráfico, con él podemos empezar a trabajar, veremos la forma

de hacerlo después de dar un repaso a las restantes opciones del editor hasta conseguir la pantalla exacta

que buscamos.

¿Editamos el gráfico o las series?

Bueno, es de suponer que ambas. Pero vamos a diferenciar.

3

La opción Axis, es decir, la utilización de los ejes, es a mi parecer

una de las más importantes y complicadas. De ella va a depender

el funcionamiento general del gráfico, pues aquí será donde le

vamos a decir cómo se han de comportar los elementos que creemos.

Una Serie con idénticos valores varía por completo si manipulamos

su representación en relación a las coordenadas.

Generación de gráficos con TeeChart

Lo que estamos denominando “gráfico” sería el Chart completo, su apariencia general, cómo van a

funcionar las coordenadas, qué valores pueden tomar y en qué tipo escalas, cómo será el panel,

distribución de páginas, zoom, etc., y cómo no, se consigue a través de las opciones de la pestaña Chart.

Pero dentro de ese gráfico podemos optar desde lo más simple, que es una serie única, a representar la

misma con distintas formas, como pueden ser líneas y barras superpuestas, o escalas y valores diferentes

en el mismo panel, porque así nos interese para estudios comparativos, por ejemplo. Para ello debemos

optar por elegir desde el color de cada una, hasta la fuente de datos, pasando por el resaltado de los puntos

de inflexión y la representación de sus valores con las máscaras correspondientes, y ello, como el resto de

las opciones, a través de la pestaña Series.

Ya tenemos la edición dividida en sus dos bases, la totalidad y la parte.

Vamos a manejar la opción Chart

La primera opción, Series, la hemos visto al probar la creación de una de ellas y no tiene más misterio.

Solamente resaltar que determinadas opciones, y como es lógico, afectarán o no al resultado dependiendo

del tipo de serie que hayamos elegido. No se puede pretender que el resultado de las opciones sea el

mismo cuando manejamos un gráfico de barras o uno de tarta (pie), por poner un ejemplo, por lo que

vamos a intentar ver los aspectos generales independientes de la serie elegida, salvo que existan

particularidades de interés especial.

En modo de diseño vemos un gráfico que se corresponde a valores “aleatorios“ que el componente

introduce para que podamos trabajar. Si ejecutamos nuestro miniprograma tal y como se encuentra en

estos momentos, no hallaremos más que un panel vacío. Por lo que considero de interés hacer un

paréntesis de manera que podamos introducir valores y ver su funcionamiento en la práctica.

Hagamos algo simple, insertemos un botón y en el evento OnClick introduzcamos cualquier valor que se

nos ocurra, para poder ir viendo resultados. El código sería este:

procedure TForm1.Button1Click(Sender:

...