Embed Analytics into Your Application

How to embed GoodData analytics into your web application?

This tutorial will refer to GoodData.UI , our powerful library for building analytical applications powered by GoodData.

You can embed an insight, a dashboard, or even Analytical Designer as a tool for creating insights. You can also create a fully tailored application from individual components of GoodData.UI.

Embed an Insight

You are going to create a simple web application and embed the insight that you created in the previous tutorial .

Steps:

  1. Start generating the application skeleton with Accelerator Toolkit. Make sure you’re using at least version 0.13.0.

    npx @gooddata/create-gooddata-react-app --backend tiger
    
  2. When prompted, enter the application name and the hostname where GoodData.CN is exposed.

    ? What is your application name? gooddata-cn-demo
    ? Insert your hostname: http://localhost:3000
    ? What is your application desired flavor?
      JavaScript
    ❯ TypeScript
    

    The toolkit generates the application skeleton in the directory with the name that you provided and will guide you through the next steps.

    Success! Your GoodData-powered application "gooddata-cn-demo" was created.
    You can start it using the following commands:
        cd gooddata-cn-demo
        yarn start
    
  3. Start the application.

    cd gooddata-cn-demo
    yarn start
    

    Your browser opens. If port 8443 is empty on the localhost, it will be used by default.

    Empty application

  4. Provide your workspace identifier in src/constants.ts.

    export const workspace = "demo";
    
  5. Load the logical data model and all its entities to the application.

    export TIGER_API_TOKEN=YWRtaW46Ym9vdHN0cmFwOmFkbWluMTIz
    yarn refresh-md
    

    The output similar to the following is generated:

    *----------------------------------------------*
    |  GoodData Catalog Export Tool v8.5.0         |
    *----------------------------------------------*
    ✔ Catalog loaded
    ✔ Date data sets loaded
    ✔ Insights loaded
    ✔ Analytical dashboards loaded
     ✔ SUCCESS  All data have been successfully exported
    *---------------------------------------------------------------------------------*
    |  The result generated from workspace with id demo is located at src/md/full.ts  |
    *---------------------------------------------------------------------------------*
    ✨  Done in 2.65s.
    

    Review the src/md/full.ts file to validate the generated content.

  6. Embed the insight into the prepared home page. To do so, open src/routes/Home.tsx and update the content to the following:

    import React from "react";
    import { InsightView } from "@gooddata/sdk-ui-ext";
    
    import Page from "../components/Page";
    import { Insights } from "../md/full";
    
    const Home = () => {
        return (
            <Page>
                <InsightView insight={Insights.OrdersByStatusAndCategory} />
            </Page>
        );
    };
    export default Home;
    
  7. Return to your application in the browser, and click Home in the navigation bar.

    The embedded insight opens.

    Saved Insight

Embed a Dashboard

You are going to embed the dashboard that you created in the previous tutorial .

Steps:

  1. Open the demo workspace.

  2. Click the Dashboards tab.

  3. Click the button in the top right corner, and click Embed.

    The embedding dialog opens.

    Embed dialog

  4. Configure the embedding options as needed.

  5. Click Copy Iframe to copy the dashboard URL to the clipboard.

    You can now use it to embed the dashboard into your web application.

    Embed dashboard

Review More Examples

To see examples of using GoodData.UI components, visit the Example Gallery .