Puedes insertar una gráfica en una aplicación web sin requerir autenticación para ver los datos de la gráfica. Para restringir el acceso a tu gráfica incrustada, consulta la tutoriales de gráficas incrustadas autenticadas.
Requisitos previos
Debe ser un Autor del tablero para habilitar la incrustación no autenticada en una gráfica.
Procedimientos
Habilitar la incorporación no autenticada para una gráfica
Activa la incrustación no autenticada para generar un ID de gráfica y una URL base de Charts. Necesitarás tu ID de gráfica y la URL base de gráficas para mostrar tu gráfica en una página web.
Selecciona un tablero.
Desde el Dashboards página, selecciona el tablero que contiene la gráfica que deseas hacer incrustable. Para obtener instrucciones sobre cómo navegar a los Tableros, consulte Tableros.
Seleccione una gráfica.
Desde el tablero, haz clic en en la parte superior derecha de la gráfica para acceder a su información de inserción. Seleccione Embed chart del menú desplegable.
Nota
Si una gráfica se encuentra en un tablero que tiene integración activada, la opción Embed Chart se activa automáticamente. Por lo tanto, no puedes seleccionar la opción Embed chart para las gráficas dentro de los tableros que tienen habilitada la incrustación.
(Opcional) Especifique los campos filtrables para su gráfica.
Especifica los campos en los que los espectadores de la gráfica pueden filtrar los datos. Por defecto, no hay campos especificados, lo que significa que no se puede filtrar la gráfica hasta que se permita explícitamente al menos un campo.
Alternativamente, puedes especificar todos los campos en la gráfica seleccionando Allow all fields in the data source used in this chart.
Para aprender más sobre los campos que se pueden filtrar, consulte Especificar campos filtrables.
Cree una aplicación web para mostrar su gráfica
Si ya tienes una aplicación en la que mostrar tu gráfica, estás listo para añadir una gráfica incrustada no autenticada. Si no, procede con los pasos restantes para crear una nueva aplicación.
MongoDB ofrece una aplicación de ejemplo preconstruida en la Repositorio de GitHub que muestra cómo utilizar el SDK de Embedding para mostrar una gráfica incrustada no autenticada.
Clona el repositorio de GitHub para obtener todas las aplicaciones de ejemplo. Las instrucciones para ejecutar el ejemplo no autenticado se encuentran en el archivo Léame en el unauthenticated directorio. Puedes ejecutar la aplicación tal como está, o puedes personalizarla para utilizar una gráfica propia.
Personalizar la aplicación Node.js
Todas las líneas que necesita editar están marcadas con un comentario que contiene ~REPLACE~.
Introduce la URL base de tus Charts
Reemplace la URL base existente de Charts con la URL base de la gráfica que desea mostrar. Tu URL base de Charts es visible en la ventana modal de opciones de integración. Consulta SDK de Integración para obtener instrucciones detalladas sobre cómo habilitar la integración en una gráfica.
const sdk = new ChartsEmbedSDK({ baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp" // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog });
También puedes incluir el SDK de Embedding con JavaScript en línea en una página HTML, como se muestra en el siguiente snippet de código:
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>
Introduce tu ID de gráfica
Reemplaza la ID de gráfica existente con la ID de la gráfica que deseas mostrar. Su ID de gráfica es visible en la ventana modal de opciones de incrustación. Consulta SDK de Integración para obtener instrucciones detalladas sobre cómo habilitar la integración en una gráfica.
const chart = sdk.createChart({ chartId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog height: "700px" // Additional options go here });
Después de que termine dee personalizar la aplicación, estará lista para ejecutarse.