Adding a Viz to a Vizpad

Learn how to embed Tellius Vizpads using postMessage API—add charts to existing or new dashboards with flexible tab options.

To add a Viz (chart widget) to a Vizpad,

telliusFrame.postMessage({
    "actionType": "addToVizpad",
    "vizpadAndTabs": [{ //optional field 
        "vizpadId": "ID_of_Vizpad",
        "tabIds":: ["t1", "t2"], //optional field
    },
    {          
        "vizpadId": "ID_of_Vizpad",
    }], //optional field
    "newVizpadTitle": "abc", //optional field
    "viz": viz object that has to be saved in the vizpad
}, "*");

To add the Viz in a new Vizpad, the field vizpadAndTabs need not be specified.

• vizpadAndTabs - It is an optional field. It is an array that consists of objects vizpadID and tabIDs.

• vizpadID - ID of the vizpad where the viz has to be added.

• tabID - It is an optional field, and it's an array of strings that accepts tabIDs of the Vizpad. If not specified, the Viz will be added to the first tab of the Vizpad.

• newVizpadTitle - It is an optional field, and it mentions the title of the new Vizpad to be created.

newVizpadTitle and vizpadAndTabs should not be used together.

Viz follows the same structure as the response from the web socket call.

Sample code using newVizpadTitle

Request

In the following code, vizpadID is not specified, but newVizpadTitle is included. So, a new Vizpad is created, and the Viz is added to the newly created Vizpad.

telliusFrame.postMessage({
	"actionType": "addToVizpad",
	"viz": {
		"vizpad": {
			"reportLevelColumns": [
				"dddddd"
			]
		},
		"vizType": "kpi",
		"tooltips": {
			"yAxis": [{
					"filter": {
						"valueFilters": {
							"operator": "and",
							"negate": false,
							"id": "ID_of_Viz",
							"args": [{
								"value": "2012",
								"id": "ID_of_Viz",
								"condition": "=",
								"column": {
									"name": "Order_ID"
								}
							}]
						}
					},
					"columnName": "Profit",
					"aggregation": "sum"
				},
				{
					"filter": {
						"valueFilters": {
							"operator": "and",
							"negate": false,
							"id": "ID_of_Viz",
							"args": [{
								"value": "2014",
								"id": "ID_of_Viz",
								"condition": "=",
								"column": {
									"name": "Order_ID"
								}
							}]
						}
					},
					"columnName": "Profit",
					"aggregation": "sum"
				}
			]
		},
		"title": "Percentage change in total Profit for Order_ID 2012 compared to 2014",
		"theme": {
			"vizBackground": {
				"transparency": "0.9",
				"image": "img/test",
				"color": "white"
			},
			"name": "dark",
			"color": "black"
		},
		"size": {
			"width": 200,
			"height": 100
		},
		"placement": {
			"yDistance": 20,
			"xDistance": 10
		},
		"metadata": {
			"language": "english",
			"format": {
				"title": {
					"font": {
						"weight": "normal",
						"size": "16",
						"color": "#000000"
					},
					"enabled": true
				},
				"numberFormats": {
					"numberFormats": {
						"Profit_PERCENTAGE_CHANGE": {
							"suffix": "%"
						}
					},
					"lastColumn": "Profit",
					"enabled": true
				},
				"legend": {
					"font": {
						"weight": "normal",
						"size": "14",
						"color": "#78909c"
					},
					"enabled": true
				},
				"colorPaletteInfo": {
					"colors": ["#1565C0", "#F57F17", "#558B2F", "#BF360C", "#5E35B1", "#00838F", "#C62828", "#827717", "#E65100", "#5D4037", "#AD1457", "#6A1B9A", "#1976D2", "#F9A825", "#689F38", "#D84315", "#673AB7", "#0097A7", "#D32F2F", "#9E9D24", "#EF6C00", "#6D4C41", "#C2185B", "#7B1FA2", "#42A5F5", "#FFEB3B", "#9CCC65", "#FF8A65", "#9575CD", "#4DD0E1", "#EF5350", "#C0CA33", "#FF9800", "#8D6E63", "#EC407A", "#AB47BC", "#64B5F6", "#FFF176", "#AED581", "#FFAB91", "#B39DDB", "#80DEEA", "#E57373", "#D4E157", "#FFB74D", "#A1887F", "#F06292", "#BA68C8", "#90CAF9", "#FFF59D", "#C5E1A5", "#FFCCBC", "#D1C4E9", "#B2EBF2", "#EF9A9A", "#DCE775", "#FFCC80", "#BCAAA4", "#F48FB1", "#CE93D8"]
				},
				"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": "ID",
		"chartType": "simpleCount",
		"businessViewId": "ID_of_Business_View",
		"axes": {
			"yAxis": [{
				"format": {
					"type": "number",
					"suffix": "%",
					"display": true
				},
				"expression": {
					"right": {
						"name": "Profit",
						"filter": {
							"valueFilters": {
								"operator": "and",
								"negate": false,
								"id": "ID_of_Viz",
								"args": [{
									"value": "2014",
									"id": "ID_of_Viz",
									"condition": "=",
									"column": {
										"name": "Order_ID"
									}
								}]
							}
						},
						"aggregation": "sum"
					},
					"operator": "/",
					"left": {
						"right": {
							"name": "Profit",
							"filter": {
								"valueFilters": {
									"operator": "and",
									"negate": false,
									"id": "ID_of_Viz",
									"args": [{
										"value": "2014",
										"id": "ID_of_Viz",
										"condition": "=",
										"column": {
											"name": "Order_ID"
										}
									}]
								}
							},
							"aggregation": "sum"
						},
						"operator": "-",
						"left": {
							"name": "Profit",
							"filter": {
								"valueFilters": {
									"operator": "and",
									"negate": false,
									"id": "ID_of_Viz",
									"args": [{
										"value": "2012",
										"id": "ID_of_Viz",
										"condition": "=",
										"column": {
											"name": "Order_ID"
										}
									}]
								}
							},
							"aggregation": "sum"
						}
					},
					"expressionType": "percentage"
				},
				"columnName": "Profit_PERCENTAGE_CHANGE",
				"aggregation": ""
			}],
			"isMultipleAxes": false
		}
	}
}, "*");

Response

Once successfully saved, the following response will be sent to the embedding app from Tellius. This structure is followed when vizpadID is not used.

Here, tabID and vizpadID refer to the tab and the Vizpad in which the Viz is added.

{
   "actionType":"ADD_TO_VIZPAD",
   "originalVizId":"fe149768-68f4-4306-a032-65bd8c536c72",
   "vizpadAndTabs":[
      {
         "vizpadId":"ID_of_Vizpad",
         "tabs":[
            {
               "vizId":"ID_of_Viz",
               "vizpadId":"ID_of_Vizpad",
               "tabId":"ID_of_tab",
               "message":"Viz successfully saved to vizpad",
               "success":true
            }
         ]
      }
   ]
}

Sample code using vizpadAndTabs

Request

telliusFrame.postMessage({
   "actionType":"addToVizpad",
   "vizpadAndTabs":[
      {
         "vizpadId":"ID_of_Vizpad",
         "tabIds":[                     ]
      },
      {
         "vizpadId":"ID_of_Vizpad",
         "tabIds":[                     ]
      },
      {
         "vizpadId":"ID_of_Vizpad",
         "tabIds":[
            "bdb3beeb",
            "bdb3beeb"
         ]
      }
   ],
   "newVizpadTitle":"New Vizpad - KPIs",
   "viz":{
      "vizType":"kpi",
      "id":"ID11",
      "title":"Total Profit",
      "businessViewId":"ID_of_Business_View",
      "theme":{
         "name":"dark",
         "color":"black",
         "vizBackground":{
            "color":"white",
            "image":"img/test",
            "transparency":"0.9"
         }
      },
      "placement":{
         "xDistance":0,
         "yDistance":0
      },
      "size":{
         "height":4,
         "width":4
      },
      "tab":"tab_ID",
      "tempStorage":{               },
      "response":{               },
      "chartType":"simpleCount",
      "axes":{
         "yAxis":[
            {
               "aggregation":"sum",
               "translatedAggregation":"Sum",
               "columnName":"Profit",
               "title":{
                  "fonts":{
                     "size":"",
                     "weight":"",
                     "family":"",
                     "underline":"",
                     "italic":"",
                     "color":"",
                     "height":"",
                     "width":"",
                     "border":"",
                     "backgroundColor":"",
                     "alignment":"",
                     "bulletedText":""
                  }
               },
               "label":{                                 },
               "geoType":null,
               "filter":null,
               "marketShareFilter":null,
               "expression":null,
               "columnWidth":null
            }
         ],
         "isMultipleAxes":false
      },
      "metadata":{
         "anomalies":{
            "display":true
         },
         "dataColors":{
            "category":"",
            "color":""
         },
         "colorPalette":"ID_of_colorPalette",
         "format":{
            "axes":{
               "yAxis":{
                  "enabled":true
               },
               "xAxis":{
                  "enabled":true
               },
               "font":{
                  "weight":"normal",
                  "size":"14",
                  "color":"#78909c"
               }
            },
            "title":{
               "font":{
                  "weight":"normal",
                  "size":"16",
                  "color":"#000000"
               },
               "enabled":true
            },
            "background":{
               "enableGrid":false,
               "color":"#FFFFFF"
            },
            "legend":{
               "font":{
                  "weight":"normal",
                  "size":"14",
                  "color":"#78909c"
               },
               "enabled":true
            },
            "colorPaletteInfo":{
               "colors":[
                  "#1565C0",
                  "#F57F17",
                  "#558B2F",
                  "#BF360C",
                  "#5E35B1",
                  "#00838F",
                  "#C62828",
                  "#827717",
                  "#E65100",
                  "#5D4037",
                  "#AD1457",
                  "#6A1B9A",
                  "#1976D2",
                  "#F9A825",
                  "#689F38",
                  "#D84315",
                  "#673AB7",
                  "#0097A7",
                  "#D32F2F",
                  "#9E9D24",
                  "#EF6C00",
                  "#6D4C41",
                  "#C2185B",
                  "#7B1FA2",
                  "#42A5F5",
                  "#FFEB3B",
                  "#9CCC65",
                  "#FF8A65",
                  "#9575CD",
                  "#4DD0E1",
                  "#EF5350",
                  "#C0CA33",
                  "#FF9800",
                  "#8D6E63",
                  "#EC407A",
                  "#AB47BC",
                  "#64B5F6",
                  "#FFF176",
                  "#AED581",
                  "#FFAB91",
                  "#B39DDB",
                  "#80DEEA",
                  "#E57373",
                  "#D4E157",
                  "#FFB74D",
                  "#A1887F",
                  "#F06292",
                  "#BA68C8",
                  "#90CAF9",
                  "#FFF59D",
                  "#C5E1A5",
                  "#FFCCBC",
                  "#D1C4E9",
                  "#B2EBF2",
                  "#EF9A9A",
                  "#DCE775",
                  "#FFCC80",
                  "#BCAAA4",
                  "#F48FB1",
                  "#CE93D8"
               ]
            },
            "axesSlider":{
               "sliderValue":0
            },
            "includeNullsInTQL":null,
            "dataLabel":{
               "font":{
                  "weight":"normal",
                  "textOutline":"normal",
                  "size":"9",
                  "color":"contrast"
               },
               "enabled":false,
               "detailedFormat":false
            },
            "numberFormats":{
               "numberFormats":{                                 },
               "lastColumn":""
            },
            "colorFormats":{
               "lastColumnAggregation":"",
               "lastColumn":"",
               "formatBy":"value",
               "enabled":false,
               "colorFormats":{                                 }
            },
            "benchmark":{
               "enabled":false,
               "benchmarkEnabled":false
            }
         },
         "dualAxis":true,
         "responseMetadata":{                     },
         "columnMapping":{                     },
         "language":"en"
      },
      "filters":{               },
      "pagination":{
         "offset":0,
         "isTruncated":false,
         "allowPagination":false
      },
      "tableFields":{
         "rows":[                     ],
         "columns":[                     ]
      },
      "possibleBucketInfo":{               },
      "isStacked":false,
      "stackType":"normal",
      "legend":{
         "enabled":true,
         "position":"",
         "maxHeight":"",
         "fonts":{
            "size":"",
            "weight":"",
            "family":"",
            "underline":"",
            "italic":"",
            "color":"",
            "height":"",
            "width":"",
            "border":"",
            "backgroundColor":"",
            "alignment":"",
            "bulletedText":""
         }
      },
      "secondaryGroupBy":{               },
      "targetLine":{
         "display":false,
         "value":"",
         "label":""
      },
      "basicChartSelections":{
         "isHighlighted":false,
         "editMode":false
      },
      "basicChartInteractions":{               },
      "vizpad":{
         "id":"ID_of_Vizpad",
         "title":"Total Profit",
         "sharings":[                     ],
         "businessViewId":"ID_of_Business_View",
         "newVizes":[                     ],
         "resolution":"default",
         "vizes":[                     ],
         "tabs":[
            {
               "id":"ID_of_tab",
               "name":"Tab 1",
               "placements":[
                  {
                     "col":0,
                     "row":0,
                     "sizeX":4,
                     "sizeY":4,
                     "vizId":"ID_of_Viz"
                  }
               ],
               "filters":{
                  "timeFilters":[                                       ],
                  "valueFilters":{
                     "operator":"and",
                     "negate":false,
                     "id":null,
                     "args":[                                             ]
                  }
               }
            }
         ],
         "sharingByLink":true,
         "timeRange":{
            "type":"all"
         },
         "thumbnail":"",
         "placement":[
            {
               "sizeY":4,
               "sizeX":4,
               "col":0,
               "row":0,
               "vizId":"ID_of_Viz"
            }
         ],
         "sharedWith":[                     ],
         "workspaceId":"",
         "elements":[                     ],
         "settings":{
            "gridStructure":null,
            "showGridlines":null,
            "showVizOverlay":null
         },
         "createdAt":"2021-04-23T12:10:15.640087",
         "updatedAt":"2021-04-23T12:10:17.490485",
         "colorPaletteId":"ID_of_colorPalette",
         "gradientPaletteId":"ID_of_gradientPalette",
         "reportLevelColumns":[
            "discount_formula"
         ],
         "isShared":null,
         "readOnly":null,
         "favorite":false
      },
      "alreadySaved":true,
      "isViewData":false,
      "enableSmartBucketing":true,
      "fromCache":true
   }
}, "*");

Response

{
   "actionType":"ADD_TO_VIZPAD",
   "originalVizId":"ID_of_original_Viz",
   "vizpadAndTabs":[
      {
         "tabs":[
            {
               "vizId":"ID_of_Viz",
               "vizpadId":"ID_of_Vizpad",
               "tabId":"ID_of_tab",
               "message":"Viz successfully saved to vizpad",
               "success":true
            }
         ],
         "vizpadId":"ID_of_Vizpad"
      },
      {
         "message":"Invalid vizpad",
         "vizpadId":"ID_of_Vizpad",
         "success":false
      },
      {
         "tabs":[
            {
               "vizId":"ID_of_Viz",
               "vizpadId":"ID_of_Vizpad",
               "tabId":"ID_of_tab",
               "message":"Viz successfully saved to vizpad",
               "success":true
            },
            {
               "message":"Invalid tabId",
               "vizpadId":"ID_of_Vizpad",
               "tabId":"ID_of_tab",
               "success":false
            }
         ],
         "vizpadId":"ID_of_Vizpad"
      }
   ]
}