🇺🇸 Read in English
La toma de decisiones en una organización depende de datos claros, precisos y visualmente entendibles. Oracle APEX ofrece capacidades integradas para transformar información operativa en gráficos dinámicos, dashboards interactivos y vistas analíticas que impulsan acciones empresariales.
En esta nueva entrega de APEX Insights, construiremos un dashboard profesional con énfasis en:
- Visualización con Oracle JET Charts
- Consultas SQL optimizadas
- Filtros dinámicos (año y región)
- Refresco inteligente vía AJAX
- Integración avanzada con PL/SQL y JSON
Este modelo aplica a múltiples escenarios:
- monitoreo de ventas,
- reportes financieros,
- desempeño operativo,
- métricas de servicio.
APEX permite construir dashboards potentes sin necesidad de librerías externas, manteniendo seguridad, rendimiento y mantenibilidad.
Ya hemos cubierto Buenas Prácticas, Seguridad, UX, Rendimiento, Modularidad y Control de Versiones. Ahora nos enfocaremos en visualización de datos.
📝 Código Fuente: Puedes descargar el código completo de este artículo en nuestro repositorio de demos: 2025-12-02-dynamic-charts.
1. Oracle JET Charts: El motor gráfico detrás de Oracle APEX
Los gráficos nativos de Oracle APEX se construyen sobre Oracle JET (JavaScript Extension Toolkit), un framework robusto soportado oficialmente por Oracle. Gracias a esta integración, puedes crear dashboards empresariales sin depender de librerías externas como ChartJS o ApexCharts.
¿Qué hace especial a Oracle JET dentro de APEX?
✔ Integración declarativa
No necesitas escribir JavaScript para configurar la mayoría de gráficos. Desde las propiedades de la región, puedes definir:
- tipo de gráfico (línea, barras, donut, gauge),
- métricas a graficar,
- colores de serie,
- tooltips y etiquetas,
- comportamiento dinámico.
✔ Amplia variedad de visualizaciones
Oracle JET soporta:
- gráficos de líneas y áreas,
- barras simples y apiladas,
- tendencias comparativas,
- indicadores KPI tipo gauge,
- diagramas avanzados (treemap, donut, funnel, sankey).
Cada una de estas opciones es compatible con el Universal Theme, asegurando consistencia visual con tu aplicación.
✔ Totalmente responsive
Los gráficos se ajustan automáticamente a distintos tamaños de pantalla:
- desktops,
- tablets,
- smartphones.
✔ Accesibilidad nativa
JET cumple con estándares AA/AAA:
- navegación por teclado,
- lectura de screen readers,
- contraste visual.
Esto facilita implementar dashboards accesibles y alineados con políticas corporativas.
Mejores prácticas para elegir el tipo de gráfico
| Objetivo | Tipo de gráfico recomendado |
| Mostrar tendencia longitudinal | Líneas / Áreas |
| Comparar categorías | Barras / Columnas |
| Mostrar composición porcentual | Donut / Pie |
| Indicadores clave | Gauge |
| Jerarquías o proporciones internas | Treemap |
Regla profesional:
Elige el tipo de gráfico según el mensaje que quieras comunicar, no según el aspecto visual más llamativo.
Caso práctico: tendencias de ventas mensuales
Supongamos que deseas representar el total de ventas por mes durante el último año.
Consulta sugerida:
SELECT
TO_CHAR(order_date, 'YYYY-MM') AS periodo,
SUM(order_total) AS total_ventas
FROM orders
WHERE order_date >= ADD_MONTHS(TRUNC(SYSDATE, 'YEAR'), -12)
GROUP BY TO_CHAR(order_date, 'YYYY-MM')
ORDER BY periodo;
Características técnicas de esta consulta:
- evita
SELECT *,
- agrupa por año y mes,
- focaliza solo métricas (no filas completas),
- evita cargar valores innecesarios.
Esto reduce uso de recursos y acelera el render de tu dashboard.
Ajustes avanzados con "JavaScript Initialization Code"
Cuando un gráfico requiere personalización más detallada —por ejemplo, formato de tooltips, colores por condiciones o ajuste de tolerancias visuales— puedes extender las opciones de Oracle JET con JavaScript.
Ejemplo base:
function(options) {
options.valueFormats = {
decimal: 2,
prefix: "$"
};
options.chartArea = {
backgroundColor: "#ffffff"
};
return options;
}
Recomendación:
Esta técnica potencia tus gráficos sin romper compatibilidad con futuras actualizaciones de Oracle APEX, ya que solo expandes configuraciones permitidas.
Oracle JET Charts son el núcleo visual de Oracle APEX. Cuando dominas:
- la selección de tipo de gráfico,
- consultas optimizadas,
- y ajustes avanzados con JavaScript,
tus dashboards dejan de ser complementos estéticos para convertirse en herramientas estratégicas.
Con esto claro, avanzaremos a la siguiente sección: construir el dashboard declarativo completo con filtros dinámicos, refresco AJAX y drilldown hacia el detalle.
2. Caso de Uso: Dashboard de Ventas Mensuales en Oracle APEX
Para ilustrar análisis del mundo real en Oracle APEX, diseñaremos un dashboard de ventas mensuales profesional impulsado por SQL optimizado, variables de enlace, componentes declarativos y visualizaciones nativas de Oracle JET.
Este dashboard incluirá:
- Un Gráfico de Líneas JET mostrando ingresos mensuales
- Un filtro de Año alimentado por datos existentes
- Un filtro de Región para segmentación y análisis comparativo
- Refresco automático de gráficos usando Session State
- Drilldown opcional a detalles de transacciones
Este modelo es totalmente adaptable a otros escenarios corporativos:
- Métricas de KPI financieros
- Desempeño operativo
- Análisis de nivel de servicio
- Adopción del ciclo de vida del producto
- Análisis de RRHH o tendencias de sentimiento
- Eficiencia de cadena de suministro y almacén
Con fundamentos sólidos, desbloqueas un entorno analítico escalable, mantenible y seguro.
2.1 Orígenes de Datos para las Listas de Valores (LOV)
El dashboard utiliza LOVs (Listas de Valores) para poblar los filtros. Estas deben ser eficientes, limpias y predecibles.
📌 Principios clave para el rendimiento de LOV:
- Selecciona solo lo que necesitas (display + return)
- Evita
SELECT *
- Asegura soporte de índices para grandes volúmenes de datos
- Ordenamiento estable para una mejor UX
Filtro: Año (LOV)
Propósito: Mostrar solo años disponibles en los datos.
Esto asegura que el dashboard refleje periodos de negocio reales y se mantenga alineado con el contenido de la base de datos.
Fuente SQL:
SELECT DISTINCT
EXTRACT(YEAR FROM order_date) AS d,
EXTRACT(YEAR FROM order_date) AS r
FROM orders
ORDER BY 1 DESC;
💡 Tip: Confirma que order_date esté indexado para mantener esta LOV rápida bajo alto volumen.
Filtro: Región (LOV)
Propósito: Permitir segmentación de ingresos mensuales usando valores a nivel de región.
Fuente SQL:
SELECT
region_name AS d,
region_id AS r
FROM regions
ORDER BY 1;
💡 Los índices importan. Si las regiones se relacionan con las órdenes vía una tabla de mapeo, asegura que region_id esté indexado.
Esto ayuda a:
- Tiempo de respuesta de la LOV
- Eficiencia SQL del Dashboard
- Percepción de velocidad del usuario final
3. Consulta SQL Principal (Optimizada y Segura)
Esta consulta calcula totales mensuales agregados basados en los filtros seleccionados mientras asegura el uso adecuado de variables de enlace.
SELECT
TO_CHAR(order_date, 'YYYY-MM') AS period,
SUM(order_total) AS total_sales
FROM orders
WHERE EXTRACT(YEAR FROM order_date) = :P10_YEAR
AND (:P10_REGION IS NULL OR region_id = :P10_REGION)
GROUP BY TO_CHAR(order_date, 'YYYY-MM')
ORDER BY period;
Por qué Funciona esta Consulta
🔷 Agregación por periodo de negocio
Usar YYYY-MM asegura agrupación lógica y ordenamiento.
🔷 Lógica de filtro flexible
Si no se selecciona región, se incluyen todas.
🔷 Variables de enlace en todas partes
:P10_YEAR y :P10_REGION protegen contra inyección SQL y mejoran la reutilización de planes.
🔷 Dataset ligero
Solo se retornan el periodo y la agregación total. Payload más pequeño = gráficos más rápidos.
Configuración Declarativa de JET Chart en Oracle APEX
Crea una nueva región de gráfico y aplica estos ajustes:
- Tipo: JET Chart → Line
- Tipo de Origen: SQL Query
- Consulta: Usa el SQL mostrado arriba
- Columna de Etiqueta:
period
- Columna de Valor:
total_sales
- Items de Session State: Asigna
P10_YEAR y P10_REGION
APEX y Oracle JET manejan automáticamente:
- Orquestación de variables de enlace
- Contexto de sesión seguro
- Formateo de datos para renderizado visual
- Experiencia de graficado consistente
📌 Resultado:
No se necesita JavaScript personalizado en esta etapa. Se produce un gráfico limpio y profesional usando capacidades declarativas seguras.
Notas para Entornos Profesionales
🔐 Prefiere siempre Variables de Enlace
Previenen inyección SQL y ayudan a Oracle a reutilizar planes de ejecución.
🚀 Indexa las Columnas de Filtrado
Aplicaciones de alto tráfico demandan order_date y region_id indexados.
🧠 Mantén el SQL Mínimo
Solo retorna campos requeridos por el gráfico—esto acelera el renderizado y mejora la escalabilidad.
🧩 La Lógica de LOV Debe Reflejar Datos Reales
Las LOVs estáticas solo tienen sentido si los valores nunca cambian. De lo contrario, genéralas siempre desde datos de negocio.
Con consultas limpias, LOVs validadas y JET Charts configurados declarativamente, tu dashboard es ahora funcional, escalable y seguro.
En la siguiente sección, añadiremos:
- Refresco Dinámico vía AJAX
- Integración con Session State
- Navegación Drilldown
Esto convierte tus gráficos en herramientas accionables en lugar de visualizaciones estáticas.
4. Dashboard Declarativo con Filtros Dinámicos y Refresco AJAX
Con la consulta central y las LOVs en su lugar, es hora de dar vida al dashboard usando características nativas de Oracle APEX. En esta sección:
- Vincularás resultados del gráfico a filtros seleccionados por el usuario
- Usarás Session State de forma segura
- Dispararás eventos de refresco declarativamente
- Aplicarás navegación drilldown para análisis más profundo
Este enfoque requiere cero SQL personalizado o lógica fuera de APEX, haciéndolo ideal para entrega rápida mientras se mantiene una estructura de nivel empresarial.
4.1 Items de Página (Filtros)
Crea dos items de página en la página del dashboard, ej., P10_YEAR y P10_REGION:
- Tipo: Select List
- Origen: LOVs Dinámicas de la Sección 2
- Mostrar Valores Extra: Off (asegura solo datos válidos)
- Usar Caché: Opcionalmente On, si las LOVs cambian raramente
Estos valores alimentarán directamente la consulta del gráfico vía variables de enlace.
4.2 Acción Dinámica para Refresco Declarativo
Propósito
Cuando el usuario cambia un filtro, el dashboard debe refrescarse instantáneamente sin recargar la página.
Pasos de Configuración
Crear Acción Dinámica en P10_YEAR y P10_REGION:
- Evento:
Change
- Condición: Always True
Acción True: Refresh
- Región Afectada: Chart (line)
📌 Resultado: Cada vez que cambia un valor de filtro, APEX re-ejecuta automáticamente el SQL del gráfico y redibuja el gráfico usando session state.
No se requiere JavaScript y el gráfico se mantiene seguro — las variables de enlace aseguran el manejo adecuado de valores.
4.3 Navegación Drilldown (Opcional pero Recomendado)
Para transformar gráficos en analítica accionable, habilita la navegación drilldown.
Escenario de Ejemplo
Hacer clic en un mes en el gráfico redirige a los usuarios a un Reporte de Órdenes detallado.
Configuración
- Abre los ajustes de Series de tu gráfico.
- Habilita Link.
Configura el destino:
- Tipo: "Page in Application"
- Página: Página de reporte (ej.
20)
En la sección Set Items:
- Pasa la etiqueta del gráfico (
period) a un item de filtro del reporte (ej. P20_PERIOD)
APEX agrega y valida automáticamente el checksum de la URL para prevenir manipulación.
💡 Pro Tip: Si tu Reporte de Órdenes usa un filtro TO_CHAR(order_date, 'YYYY-MM'), coincidir el formato de la Etiqueta del Gráfico mantiene todo alineado.
4.4 Ejemplo de Consulta de Reporte
Abajo está el SQL usado en el reporte destino:
SELECT
order_id,
customer_name,
order_total,
order_date
FROM orders
WHERE TO_CHAR(order_date, 'YYYY-MM') = :P20_PERIOD
ORDER BY order_date;
Por qué Funciona
- Coincidencia limpia de periodos usando formato idéntico
- Compatible con todos los dashboards construidos en la Sección 2
- Perfectamente alineado con la navegación drilldown
Notas Profesionales para Dashboards Empresariales
🔐 Seguridad de Session State
Todos los valores movidos entre páginas vía enlaces de gráficos heredan la seguridad de sesión de APEX. Los enlaces siempre llevan un checksum, previniendo manipulación de URL.
🔁 AJAX Declarativo
Las Acciones Dinámicas eliminan la necesidad de JavaScript personalizado y simplifican el mantenimiento.
🎯 Estrategia de Etiquetado Consistente
Cuando la navegación drilldown y las consultas del dashboard comparten el mismo formato (YYYY-MM), la depuración y el análisis se vuelven más simples.
En este punto, el dashboard es:
- Interactivo
- Eficiente
- Consciente del negocio
- Seguro
Ahora que tenemos filtros declarativos, refresco AJAX y navegación drilldown, estamos listos para ir más profundo.
En la siguiente sección, verás cómo extender todo con:
- APIs PL/SQL
- APEX_EXEC para ejecución SQL
- Generación JSON
- Llamadas AJAX seguras usando
apex.server.process()
5. Demo Híbrido Avanzado: API PL/SQL + APEX_EXEC + JSON + Llamadas AJAX Seguras
Ahora que el dashboard declarativo es totalmente funcional, lo llevaremos al siguiente nivel.
En entornos empresariales, es común:
- Aplicar lógica de agregación avanzada
- Recuperar métricas estructuradas
- Unir múltiples fuentes de datos
- Retornar datos dinámicamente basados en acciones del usuario
Para estos casos, Oracle APEX provee todo lo necesario para implementar visualizaciones impulsadas por backend de forma segura.
En esta sección, aprenderás cómo:
- Exponer métricas a través de APIs PL/SQL
- Ejecutar SQL seguro usando APEX_EXEC
- Construir respuestas JSON con APEX_JSON
- Consumir los datos usando
apex.server.process() desde JavaScript
Este modelo híbrido mantiene a Oracle APEX declarativo, mientras PL/SQL maneja el trabajo pesado.
5.1 Proceso PL/SQL (AJAX) Retornando JSON
Crea un Proceso de Aplicación llamado:
GET_SALES_DATA
Este proceso:
- Ejecuta SQL usando variables de enlace
- Construye un payload JSON
- Lo retorna al navegador para renderizado del gráfico
DECLARE
l_cursor APEX_EXEC.T_CURSOR;
l_period VARCHAR2(20);
l_total NUMBER;
BEGIN
l_cursor := APEX_EXEC.OPEN_CURSOR(
p_sql_statement =>
'SELECT
TO_CHAR(order_date, ''YYYY-MM'') AS period,
SUM(order_total) AS total_sales
FROM orders
WHERE EXTRACT(YEAR FROM order_date) = :P_YEAR
AND (:P_REGION IS NULL OR region_id = :P_REGION)
GROUP BY TO_CHAR(order_date, ''YYYY-MM'')
ORDER BY period',
p_bind_vars => APEX_EXEC.T_BIND_VAR(
APEX_EXEC.T_BIND_VAR_ROW('P_YEAR', :P10_YEAR),
APEX_EXEC.T_BIND_VAR_ROW('P_REGION', :P10_REGION)
)
);
APEX_JSON.OPEN_OBJECT;
APEX_JSON.OPEN_ARRAY('data');
LOOP
APEX_EXEC.FETCH_ROWS(l_cursor);
EXIT WHEN APEX_EXEC.LAST_FETCH_STATUS != 0;
l_period := APEX_EXEC.GET_VARCHAR2(l_cursor, 'PERIOD');
l_total := APEX_EXEC.GET_NUMBER (l_cursor, 'TOTAL_SALES');
APEX_JSON.OPEN_OBJECT;
APEX_JSON.WRITE('period', l_period);
APEX_JSON.WRITE('total_sales', l_total);
APEX_JSON.CLOSE_OBJECT;
END LOOP;
APEX_JSON.CLOSE_ARRAY;
APEX_JSON.CLOSE_OBJECT;
END;
Por qué importa este patrón
✔ APEX_EXEC asegura seguridad: las variables de enlace se fuerzan en todas partes.
✔ La salida JSON es universal: gráficos, tablas, dashboards — todos pueden consumirla.
✔ La lógica se mantiene centralizada: nada está disperso a través de procesos de página.
✔ Alta escalabilidad: cualquier mejora futura va a la misma capa de API.
5.2 Llamada JavaScript Usando apex.server.process()
Este ejemplo llama al proceso de forma segura y registra la respuesta.
apex.server.process(
"GET_SALES_DATA",
{
x01: $v('P10_YEAR'),
x02: $v('P10_REGION')
},
{
success: function(pData) {
console.log("Respuesta:", pData);
const mapped = pData.data.map(r => ({
period: r.period,
total: r.total_sales
}));
console.log("Datos Mapeados:", mapped);
},
error: function(jqXHR, textStatus, errorThrown) {
apex.message.clearErrors();
apex.message.showErrors([
{
type: "error",
message: "Falló la solicitud: " + errorThrown,
location: ["page"]
}
]);
}
}
);
5.3 Puntos Clave del Modelo Híbrido
🔐 Seguridad
- Variables de enlace forzadas en todo momento
- Checksum de sesión incluido automáticamente
- Sin concatenación de SQL crudo en ninguna parte
⚙️ Arquitectura
- El dashboard permanece declarativo
- La lógica de negocio se mueve a PL/SQL
- JSON actúa como transporte de datos para gráficos
🚀 Rendimiento
- Solo se obtienen resultados agregados
- Payload mínimo
- Perfecto para entornos de alto tráfico
🧠 Mantenibilidad
- Todas las métricas viven en una capa de API central
- Revisiones de código más fáciles
- Control de versiones simple (Git)
En este punto, tienes:
- Filtros declarativos
- Un JET Chart seguro
- Refresco AJAX
- Navegación Drilldown
- Una API PL/SQL sirviendo JSON
- Una llamada cliente JavaScript segura
Ahora posees la receta central para dashboards profesionales en Oracle APEX.
En la siguiente sección, cerraremos con recomendaciones estratégicas y referencias oficiales para continuar avanzando tus habilidades.
6. Mejores Prácticas, Recomendaciones Profesionales y Referencias Oficiales
Con la arquitectura completa en su lugar — SQL optimizado, diseño declarativo, refrescos AJAX, APIs JSON y lógica PL/SQL segura — tu dashboard ya no es solo un elemento visual. Ha evolucionado a un activo analítico profesional.
Esta sección final consolida recomendaciones clave y provee material de referencia para fortalecer y refinar tu implementación de Oracle APEX.
6.1 Mejores Prácticas Profesionales para Dashboards Dinámicos
🔐 Seguridad Primero
- Las variables de enlace son obligatorias — úsalas siempre.
- Evita concatenación de cadenas crudas en PL/SQL o JavaScript.
- Usa
apex.server.process() para llamadas AJAX seguras.
- Aprovecha
APEX_EXEC para ejecución SQL con seguridad integrada.
🧩 Fuente Única de Lógica
- Mantén la lógica de transformación en paquetes PL/SQL.
- Mantén puntos de entrada predecibles para todas las métricas.
- Solo expón resultados terminados al frontend.
🚀 Rendimiento y Escalabilidad
- Indexa columnas de filtrado, especialmente identificadores de fecha y región.
- Limita consultas a campos requeridos.
- Genera JSON solo con datos estructurados.
- Mantén payloads pequeños para acelerar el renderizado.
🎯 Declarativo Primero
- Deja que Oracle APEX maneje el renderizado de gráficos, session state y disparadores de refresco.
- Prefiere LOVs integradas, Acciones Dinámicas y enlaces con checksum.
- Usa JavaScript solo para consumir APIs, no para reemplazar funciones integradas.
🧪 Valida Consistentemente
- Prueba el comportamiento del dashboard bajo diferentes filtros de usuario.
- Confirma que los drilldowns muestren datos relevantes y precisos.
- Asegura que los checksums de sesión estén siempre incluidos.
6.2 Recomendaciones Estratégicas para Proyectos Reales
✔ Crea APIs PL/SQL estandarizadas por dominio:
Finanzas, Ventas, Órdenes, Usuarios, etc.
✔ Almacénalas en Git con archivos .pks y .pkb separados.
✔ Mantén la salida JSON predecible — los dashboards rinden mejor con estructuras uniformes.
✔ Documenta la lógica del dashboard:
- Qué representan los gráficos
- Qué fuentes de datos se usan
- Qué filtros impactan qué datasets
✔ Usa el mismo formato de periodo en todas partes (YYYY-MM) para simplificar drilldown y coincidencia.
✔ Encapsula todos los parámetros dependientes del entorno (esquemas, regiones, límites de datos) dentro de PL/SQL.
Conclusión
Los dashboards dinámicos en Oracle APEX van mucho más allá de gráficos y visuales.
Cuando combinas:
- Oracle JET Charts
- Consultas SQL optimizadas
- Refresco declarativo con Acciones Dinámicas
- Fuentes LOV limpias
- APIs de métricas PL/SQL
- Respuestas JSON
- Llamadas AJAX seguras
…logras una plataforma analítica madura diseñada para decisiones de negocio reales.
Este modelo híbrido no es experimental — es un patrón probado usado en entornos empresariales donde la precisión de datos, respuesta y mantenibilidad son no-negociables.
Tus dashboards se vuelven:
- Más rápidos
- Más escalables
- Más fáciles de mantener
- Cumplidores con mejores prácticas de seguridad
Y lo más importante, le dicen la verdad al negocio.
Qué Sigue en APEX Insights
En la siguiente edición de APEX Insights, nos enfocaremos en:
Mejorando la Experiencia de Usuario en Oracle APEX Applications
Cubriremos:
- Patrones de navegación
- Lenguaje UI consistente
- Estrategias de diseño de página
- Arquitectura de componentes
- Consideraciones de accesibilidad
- Patrones de diseño declarativo
Si tus dashboards son el cerebro analítico de tus aplicaciones, la UX es el rostro en el que tus usuarios aprenden a confiar.
Referencias
Abajo hay fuentes confiables para continuar fortaleciendo tu conocimiento de visualización de datos dinámica en Oracle APEX:
Documentación Oficial de Oracle APEX — Visualización y Gráficos
https://apex.oracle.com/en/learn/getting-started/charts/
Optimización de Rendimiento en Oracle APEX
https://docs.oracle.com/en/database/oracle/application-express/latest/htmdb/optimizing-performance.html
API JavaScript de APEX — apex.server.process()
https://docs.oracle.com/en/database/oracle/application-express/latest/aexjs/apex-server-process.html
Referencia del Paquete APEX_EXEC
https://docs.oracle.com/en/database/oracle/application-express/latest/aeapi/apex_exec.html
Oracle JET Cookbook
https://www.oracle.com/webfolder/technetwork/jet/index.html
Código Fuente del Demo
Descarga el código fuente completo de este demo en GitHub.
Pensamientos Finales
Construir dashboards de la manera correcta toma disciplina, pero la recompensa es enorme:
- bases de código más limpias,
- despliegues predecibles,
- rutas de ejecución seguras,
- y analítica accionable.
Sigue afilando tu oficio, sigue aprendiendo de la comunidad y sigue construyendo soluciones que reflejen excelencia.
Tus dashboards en Oracle APEX son más que gráficos — son insights en movimiento.
🚀 ¿Necesitas un Experto en APEX?
Ayudo a empresas a construir dashboards y aplicaciones escalables como esta. Si buscas acelerar tus proyectos, hablemos.
☕ Agendar una Llamada | 💼 Conectar en LinkedIn
