Puede incrustar un gráfico en una aplicación web sin necesidad de autenticación para ver los datos del gráfico. Para restringir el acceso a su gráfico incrustado, consulte Tutoriales de gráficos incrustados autenticados.
Requisitos previos
Debe ser autor de un panel para habilitar la incrustación no autenticada de un gráfico.
Procedimientos
Habilitar la incrustación no autenticada para un gráfico
Habilite la incrustación no autenticada para generar un ID de gráfico y una URL base. Necesitará su ID y URL base para mostrar su gráfico en una página web.
Seleccione un panel de control.
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 un gráfico.
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.
Especifique los campos en los que los visores de gráficos pueden filtrar datos. De forma predeterminada, no se especifica ningún campo, lo que significa que el gráfico no se puede filtrar 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áfico
Si ya tiene una aplicación para mostrar su gráfico, puede agregar un gráfico incrustado sin autenticar. De lo contrario, continúe con los pasos restantes para crear una nueva aplicación.
MongoDB ofrece una aplicación de ejemplo prediseñada en 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. Puede ejecutar la aplicación tal como está o personalizarla para usar un gráfico propio.
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 puede incluir el SDK de incrustación con Javascript en línea en una página HTML, como se muestra en el siguiente fragmento 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 });
Una vez que termine de personalizar la aplicación, estará lista para ejecutarse.