Embed & Integrate
Use GoodData.CN in a web application and make your analytics available to everyone.
You can embed insights, 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 insights or existing visualizations from the GoodData.CN 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.
Warning
Ensure that you work with GoodData.UI versions >= 8.3.1 when you use it with GoodData.CN.
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.CN. For more details about the tool itself, go to gooddata-create-gooddata-react-app GitHub repository.
Enabling CORS
If you are embedding GoodData.CN 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 insights, dashboards and Analytical Designer:
If you just want to pull data from GoodData.CN 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:
- GoodData.UI - Starting from Scratch - you will learn how to implement, build and deploy your first custom analytics application by following step-by-step instructions.
- GoodData.UI Demo - Building Basic Dashboards - you will learn basic principles of how to build a custom dashboard using GoodData.UI SDK.
- GoodData.UI Demo - Making Dashboards Interactive - you will learn how to build and improve a custom dashboard using GoodData.UI SDK.
- GoodData.UI Demo - Building Custom Visualizations - you will learn how to build custom React components with the GoodData.UI SDK.