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;


No hay comentarios:

Publicar un comentario