Cómo añadir gráficos a vuestra app

A continuación os voy a explicar cómo hacer la pantalla de la
app “señales de tráfico de España” en la que se muestran en varios gráficos los
resultados de los diferentes tests.

En el gráfico superior muestra el resultado de los test realizados en el día de hoy y en el gráfico inferior muestra el resultado de todos los test realizados desde que se instaló la aplicación.

Los valores de ambos gráficos se pueden resetear desde la pestaña "Ajustes"

DISEÑO

Como siempre empezamos añadiendo un toolbar (Align=Top) y
varios speedbuttons

  Para volver a la pantalla anterior

Form.Close;

FormAnterior.Show;

  
Para mostrar una imagen de ayuda

image2.Bitmap.loadfromfile(‘Imagen1.jpg’)

 Pone o quita las marcas numéricas asociadas a
cada barra

  graficoHoy.Series[0].Marks.Visible
:= not graficoHoy.Series[0].Marks.Visible

 
graficoTotal.Series[1].Marks.Visible := not
graficoTotal.Series[1].Marks.Visible;

 Pone o quita la leyenda de los gráficos

 
graficoHoy.Legend.Visible := not graficoHoy.Legend.Visible;

 
graficoglobal.Legend.Visible := not graficoGlobal.Legend.Visible;

Después añadiremos un tTabControl con tres pestañas
PROGRESO, GRÁFICOS y AJUSTES. Para añadir una pestaña hay que pulsar con el
botón derecho sobre el tTabControl y activar el menú Add tTabitem.

Posteriormente seleccionaremos  dos componentes tLayout (Align=top y
Align=client) y dos  tChart (Align=client) y los colocaremos sobre la pestaña Gráficos. Hay que comprobar que en la la vista
de estructura quede de esta forma:

Los dos Layout se deben comportar como contenedores de los charts "GraficoGlobal" y "GraficoHoy", esto hay que hacerlo de esta forma para que todas las propiedades de alineamiento del chart  (excepto la propiedad contains) se apliquen sobre los Layout.

AÑADIENDO DATOS A LOS GRÁFICOS.

Haciendo doble clic sobre los tchart abrimos el diseñador de
gráficos

Este componente nos permitirá modificar la forma en el que el gráfico se
muestra al usuario. Podremos añadir nuevas series, cambiar el tipo de gráfico,
colores, quitar y poner leyenda, márgenes, cambiar el fondo, añadir profundidad
3D, etc…

En la app he añadido 2 series, ya que quería mostrar el número de señales correctas e incorrectas de cada test:

- Series[0] llamada LineSeries1 que corresponde con el número
de aciertos.

- Series[1] llamada Series1 que se corresponde con el número
de errores.

Para añadir valores a la serie 0 asociada con el tchart ( Name=grafico)

grafico.Series[0].AddXY(contador, NumAciertos);

y para añadir un nuevo dato correspondiente a la serie 1

grafico.Series[1].AddXY(contador, NumErrores);

Recordar que siempre hay que inicializar los datos de las series (Yo lo
hago en el evento OnShow del Form)

grafico.Series[0].Clear;

grafico.Series[1].Clear;



Es útil crear unos datos de prueba de la forma que os muestro a continuación para ver cómo queda:



for i:=1 to 10 do 

begin

grafico.Series[o].AddXY(i, random(10));

grafico.Series[1].AddXY(i, random(10));

end;