Embed Visualizations Using React SDK

GoodData.UI is a React-based JavaScript library for building responsive analytical applications. You can use GoodData.UI to embed your Visualizations and Dashboards inside your web applications.

You can copy pre-generated React code snippets from the Analytical Designer or from a Dashboard, see the following article sections for details.

Prepare Environment For GoodData.UI

Before you can embed a visualization into your application, you need to first integrate the GoodData.UI React SDK into your application environment, follow the instructions in Integrate into an Existing Application. Ensure that you have covered the following steps:

• Install the necessary dependencies (Step 1)
• Set up Analytical Backend and integrate it into your application (Step 3)
• Solve Cross-Origin Resource Sharing (Step 4)

Embed Live Visualization

A live visualizations that reflects any changes you make to the visualization in your GoodData deployment. Note that only saved visualizations can be embedded as live visualizations.

Steps:

1. Open the visualization you want to embed.

2. Click the embed icon and select Embed as a live insight.

   

3. Configure the code.
   You can select the type of code, display/hide the title, or set a custom height.

   

4. Copy the code.

Embed Permanent Visualization

A permanent visualizations that embeds the current version of the visualization and does not reflect any future changes made to the visualization in your GoodData deployment.

Steps:

1. Open the visualization you want to embed.

2. Click the embed icon and select Embed as a permanent insight.

   

3. Configure the code.
   You can select the type of code, include the insight configuration of colors/legend/axes/canvas, or set a custom height.

   

4. Copy the code.

Embed Dashboards

Users must be workspace members to see the embedded dashboard.

Steps:

1. Open the dashboard you want to embed.

2. Click the … icon and select Embed.

   

   The Embed dashboard dialog opens.

3. Switch to the React tab.

   

4. Copy the code.