Crear un gráfico de barras con UniGUI

A continuación veremos cómo crear un proyecto con UniGUI que
incorpore gráficos de barras, líneas, etc. Si han utilizado en sus programas el
componente tChart, se darán cuenta de lo parecido que es utilizar su componente equivalente llamado tUniChart, para ello primeramente creamos un nuevo proyecto, después
arrastramos los componentes UniGUI al form Main, creamos sus series de datos con valores
aleatorios y lo ejecutamos sobre un navegador tecleando http://localhost:8077.
Para aquellos que no sepan cómo se instala uniGUI, les recomiendo el siguiente post de Emilio Pérez

Vamos a ver en detalle todos los pasos anteriores:

Abrimos nuestro Delphi Tokyo 10.2 y creamos un nuevo
proyecto, desde New – Other

y seleccionamos UniGUI for Delphi

En la siguiente pantalla seleccionamos “Application
Wizard”.

Se abrirá un asistente para indicar qué tipo de proyecto
queremos crear.

Tenemos varias opciones: Crear un módulo ISAPI (se genera un
archivo dll que se ejecuta desde un Internet Information Server), un Standalone
Server (permite su ejecución en la propia máquina) o un Windows Service Application.

En este caso, como estamos en la fase de desarrollo, seleccionamos
Standalone Server y pulsamos el botón OK.

En el caso de que seleccionemos la opción del módulo ISAPI
para IIS, tendríamos que copiar el archivo dll
generado a la carpeta adecuada dentro del IIS y reiniciar el servicio de IIS
para que la vuelva a cargar, ya que Windows mantiene las dll en memoria y si no lo  reinicias no las actualiza.

En este momento tendremos el esqueleto de un proyecto típico de
UniGUI con 3 units: Main, MainModule y ServerModule.

A continuación desde el inspector de objetos seleccionamos
los siguientes:

 tUniStringList , 
tUniChart, y un tUniButton

y los colocamos de la forma que
indica la siguiente figura:

En el tUniStringList colocaremos
los valores aleatorios de las 2 series numéricas asociadas al componente tUniChart.

Para crear una serie clickeamos sobre el componente tUniChart y en el Inspector de objetos localizamos la propiedad SeriesList y hacemos clic sobre el icono de los 3 puntos que está en esa misma celda.

Se nos abrirá una ventana, después seleccionamos el icono marcado en rojo en la figura de abajo, con el fin de crear una nueva serie (Serie1) en la que definiremos el estilo del gráfico (Si
es de líneas, de barras, circular, etc.)

Repetiremos lo mismo para crear otra serie (Serie2).

Cerramos la ventana.

Y con todo lo comentado anteriormente habremos acabado la parte de definición
de la interfaz; seguidamente vamos a la parte de la codificación, que es muy sencilla.


CODIFICACIÓN:

Tenemos que rellenar las celdas del componente UniStringList con valores aleatorios, para luego leerlas y crear el gráfico de barras con los valores de una columna y el gráfico de línea con los valores de la otra columna.

Hacemos clic sobre el botón tUnibutton y
en el evento asociado llamado onClic tecleamos lo siguiente:

procedure TMainForm.UniButton1Click(Sender: TObject);

var

  I : Integer;

  Val : Double;

  Head : string;

Begin

// INICIALIZAMOS LOS VALORES ALEATORIOS DE LAS CELDAS

// DEL STRINGRID

 

  for I := 0 to 10 do

  begin

    UniStringGrid1.Cells[0,I]:=IntToStr(100+i);

    UniStringGrid1.Cells[1,I]:=IntToStr(Random(100)+50);

  end;

 

// BORRAMOS LOS VALORES DE LAS SERIES

  Series1.Clear;

  Series2.Clear;

 

// CREAMOS LOS VALORES DE LAS SERIES

  for I := 0 to UniStringGrid1.RowCount-1 do

  begin

    if UniStringGrid1.Cells[0,I]='' then Break;

    Val:=StrToFloatDef(UniStringGrid1.Cells[1,I], 0.0);

    Head:=UniStringGrid1.Cells[0,I];

    Series1.Add(Val+Random(100), Head);

    Series2.Add(Val+Random(100), Head);

  end;

end;

Y en principio eso es todo, ahora toca compilar y ejecutar
el proyecto como hacemos con cualquier aplicación Delphi, la diferencia es que
como es una aplicación orientada a la Web necesitamos abrir un navegador (Chrome, Explorer, Mozilla, etc.), tecleando

http://localhost:8077

Por defecto el servidor web escucha en el puerto 8077,
aunque lo podemos cambiar desde la propiedad del form
ServerModule-Port

Una vez abierto el navegador y después de pulsar el botón
ACEPTAR en la ventana en la que nos da las gracias por utilizar UniGUI, veremos la página que hemos creado con Delphi Tokyo.

Pulsamos el botón INICIAR y si todo ha ido bien veremos el
resultado de la ejecución de nuestro código.

Hasta el próximo post

Javier Pareja

blogdelphimagic@blogspot.com