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 Dashboards En la página, seleccione el panel que contiene el gráfico que desea integrar. Para obtener instrucciones sobre cómo acceder a los paneles, consulte Paneles.
Seleccione una gráfica.
Desde el panel, haga clic en la esquina superior derecha del gráfico para acceder a su información de incrustación. Seleccione Embed chart en el menú desplegable.
Nota
Si un gráfico está en un panel con la función de incrustación habilitada, la opción Embed Chart se habilita automáticamente. Por lo tanto, no se puede seleccionar la opción Embed chart para gráficos en paneles con la función de incrustación habilitada.
(Opcional) Especifique campos filtrables para su gráfico.
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 obtener más información sobre los campos filtrables, 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 incrustación para mostrar un gráfico incrustado no autenticado.
Clona el repositorio de GitHub para obtener todas las aplicaciones de ejemplo. Las instrucciones para ejecutar el ejemplo sin autenticar se encuentran en el archivo Léame. 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 necesitas editar están marcadas con un comentario que contiene ~REPLACE~.
Ingrese la URL base de sus gráficos
Reemplace la URL base de gráficos existente por la URL base del gráfico que desea mostrar. La URL base de gráficos se puede ver en la ventana modal de opciones de incrustación. Consulte el SDK de incrustación para obtener instrucciones detalladas sobre cómo habilitar la incrustación de un gráfico.
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>
Ingrese su ID de gráfico
Reemplace el ID del gráfico existente por el ID del gráfico que desea mostrar. El ID de su gráfico se puede ver en la ventana modal de opciones de incrustación. Consulte el SDK de incrustación para obtener instrucciones detalladas sobre cómo habilitar la incrustación de un gráfico.
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.