📊Embedding Vizpads
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.
Get the embedding URL from Tellius.
Include the embedding URL in the HTML of the required app.
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
Open the required Vizpad under Explore, and click on the Share button at the top right corner.
Click on Generate Embed URL. Once the URL is generated, select the required permission (view/edit) and click on Copy.
From Settings
Navigate Settings → Embed → Vizpads. The list of existing Vizpads is displayed.
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/?utm_source=ID
Once you embed the URL, the required Vizpad will be loaded.
Components of the embedding URL
vizpadId- the ID of the Vizpad to be embeddedtabId- 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
Connecting with Tellius
The embedding app needs to send a message
INITIALIZEto connect with Tellius.Tellius validates and responds with
TELLIUS_INITIALIZEDmessage as an acknowledgment.After receiving
TELLIUS_INITIALIZEDmessage, 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: 3Structure 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
}
}Was this helpful?