Tablero con múltiples tablas dinámicas. Tutorial de procedimientos

Imagine que tiene la tarea de crear un panel de rendimiento que muestre datos resumidos y sin procesar simultáneamente.

Tal vez se esté preguntando cuál es la mejor forma de ahorrar tiempo para lograr este tipo de objetivo.

Un enfoque posible es organizar una tabla dinámica con datos agregados y una cuadrícula con datos sin procesar en una sola página. Estos dos componentes web tienen que compartir los mismos datos e informes pero con diferentes niveles de detalle.

Afortunadamente para las llamadas a la API de Flexmonster, es increíblemente fácil de hacer.

En este tutorial, cubriremos en detalle el proceso de creación de un panel de control totalmente interactivo con múltiples instancias de tabla dinámica. La tabla plana con datos no agregados reaccionará a cualquier cambio en la tabla dinámica compacta.

Como resultado, obtendrá una herramienta lista para usar para visualización de datos e informes web que proporciona funciones listas para usar: agregación, clasificación, filtrado, arrastrar y soltar, obtención de detalles y más.

¡Empecemos!

Sobre métodos y eventos

Tendremos que usar las siguientes llamadas a la API:

  • setReport (): este método permite cambiar el informe dinámicamente, es decir, en tiempo de ejecución. Además, puede cargar en la tabla dinámica los informes guardados anteriormente.
  • reportcomplete: este evento se desencadena cuando los datos de un informe, el archivo de localización se carga en la tabla dinámica y se procesa la cuadrícula / gráfico. En otras palabras, indica que puede comenzar a trabajar con el componente de tabla dinámica.
  • reportchange: este evento se activa una vez que se produce algún cambio en un informe (por ejemplo, filtrado, clasificación, formateo, adición de medidas calculadas, ejecución de consultas, etc.).

Paso 1: configuración con scripts de Flexmonster

Agregue los scripts necesarios a su página web:

No olvide agregar los contenedores donde se representarán ambas tablas:

Paso 2: inicialice una tabla dinámica compacta

Agregue este código JavaScript para crear una instancia del primer componente:

Como puede ver, hemos establecido una ruta de acceso a la fuente de datos y hemos especificado un segmento, una parte del informe que describe qué jerarquías deben mostrarse en la cuadrícula.

Para resaltar las celdas con colores basados ​​en sus valores, hemos definido el objeto de formato condicional.

Paso 3: crea una cuadrícula plana

El código completo de una tabla plana es similar al anterior, pero para activar la vista plana de la tabla dinámica, debe especificarlo en sus opciones:

Paso 4: hacer que los pivotes interactúen

Adjunte un controlador de eventos al evento de informe completo de la tabla compacta. En la definición de la función, una vez que se cargan los datos, obtenga el informe actual de la tabla compacta y establezca su división en la tabla plana.

Del mismo modo, agregue un controlador de eventos al evento de cambio de informe de la instancia de tabla compacta para poder escuchar los cambios del informe.

Aquí se implementa la misma lógica:

  • obtener un informe de la mesa compacta
  • configurando su corte en el informe de la tabla plana.

Paso final: disfruta y comparte los resultados

Consulte el Tablero de gráficos y tablas dinámicas Pen Flexmonster de Flexmonster (@flexmonster) en CodePen.

Resumen

Hoy ha aprendido en la práctica cómo crear un panel de JavaScript al vincular dos instancias de tabla dinámica junto con la ayuda de llamadas a la API de Flexmonster.

Con Flexmonster, el proceso de informes tiene todas las posibilidades de ser perspicaz y efectivo. ¡Siéntase libre de usarlo para rastrear las métricas de su organización!

Enlaces útiles

  • Demo en vivo
  • Tabla y gráficos de pivote Flexmonster
  • Más demostraciones de Flexmonster

Publicado originalmente en https://codepen.io.