Desde hace algunos años, FileMaker Pro incluye la opción de mostrar valores numéricos gráficamente en forma de diagramas. Los gráficos pueden configurarse cómodamente a través del diálogo. Sin embargo, los gráficos incluidos en FileMaker tienen la desventaja de no estar disponibles en FileMaker Tiempo de ejecución-ya que FileMaker ha bloqueado esta función en las soluciones en tiempo de ejecución. Además, los diagramas nativos de FileMaker sólo permiten interacciones rudimentarias con un diagrama. Una solución mucho más flexible para crear diagramas en una solución FileMakerBase de datos La solución de código abierto "Chart.js", que se puede integrar fácilmente en una base de datos FileMaker gracias a un visor web, es una forma estupenda de crear gráficos animados. En este artículo, le mostraremos cómo puede integrar gráficos bonitos y animados en su solución FileMaker mediante la solución "Chart.js" basada en JavaScript y HTML5. Al final, proporcionamos una solución de ejemplo para su descarga para que pueda seguir todos los pasos necesarios directamente en su Mac o PC.
Muchas variantes de diagramas
La solución de código abierto "Chart.js" ofrece un total de seis tipos de gráficos diferentes, cada uno de los cuales puede configurarse individualmente y permitir la interacción directa del usuario.
Chart.js utiliza la moderna tecnología HTML5 y JavaScript y puede ejecutarse en un visor web de FileMaker. Los diagramas generados están en formato gráfico vectorial SVG y pueden escalarse libremente sin pérdida de calidad. El sitio web de Charts.js contiene amplia documentación sobre cómo los diagramas también se pueden diseñar de forma interactiva, de modo que, por ejemplo, al hacer clic en una parte de un diagrama se abre un visor web de FileMaker.Guión puede ponerse en marcha.
Encapsular Chart.js en FileMaker
Para poder utilizar las funciones de la biblioteca de JavaScript "Chart.js" en FileMaker, primero debe instalar la versión actual del archivo Biblioteca Charts.js a tu ordenador. La librería Chart.js ya está integrada en nuestra solución de ejemplo, que puedes descargar al final de este artículo. Hemos modificado la biblioteca que contiene para que también se puedan mostrar gráficos con valores negativos.
En nuestra solución de ejemplo, hemos encapsulado la biblioteca Chart.js en un campo separado (global). Por lo tanto, el campo <> contiene simplemente el código fuente de todo el archivo de texto "Chart.js".
Fuente de diagrama como campos propios de FileMaker
Si descarga el paquete "Chart.js" completo, encontrará algunos archivos HTML de ejemplo en el directorio "samples" que se pueden utilizar para mostrar gráficos de ejemplo. Para estos archivos, que son necesarios para mostrar el gráfico, nuestra solución FileMaker contiene los campos globales <> y <>, cada uno de los cuales proporciona el código fuente para el tipo de gráfico correspondiente. En los códigos fuente correspondientes, hemos creado marcadores de posición para todos los valores que queremos insertar dinámicamente desde FileMaker. Hemos insertado los siguientes marcadores de posición en el código fuente:
- {javascript} - Marcador de posición para Chart.js, en el área entre .
- {anchura} - Anchura del diagrama
- {altura} - Altura del diagrama
- {t1} - {t12} - Etiquetado de texto 1 a 12 para valores de 1 a 12
- {w1} - {w12} - Valores de 1 a 12
- {rojo}, {verde}, {azul} - Valores de color RGB para los colores del diagrama
El código fuente HTML para mostrar el diagrama en un visor Web de FileMaker se genera a partir de estos campos con los marcadores de posición que contienen.
Fusionar fuente de gráfico y Chart.js
Para mostrar finalmente el gráfico en un visor web de FileMaker, nuestra solución de ejemplo tiene un campo adicional llamado "xLay_Diagramm_Webviewer". En este campo se genera el código final del gráfico, que consta del código fuente del gráfico, el Chart.js y los datos dinámicos. Tras pulsar el botón de registro [valor 1], se ejecuta esquemáticamente el siguiente script:
Establecer valor de campo [xLay_Diagram_Webviewer; Exchange (xGlo_Diagram; Placeholder; Fields/Data)]
Establecer variable [$$menuchart; Valor: "Valor 1"]
Escribir datos de modificación/consulta [suprimir; sin cuadro de diálogo]
Ventana de actualización [Borrar resultados de unión, borrar caché]
En el primer paso de guión, el código fuente HTML para el visor web se genera a partir de los campos para el código fuente del gráfico, Chart.js y los datos dinámicos. El segundo paso de script establece un Variableque indica que el diagrama "Valor 1" está activo y se muestra. Con los dos últimos pasos de guión, nos aseguramos de que se guardan los datos y se actualiza la ventana actual.
Mostrar otros tipos de diagramas
En nuestro archivo de ejemplo, todos los sub-scripts a llamar se encuentran en un script, que se llaman a través de los parámetros de script correspondientes. Los dos primeros sub-scripts "valor_gráfico_1" y "valor_gráfico_2" se utilizan para actualizar el gráfico tras pulsar el botón de tabulación correspondiente. Los dos subguiones "barra" y "línea" pueden utilizarse para cambiar el tipo de gráfico de barra a línea.
En nuestro ejemplo, siempre se muestra un total de 12 valores, por lo que los códigos fuente tienen una estructura plana. Por supuesto, también es posible mostrar más de 12 valores o varias series de datos por diagrama. En este caso, debe organizar la sustitución de los marcadores de posición de forma dinámica, utilizando un marcador de posición para toda una fila de series de datos y construyendo las series de datos dinámicamente en el script. En nuestro ejemplo, nos limitamos a una estructura plana con 12 valores en una serie de datos.
Descargar base de datos de ejemplo FileMaker (.fmp12)
La base de datos de muestra para este artículo está disponible en formato FileMaker 12 (.fmp12) para FileMaker 12 a 14, la descarga es gratuita.
Videotutorial de Matt Petrowski sobre el tema
Matt Petrowski, en su calidad de destacado desarrollador de FileMaker, ha publicado un vídeo tutorial de media hora sobre el tema "Diagramas con FileMaker y JavaScript". En el siguiente vídeo muestra las posibilidades de los diagramas con JavaScript en el FileMaker Webviewer en inglés.
Al cargar el vídeo, aceptas la política de privacidad de YouTube.
Más información
Muchas gracias a Matt Petrowski y Nick Downie por esta magnífica solución.
Cómo transferir secuencias de comandos del archivo de ejemplo a su solución
Los guiones se pueden transferir fácilmente de una solución FileMaker a otra a través del portapapeles. Sólo tiene que abrir el cuadro de diálogo Gestionar guionesSeleccione el script deseado con el ratón y cópielo en el portapapeles utilizando el menú [Edición - Copiar] o la combinación de teclas [Ctrl/Cmd-C]. A continuación, abra el mismo cuadro de diálogo en la solución de destino y simplemente pegue de nuevo el script previamente copiado utilizando el comando de menú [Edición - Pegar].
Para transferir tablas del archivo de ejemplo a su solución
Las tablas pueden insertarse en una solución existente de varias maneras. La forma más sencilla es importar el Cuadro mediante el botón [Importar...] del cuadro de diálogo Gestionar la base de datos. Todas las tablas que deben importarse de la solución de origen pueden seleccionarse en un diálogo posterior. Por lo tanto, este método es especialmente adecuado si deben importarse varias tablas al mismo tiempo. Si sólo debe importarse una tabla, también puede hacerse a través del portapapeles como un script. Si debe importarse una tabla junto con sus datos, puede hacerse con el comando [Archivo > Importar registros > Archivo]. En el diálogo de importación, la tabla de destino Nueva mesa debe especificarse.
Para transferir listas de valores del archivo de ejemplo a su solución
Las listas de valores se pueden importar fácilmente de una solución FileMaker a otra a través del portapapeles. Basta con abrir el cuadro de diálogo en [Archivo/Archivo > Gestionar > Listas de valores], seleccionar la lista de valores deseada y hacer clic en [Importar]. Lista de valores con el ratón y copie la lista de valores en el portapapeles utilizando el menú [Edición - Copiar] o la combinación de teclas [Ctrl/Cmd-C]. A continuación, abra el mismo cuadro de diálogo en la solución de destino y pegue la lista de valores previamente copiada utilizando el comando de menú [Edición - Pegar].
Cómo transferir sus propias funciones del archivo de ejemplo a su solución
Haga clic en el botón [Importar] del cuadro de diálogo [Archivo > Gestionar > Funciones personalizadas...] y, a continuación, seleccione el archivo de muestra. Seleccione las funciones personalizadas deseadas en el siguiente cuadro de diálogo y confírmelo. Tenga en cuenta que esta función sólo está disponible en FileMaker Pro Advanced, pero no en FileMaker Pro.
Markus Schall lleva desarrollando bases de datos personalizadas, interfaces y aplicaciones empresariales basadas en Claris FileMaker desde 1994. Es socio de Claris, ganador del premio FMM Award 2011 y desarrollador de la. Software ERP gFM-Business. También es autor de libros y fundador del M. Schall Editores.
Muchas gracias por la introducción simplificada. Todo funciona perfectamente en mi Mac con FM 18 y MacOS 10.15.1. He actualizado Chart.js a la versión 2.9.1. En el entorno Windows, sin embargo, los gráficos sólo se muestran en Internet Explorer. ¿Alguna idea?
¿El problema sólo se produce en relación con FileMaker, o tampoco funciona en otros navegadores desde un sitio web normal?
Muchas gracias por las estupendas instrucciones y la base de datos de ejemplo. ¿Dónde estoy atascado: ¿Qué tengo que cambiar en el código para obtener un gráfico de donuts en lugar de un gráfico de barras o de líneas? Si simplemente reemplazo "window.myBar = new Chart(ctx).Bar(barChartData, options);" por "window.myBar = new Chart(ctx).doughnut(barChartData, options);", desafortunadamente no funciona...
Hola y gracias por su interés. Sólo una suposición: ¿Tal vez los datos tienen que ser preparados un poco diferente para el otro tipo de diagrama?