Using the following steps, you can embed (using iFrame) Vizpad into your app.
There are two ways in which you can obtain the embedding URL: directly from the Vizpad or from Settings.
Once you embed the URL, the required Vizpad will be loaded.
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.
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.
Copy 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
Copy {
"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
}
} 
