Table of Contents

Steps to embed a Vizpad

Ramya Priya Updated by Ramya Priya

Using the following steps, you can embed (using iFrame) Vizpad into your app.

The embedded app refers to Tellius, whereas the embedding app refers to the app in which Tellius components are to be integrated.
  1. Get the embedding URL from Tellius.
  2. Include the embedding URL in the HTML of the required app.
  3. Connect the app with Tellius.

Getting the embedding URL

There are two ways in which you can obtain the embedding URL: directly from the Vizpad or from Settings.

From a Vizpad
  1. Open the required Vizpad under Explore, and click on the Share button at the top right corner.
  1. Click on Generate Embed URL. Once the URL is generated, select the required permission (view/edit) and click on Copy.
From Settings
  1. Navigate Settings --> Embed --> Vizpads. The list of existing Vizpads is displayed.
  2. For the required Vizpad, click on the Copy button under Embed URL.

Including the obtained URL

An embedding URL looks like the following:

http://domain/dashboard/vizpadId/tabId/?access=read&datasetId=ID_of_dataset&jwt=userToken&hideDownload=false&hideFiltersApplied=false&hideTabs=false

Once you embed the URL, the required Vizpad will be loaded.

Components of the embedding URL
  • vizpadId - the ID of the Vizpad to be embedded
  • tabId - As per the tabID specified in the embedding URL, the current tab will be set.
  • datasetId - the ID of the dataset to which the Vizpad belongs
  • hideDownload - if set to true, the download button will be hidden.
  • hideFiltersApplied - if set to true, all the filters applied on the Vizpad will be hidden.
  • hideTabs - if set to true, the bottom pane where all the tabs are present will be hidden.
  • jwt - user token
If you want to deploy row-level permissions to the embedded Insight, then a uniquejwt (user token) needs to be generated using login API. For more details, check out this section.

Connecting with Tellius

  1. The embedding app needs to send a message INITIALIZE to connect with Tellius.
  2. Tellius validates and responds with TELLIUS_INITIALIZED message as an acknowledgment.
  3. After receivingTELLIUS_INITIALIZED message, the required filters can be applied.

The following is a sample code to connect with Tellius:

var telliusFrame ;
    document.querySelector("iframe").addEventListener("load", function() {
        telliusFrame = document.getElementsByTagName("iframe")[0].contentWindow;
        telliusFrame.postMessage('INITIALIZE', "*");
    })
    function receiveMessage(event) {
        if(event.data === 'TELLIUS_INITIALIZED') {
            telliusFrame.postMessage({
                actionType: "getVizpadFiltersApplied",
             }, "*");
        }
    }
window.addEventListener("message", receiveMessage, false);

As furnished in the code above, we use window.postMessage for communication between Tellius and the embedding app (two-way communication). The messages which are sent to Tellius from the embedding app are included in telliusFrame.postMessage(). With the help of the function postMessage, required actions can be performed.

To enable this communication and to receive messages, the embedding app needs to have eventListener. For every point clicked, or area selected/highlighted in the chart, Tellius will send a message to the embedding app.

Structure of a Vizpad

Each Vizpad consists of one or more tabs. Each tab can have multiple Viz. A Viz is a chart widget, and it is a component of a Vizpad. The following sample code shows the structure of a Vizpad and a Viz.

Utmost, a Vizpad can have 10 tabs, and a tab can have 25 Viz.
sharings: []
vizPad: {vizItemsCount: 3, updatedAt: "2020-07-07T07:05:34.141827", title: "Untitled 202007061840",..}
    businessViewId: "enter_ID_of_business_view"
    colorPaletteId: "enter_ID_of_color_palette"
    createdAt: "2020-07-06T13:10:32.393827"
    elements: []
    gradientPaletteId: "ae5a3524-5d49-415d-901a-ecf6ecf376d8"
    id: "5e833be1-e904-4d3e-af27-99422d3ec2b7"
    owner: {username: "superUser", id: "ID_of_the_owner"}
    placement: []
    settings: {}
    sharedWith: []
    sharingByLink: true
    tabs: [{placements: [, …], name: "Tab 1", id: "45b78c0b-b690-4b08-a7de-0b7a980dc1fe", …}, {, …}]
        0: {placements: [, …], name: "Tab 1", id: "enter_ID_here", ...}
        1: {, …}
            id: "89cad4a5-944d-46b6-ac36-3401de292de3"
            name: "Tab 2"
            placements: [{vizTitle: "Title viz621", vizId: "ID_of_the_viz", sizeY: 4, sizeX: 4, ...}]
            thumbnail: "e0a8e8a0-4fa7-4875-a0a2-8c9b050d88f9"
            timeRange: {}
            title: "Title 202007061840"
            updatedAt: "2020-07-07T07:05:34.141827"
            vizItemsCount: 3

Structure of a Viz

{
    "vizType": "chart",
    "version": "3.4",
    "updatedAt": "2022-12-28T12:30:35.330508",
    "unuse": [],
    "title": "sum Row_ID by Country, Ship_Mode",
    "theme": {
        "vizBackground": {
            "transparency": "0.9",
            "image": "img/test",
            "color": "white"
        },
        "name": "dark",
        "color": "black"
    },
    "tab": "23b1dd9f-b756-4b38-9fb0-372e2e011aff",
    "sortBy": [],
    "size": {
        "width": 4,
        "height": 4
    },
    "secondaryGroupBy": {
        "stackBy": [],
        "colorBy": [
            {
                "columnName": "Ship_Mode"
            }
        ]
    },
    "placement": {
        "yDistance": 8,
        "xDistance": 4
    },
    "pagination": {
        "offset": 0,
        "maximumAllowedRows": 10000,
        "isTruncated": false,
        "allowPagination": true
    },
    "owner": {
        "username": "superUser",
        "id": "ID_of_owner"
    },
    "metadata": {
        "format": {
            "title": {
                "font": {
                    "weight": "normal",
                    "size": "16",
                    "color": "#000000"
                },
                "enabled": true
            },
            "legend": {
                "font": {
                    "weight": "normal",
                    "size": "14",
                    "color": "#78909c"
                },
                "enabled": true
            },
            "colorPaletteInfo": {
                "colors": [
                    "#3252DB",
                    "#0AB759",
                    "#D33131",
                    "#FF9F28",
                    "#05C4FF",
                    "#FFEA00",
                    "#EA08D5",
                    "#A1EA04",
                    "#4784ED",
                    "#00D9EF",
                    "#C62FBF",
                    "#029C01",
                    "#F44A10",
                    "#07C9AD",
                    "#FFEC40",
                    "#00EDED",
                    "#607D8B",
                    "#FED400",
                    "#00C802",
                    "#00D6B2",
                    "#ED3D00",
                    "#795548"
                ]
            },
            "background": {
                "enableGrid": false,
                "color": "#FFFFFF"
            },
            "axes": {
                "yAxis": {
                    "enabled": true
                },
                "xAxis": {
                    "enabled": true
                },
                "font": {
                    "weight": "normal",
                    "size": "14",
                    "color": "#78909c"
                }
            }
        },
        "dualAxis": true,
        "colorPalette": "ID_of_colorPalette"
    },
    "id": "047aed12-9871-49e5-a31a-9813817979b0",
    "createdAt": "2022-12-28T12:30:35.330502",
    "colorPaletteDetails": {
        "name": "Tellius 1",
        "id": "ID_of_colorPaletteDetails",
        "colors": [
            {
                "name": "#1565C0",
                "color": "#1565C0"
            },
            {
                "name": "#F57F17",
                "color": "#F57F17"
            },
            {
                "name": "#558B2F",
                "color": "#558B2F"
            },
            {
                "name": "#BF360C",
                "color": "#BF360C"
            },
            {
                "name": "#5E35B1",
                "color": "#5E35B1"
            },
            {
                "name": "#00838F",
                "color": "#00838F"
            },
            {
                "name": "#C62828",
                "color": "#C62828"
            },
            {
                "name": "#827717",
                "color": "#827717"
            },
            {
                "name": "#E65100",
                "color": "#E65100"
            },
            {
                "name": "#5D4037",
                "color": "#5D4037"
            },
            {
                "name": "#AD1457",
                "color": "#AD1457"
            },
            {
                "name": "#6A1B9A",
                "color": "#6A1B9A"
            },
            {
                "name": "#1976D2",
                "color": "#1976D2"
            },
            {
                "name": "#F9A825",
                "color": "#F9A825"
            },
            {
                "name": "#689F38",
                "color": "#689F38"
            },
            {
                "name": "#D84315",
                "color": "#D84315"
            },
            {
                "name": "#673AB7",
                "color": "#673AB7"
            },
            {
                "name": "#0097A7",
                "color": "#0097A7"
            },
            {
                "name": "#D32F2F",
                "color": "#D32F2F"
            },
            {
                "name": "#9E9D24",
                "color": "#9E9D24"
            },
            {
                "name": "#EF6C00",
                "color": "#EF6C00"
            },
            {
                "name": "#6D4C41",
                "color": "#6D4C41"
            },
            {
                "name": "#C2185B",
                "color": "#C2185B"
            },
            {
                "name": "#7B1FA2",
                "color": "#7B1FA2"
            },
            {
                "name": "#42A5F5",
                "color": "#42A5F5"
            },
            {
                "name": "#FFEB3B",
                "color": "#FFEB3B"
            },
            {
                "name": "#9CCC65",
                "color": "#9CCC65"
            },
            {
                "name": "#FF8A65",
                "color": "#FF8A65"
            },
            {
                "name": "#9575CD",
                "color": "#9575CD"
            },
            {
                "name": "#4DD0E1",
                "color": "#4DD0E1"
            },
            {
                "name": "#EF5350",
                "color": "#EF5350"
            },
            {
                "name": "#C0CA33",
                "color": "#C0CA33"
            },
            {
                "name": "#FF9800",
                "color": "#FF9800"
            },
            {
                "name": "#8D6E63",
                "color": "#8D6E63"
            },
            {
                "name": "#EC407A",
                "color": "#EC407A"
            },
            {
                "name": "#AB47BC",
                "color": "#AB47BC"
            },
            {
                "name": "#64B5F6",
                "color": "#64B5F6"
            },
            {
                "name": "#FFF176",
                "color": "#FFF176"
            },
            {
                "name": "#AED581",
                "color": "#AED581"
            },
            {
                "name": "#FFAB91",
                "color": "#FFAB91"
            },
            {
                "name": "#B39DDB",
                "color": "#B39DDB"
            },
            {
                "name": "#80DEEA",
                "color": "#80DEEA"
            },
            {
                "name": "#E57373",
                "color": "#E57373"
            },
            {
                "name": "#D4E157",
                "color": "#D4E157"
            },
            {
                "name": "#FFB74D",
                "color": "#FFB74D"
            },
            {
                "name": "#A1887F",
                "color": "#A1887F"
            },
            {
                "name": "#F06292",
                "color": "#F06292"
            },
            {
                "name": "#BA68C8",
                "color": "#BA68C8"
            },
            {
                "name": "#90CAF9",
                "color": "#90CAF9"
            },
            {
                "name": "#FFF59D",
                "color": "#FFF59D"
            },
            {
                "name": "#C5E1A5",
                "color": "#C5E1A5"
            },
            {
                "name": "#FFCCBC",
                "color": "#FFCCBC"
            },
            {
                "name": "#D1C4E9",
                "color": "#D1C4E9"
            },
            {
                "name": "#B2EBF2",
                "color": "#B2EBF2"
            },
            {
                "name": "#EF9A9A",
                "color": "#EF9A9A"
            },
            {
                "name": "#DCE775",
                "color": "#DCE775"
            },
            {
                "name": "#FFCC80",
                "color": "#FFCC80"
            },
            {
                "name": "#BCAAA4",
                "color": "#BCAAA4"
            },
            {
                "name": "#F48FB1",
                "color": "#F48FB1"
            },
            {
                "name": "#CE93D8",
                "color": "#CE93D8"
            }
        ]
    },
    "chartType": "line",
    "businessViewId": "ID_of_business_view",
    "axes": {
        "yAxis": [
            {
                "columnName": "Row_ID",
                "aggregation": "sum"
            }
        ],
        "xAxis": {
            "columnName": "Country"
        },
        "lineYAxis": [],
        "isMultipleAxes": false
    }
}

Did we help you?

Apply and delete filters

Contact