Embed a visualization

Embed a visualization

This article explains how to embed a single ThoughtSpot visualization in your Web page, portal, or application.

A visualization is a single answer pinned to a Liveboard. Pinned visualizations appear without the search bar or other options to change the visualization.

You cannot embed a saved answer as an individual visualization. Saved answers can be used in the SearchEmbed component, where they will load with the search bar and other options available with ThoughtSpot search. Any visualization you want to embed using LiveboardEmbed must exist on a Liveboard object in ThoughtSpot.

Note

  • If you want to display multiple charts or tables that have been saved in a Liveboard, try to embed a single Liveboard rather than multiple individual visualizations. This helps in improving your application performance.

  • If you must embed multiple visualizations, prefetch static resources before loading the page. We recommend that you limit the page to display not more than four visualizations at a time.

Import the LiveboardEmbed package🔗

Import the visualization SDK library to your application environment:

npm

import {
    LiveboardEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent
}
from '@thoughtspot/visual-embed-sdk';

ES6

<script type = 'module'>
    import {
        LiveboardEmbed,
        AuthType,
        init,
        prefetch
    }
from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

Initialize the SDK🔗

Initialize the SDK and define authentication attributes.

Create an instance of the LiveboardEmbed class🔗

const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    liveboardId: '<%=liveboardGUID%>',
    vizId: '<%=vizGUID%>',
});

For more information about the visualization embed object, classes, methods, interface properties, and enumeration members, see the following pages:

Register, handle, and trigger events🔗

Register event listeners:

liveboardEmbed.on(EmbedEvent.init, showLoader)
liveboardEmbed.on(EmbedEvent.load, hideLoader)

For more information about events, see the following pages:

Render the embedded visualization🔗

Construct the URL for the embedded visualization and render the embedded content:

liveboardEmbed.render();

Test your embedding🔗

  1. Load the embedded visualization in your app.

    Visualization embed

  2. Explore the visualization, and verify if objects render and show the desired data.

Additional resources🔗