Embed Visualizations

Use visualizations in your web applications and make your analytics available to everyone.

You can embed visualizations, dashboards, or even the Analytical Designer into your web applications with the help of the GoodData.UI library and iframes.

GoodData.UI

GoodData.UI is a React-based JavaScript library for building responsive analytical applications.

With GoodData.UI, you can:

  • Display visualizations or existing visualizations from the GoodData platform using visual components.
  • Create your new visual components to address your specific analytical needs.

You can find more information in GoodData.UI documentation. and a more in-depth look at GoodData.UI is available in GoodData.UI SDK GitHub repository.

Examples

In the examples, you can find basic components such as Bar chart or Column chart and more complex components such as DashboardView. The examples contain code samples that allow you to copy & paste components into your application.

To see mentioned components and more, visit the Example Gallery.

First Steps With GoodData.UI

Use Accelerator Toolkit to create your first analytical application. The Accelerator Toolkit contains create-gooddata-react-app CLI-based tool that will guide you step by step through the process of creating an application in your terminal.

Usage:

npx @gooddata/create-gooddata-react-app --backend tiger

The following section contains an example of how to use the tool within GoodData. For more details about the tool itself, go to gooddata-create-gooddata-react-app GitHub repository.

Enabling CORS

If you are embedding GoodData analytics into web application hosted under a different domain, you may need to set up CORS. See Enable CORS For an Organization.

Next Steps

Check out the following articles to get started with embeding of your visualizations, dashboards and Analytical Designer:

If you just want to pull data from GoodData platform to your web application, you have an option to use the GoodData.UI Execute component.

To learn more about GoodData.UI, check out these courses on our GoodData University:

Embed a Visualization