How to embed a chart out superset【superset 如何嵌出图表】

[JasonCao888]

https://blog.csdn.net/master_hunter/article/details/125392601
I referred to the above document, configured the parameters and set the permissions, but still could not embed the chart successfully. I hope the community can help me solve it. I would be very grateful.

[JasonCao888]

我参考上述文档，做了参数配置和权限设置，但是还是不能成功嵌出图表，希望社区的同学能够帮帮我解决，不胜感激

[JasonCao888]

The superset version I use is 4.0.2, and the deployment method is virtual environment deployment.【我使用的superset版本是4.0.2 ，部署方式是虚拟环境部署。】After setting the following parameters in the configuration file and configuring permissions in public, the chart still cannot be embedded【在配置文件设置以下参数，在public配置权限后，依然不能嵌出图表】I hope someone can help answer this question. thanks very much

[dosubot[bot]]

@JasonCao888 你好！我是Dosu，一个能够帮助你解决bug、回答问题，并成为贡献者的机器人。我会在等待人类维护者的过程中为你提供帮助。

To successfully embed a chart in Superset, you can follow these steps using the Superset Embedded SDK:

1. Install the SDK: Ensure you have the Superset Embedded SDK installed. You can do this using npm:

   npm install --save @superset-ui/embedded-sdk

   Alternatively, you can load the SDK from a CDN:

   <script src="https://unpkg.com/@superset-ui/embedded-sdk"></script>

2. Prepare the Parameters: You need to prepare the parameters required by the embedDashboard function. These include:

   • id: The ID provided by the embed configuration UI in Superset.
   • supersetDomain: The domain where Superset is hosted, including the protocol (e.g., https://superset.example.com).
   • mountPoint: The HTML element where the iframe will be mounted.
   • fetchGuestToken: A function to fetch a guest token from your Host App's backend server.
   • dashboardUiConfig (optional): Configuration for the dashboard UI, such as hiding the title, tabs, or chart controls.
   • iframeSandboxExtras (optional): Additional sandbox attributes for the iframe.

3. Call the embedDashboard Function: Use the prepared parameters to call the embedDashboard function. Here is an example:

   import { embedDashboard } from '@superset-ui/embedded-sdk';
   
   const mountPoint = document.getElementById('your-mount-point-id');
   const fetchGuestToken = async () => {
     // Implement your logic to fetch the guest token
     return 'your-guest-token';
   };
   
   embedDashboard({
     id: 'your-dashboard-id',
     supersetDomain: 'https://superset.example.com',
     mountPoint: mountPoint,
     fetchGuestToken: fetchGuestToken,
     dashboardUiConfig: {
       hideTitle: true,
       hideTab: false,
       hideChartControls: true,
       filters: {
         visible: true,
         expanded: false
       },
       urlParams: {
         foo: 'value1',
         bar: 'value2'
       }
     },
     iframeSandboxExtras: ['allow-top-navigation', 'allow-popups-to-escape-sandbox']
   }).then(embeddedDashboard => {
     // Use the embeddedDashboard object to interact with the embedded dashboard
   });

4. Handle the Embedded Dashboard: The embedDashboard function returns a promise that resolves to an EmbeddedDashboard object. You can use this object to interact with the embedded dashboard, such as getting the scroll size, unmounting the dashboard, getting the dashboard permalink, and getting active tabs.

5. Configure Allowed Domains: Ensure that you have configured the allowed domains for embedding. This can be done through the Superset UI by specifying the domains that are permitted to embed the dashboard. This is crucial for security and ensuring that only authorized domains can embed your dashboard.

By following these steps and using the provided code, you should be able to successfully embed a chart in Superset. Make sure your backend is set up to generate and provide the necessary guest tokens for authentication. Additionally, ensure that the allowed domains are correctly configured to prevent unauthorized access ^[1][2][3][4].

To continue talking to Dosu, mention @dosu.