AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV 2024!
Ayuda / Tutorial WINDEV / Tutorial - Aplicación WINDEV: gestionar datos
  • Lección 6 - Gráfico y Tabla dinámica
  • Presentación
  • Visualización de datos en un control Gráfico
  • Seleccionar los datos que se mostrarán en el control Gráfico
  • Crear un control Gráfico
  • Probar el control Gráfico
  • Crear tablas de resumen con el control Tabla dinámica
  • Crear un control Tabla dinámica
  • Prueba del control Tabla dinámica
  • En resumen

Tuto - Aplicación completa con datos

Lección 6 - Gráfico y Tabla dinámica
Abordaremos los siguientes temas:
  • Mostrar datos en un gráfico.
  • Crear tablas de resumen mediante el control Tabla dinámica.
Durée de la leçon 30 min
Presentación
En una aplicación de gestión, a menudo es necesario presentar estadísticas o tablas de resumen. Este tipo de presentación se puede utilizar para hacer un seguimiento de:
  • la evolución de los pedidos a lo largo del tiempo,
  • la evolución del volumen de negocio,
  • la evolución de las existencias,
  • ...
Los gerentes recurren frecuentemente a este tipo de información.
WINDEV propone diferentes controles para incluir fácilmente esta información en sus aplicaciones. En esta lección se utilizarán dos controles específicos:
  • el control Gráfico.
  • el control Tabla dinámica.
Visualización de datos en un control Gráfico
Para manipular el control Gráfico en un escenario de uso real, crearemos un control Gráfico para mostrar el estado de las ventas en la aplicación "WD Full Application".
En primer lugar, crearemos una consulta para seleccionar los datos y, a continuación, crearemos un control Gráfico para mostrarlos.

Seleccionar los datos que se mostrarán en el control Gráfico

En el gráfico, obtendremos la suma de los pedidos por fecha.
Vamos a crear una consulta para hacer una suma. Calcularemos el monto total de los pedidos (campo TotalIOT en el archivo de datos Order).
Vamos a calcular el total de todos los pedidos por fecha (es decir, el volumen de negocio por fecha).

Para crear una nueva consulta:
  1. Haga clic en Crear un elemento en los botones de acceso rápido.
  2. La ventana de creación de nuevos elementos se abre: haga clic en "Consulta".
  3. Vamos a crear una consulta de selección. Elija la opción "Selección (SELECT)". Pase a la etapa siguiente.
  4. La ventana de descripción de la consulta se abre.
  5. Agregue los campos Order.Date y Order.TotalIOT a la consulta:
    • A la izquierda, expanda el archivo de datos "Order".
    • Haga doble clic en el campo Date y luego en TotalIOT.
    • Los dos campos se muestran en el centro de la pantalla (en la parte "Lista de elementos en la consulta").
Para calcular la suma de valores de "Order.TotalIOT":
  1. Seleccione el campo "Order.TotalIOT" en el centro de la pantalla.
  2. En las "Acciones", a la derecha, seleccione "Suma". La ventana de descripción de la suma se abre.
    Consulta - Ventana de descripción de la suma
  3. Valide la descripción de la suma. La suma de "TotalIOT" se agregó a la lista del resultado de la consulta.
El editor de consultas de WINDEV crea las consultas en lenguaje natural y en SQL.
Descripción de la consulta en lenguaje natural
Esto le permite comprobar el objetivo de la consulta.
Ahora vamos a agrupar los datos por año y a ordenarlos:
  1. Seleccione el campo "Order.Date" en el centro de la pantalla.
  2. En las "Acciones", a la derecha, haga clic en "Año, mes" y seleccione "Año". En seguida, se abre una ventana que le permite crear el campo Year:
    Ordenar por año
  3. Valide la ventana (botón "OK").
  4. El campo "Year" aparece en el centro de la descripción de la consulta.
  5. Seleccione "Year" y defina un orden:
    • Abra el menú contextual del campo "Year".
    • Seleccione "Ordenar campo .. Orden ascendente".
    • Una flecha se muestra a la derecha para indicar la dirección del orden.
Se ha creado la consulta. Vamos a darle un nombre y a guardarla.
  1. En la parte superior de la ventana de descripción de la consulta, introduzca:
    • el nombre "QRY_SalesEvolutions".
    • el título "Sum of orders by date".
  2. Valide la ventana de descripción de la consulta.
  3. La ventana para guardar el elemento se abre. Valide la información predeterminada.
  4. La representación gráfica de la consulta es la siguiente:
    Representación gráfica de la consulta
  5. Haga clic en Probar un elemento para probar la consulta.

Crear un control Gráfico

Vamos a crear un control Gráfico en una nueva pestaña de la ventana WIN_Menu.
Para crear una nueva pestaña en la ventana "WIN_Menu":
  1. Abra la ventana "WIN_Menu" en el editor.
  2. Haga doble clic en el control Pestaña: la ventana de descripción del control se abre.
  3. En la pestaña "General", seleccione "Find orders" y haga clic en "Nuevo". Una nueva pestaña se agrega.
  4. Seleccione la nueva pestaña ("Pestaña 4").
  5. En la sección derecha de la pantalla, introduzca el nombre de la pestaña: "Chart".
  6. En la sección derecha de la pantalla, seleccione una imagen del catálogo de imágenes:
    • Haga clic en Mostrar opciones de imagen a la derecha de "Imagen". Seleccione "Catálogo" en el menú contextual que aparece.
    • La ventana del catálogo de imágenes se abre.
    • Escriba "Chart" en la barra de búsqueda.
    • Inicie la búsqueda haciendo clic en la lupa.
    • Seleccione la imagen Gráfico y valide las ventanas que aparecen.
  7. Valide la ventana de descripción del control Pestaña.
  8. Una nueva pestaña aparece en la ventana.
Para crear el control Gráfico:
  1. En la ventana "WIN_Menu", seleccione la pestaña "Chart".
  2. En la pestaña "Creación", en el grupo "Controles gráficos", haga clic en "Gráfico". La forma del control aparece bajo el cursor.
  3. Haga clic en el panel de pestañas "Chart". El asistente para crear el control Gráfico se abre.
  4. En el asistente, seleccione un gráfico de columnas.
    Asistente de creación del control Gráfico
    Pase a la etapa siguiente del asistente.
  5. Especifique los parámetros del gráfico:
    • el título: "Sales evolution".
    • la leyenda: "Sin leyenda".
    • seleccione "Mostrar etiquetas".
  6. Pase a la etapa siguiente.
  7. Introduzca los parámetros de los ejes:
    • Título del eje X: Year
    • Título del eje Y: TO
    Conserve las opciones predeterminadas y pase a la siguiente etapa.
  8. Vamos a definir la fuente de datos.
    • Para las etiquetas (valores mostrados en la parte inferior del gráfico, años en este caso):
      • la fuente corresponde a: "Recorrer un archivo o consulta",
      • los datos corresponden al campo Year en la consulta QRY_SalesEvolutions.
        Fuente de datos del control Gráfico
    • Para las series (valores que se muestran en el control Gráfico): el control Gráfico mostrará una sola serie que corresponde al totalIOT calculado por la consulta QRY_SalesEvolutions.
      • Haga clic en el botón "+".
      • Haga doble clic en la columna "Título" de la primera fila de la tabla "Fuentes de las series". La columna "Título" se puede editar.
      • Introduzca el título: "Series 1".
      • La fuente corresponde a: "Recorrer un archivo o consulta",
      • Los datos corresponden al campo "sum_TotalIOT" en la consulta QRY_SalesEvolutions.
        Fuente de datos del control Gráfico
    Pase a la etapa siguiente.
  9. No se agregará ninguna imagen de fondo en el control Gráfico. Pase a la etapa siguiente.
  10. Defina un nombre para el control Gráfico: introduzca el texto "CHART_SalesEvolutions" y finalice el asistente.
  11. El control Gráfico se crea automáticamente en el editor.

Probar el control Gráfico

Pruebe la ventana (haga clic en Probar ventana en los botones de acceso rápido).
  1. Haga clic en la pestaña "Chart" para ver el gráfico.
    Vista del gráfico en modo de prueba

    Funcionalidades automáticas del control Gráfico (FAA)
    Al igual que el control Tabla, el control Gráfico propone varias funcionalidades automáticas a las que se puede acceder a través de su menú contextual. Para obtener más información, consulte Manipular los controles Gráfico en tiempo de ejecución (FAA).
  2. Finalice la prueba y vuelva al editor.
Crear tablas de resumen con el control Tabla dinámica
Para manipular este control en condiciones reales, vamos a crear un control Tabla dinámica para mostrar las ventas de productos por país y por año en cantidad e ingresos.
Ventana con un control Tabla dinámica
Al igual que el control Gráfico, vamos a crear el control Tabla dinámica en una nueva pestaña de la ventana WIN_Menu.

Para crear una nueva pestaña en la ventana "WIN_Menu":
  1. Abra la ventana "WIN_Menu" en el editor.
  2. Haga doble clic en el control Pestaña: la ventana de descripción del control se abre.
  3. En la pestaña "General", seleccione la pestaña "Chart" y haga clic en el botón "Nuevo". Una nueva pestaña se agrega.
  4. Seleccione la nueva pestaña ("Pestaña 5").
  5. En la sección derecha de la pantalla, introduzca el nombre de la pestaña: "Pivot table".
  6. En la sección derecha de la pantalla, seleccione una imagen del catálogo de imágenes:
    • Haga clic en Mostrar opciones de imagen a la derecha de "Imagen". Seleccione "Catálogo" en el menú contextual que aparece.
    • La ventana del catálogo de imágenes se abre.
    • Escriba "Array" en la barra de búsqueda.
    • Inicie la búsqueda haciendo clic en la lupa.
    • Seleccione la imagen Array y valide las ventanas que aparecen.
  7. Valide la ventana de descripción del control Pestaña.
  8. Una nueva pestaña aparece en la ventana.

Crear un control Tabla dinámica

Para crear un control Tabla dinámica:
  1. En la ventana "WIN_Menu", seleccione la pestaña "Pivot table".
  2. En la pestaña "Creación", en el grupo "Datos", despliegue "Tabla y List Box" y seleccione "Tabla dinámica (PVT)". La forma del control aparece bajo el cursor.
  3. Haga clic en el panel de la pestaña "Pivot table". El asistente de creación del control Tabla dinámica se abre.
  4. Pase a la etapa siguiente.
  5. En las celdas, se mostrará la siguiente información:
    • el total de las ventas.
    • la cantidad vendida.
    En el asistente, vamos a seleccionar el archivo de datos fuente: OrderLine.
    Para el primer valor seleccione:
    • Mostrar: "La suma de".
    • Fuente: "TotalIOT".
    Haga clic en el botón "Agregar un valor adicional".
    Para el segundo valor, seleccione:
    • Mostrar: "La suma de".
    • Fuente: "Quantity".
      Asistente de creación de un control Tabla dinámica
    Pase a la etapa siguiente.
  6. Los años se mostrarán en los encabezados de las columnas. A la izquierda, despliegue el archivo de datos Order y haga doble clic en el campo Date.
    Asistente de creación de un control Tabla dinámica
    Pase a la etapa siguiente.
  7. El asistente propone establecer una relación con el archivo de datos Order, y que se muestren tres niveles de datos en los encabezados: los años, trimestres y meses.
    Asistente de creación de un control Tabla dinámica
  8. Pase a la etapa siguiente.
  9. En los encabezados de las filas, se mostrarán los productos agrupados por país. En la sección izquierda:
    • despliegue el archivo de datos Customer y haga doble clic en el campo Country.
    • despliegue el archivo de datos Product y haga doble clic en el campo Caption.
      Asistente de creación de un control Tabla dinámica
    Pase a la etapa siguiente.
  10. En las siguientes etapas, el asistente propone una relación para cada encabezado de fila (Customer.Country y Product.Caption). Vaya a la etapa siguiente para validar todas las relaciones.
  11. Indique un nombre para el control Tabla dinámica: PVT_Sales.
  12. Finalice el asistente.
  13. El control Tabla dinámica se crea automáticamente en la ventana, así como un control botón "Calculate". El botón Calculate permitirá al usuario calcular los datos que se mostrarán en el control Tabla dinámica. El control Botón se puede ubicar en cualquier lugar de la ventana.
  14. Guarde la ventana (haga clic en Guardar elemento en los botones de acceso rápido).

Prueba del control Tabla dinámica

Pruebe la ventana (haga clic en Probar ventana en los botones de acceso rápido).
  1. Haga clic en la pestaña "Pivot table" y, a continuación, en el botón "Calculate".
    ATENCIÓN: El tiempo del cálculo depende del tamaño de la base de datos y del número de encabezados de filas y columnas. El resultado de la tabla dinámica se puede guardar para no tener que volver a calcular los valores.
  2. Haga clic en ">" para expandir las diferentes columnas y filas.
    Prueba de la ventana que contiene el control Tabla dinámica
Detenga la prueba. Vamos a hacer un cambio en el control Tabla dinámica. Hasta ahora, nada indica que uno de los números de las celdas corresponde a una cantidad. Vamos a utilizar una máscara de visualización específica para este valor.
Para definir una máscara de visualización en una celda:
  1. Abra la descripción del control Tabla dinámica (haga doble clic en el control).
  2. En la pestaña "Contenido" haga clic en "VAL_NoName2". La descripción de los valores que se muestran en las celdas aparece en la ventana.
  3. En la opción "Máscara", agregue el prefijo "Qt": ".
    Descripción del control Tabla dinámica
  4. Valide la ventana de descripción.
  5. Vuelva a probar la ventana.
En resumen
Proyecto completado
¿Desea comprobar el resultado final de las etapas descritas en este tutorial?
Hay un proyecto completado disponible. Este proyecto contiene las ventanas creadas en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "Tutorial - WINDEV application: Manage data", haga doble clic en "Full application - Answers".
En esta lección, vimos cómo mostrar estadísticas utilizando los controles Gráfico y Tabla dinámica.
En la siguiente lección, veremos cómo enviar un correo electrónico desde una aplicación WINDEV.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 05/12/2023

Señalar un error o enviar una sugerencia | Ayuda local