Let’s embed a Dashboard or Chart in another application
Notice: Undefined offset: 1 in /data/httpd/www/html/wp-includes/media.php on line 764
Notice: Undefined offset: 1 in /data/httpd/www/html/wp-includes/media.php on line 766
Notice: Undefined offset: 1 in /data/httpd/www/html/wp-includes/media.php on line 769
Notice: Undefined offset: 1 in /data/httpd/www/html/wp-includes/media.php on line 70
If you’ve analyzed your business data and created a great dashboard or chart, you might want to include it on another system or web page.
Fortunately, Metatron Discovery provides a way to embed dashboards or charts in other applications.
First, let’s assume that a dashboard and chart have been pre-created through a particular user ‘metatron’.
1. Check the ID of a chart or dashboard
Use your browser’s developer tools to check the ID of each dashboard and chart.
These IDs are used for subsequent API calls.
2. Authenticate users and get tokens
Metatron Discovery allows users to issue OAuth Tokens and proceed with the authentication process.
To do this, Discovery provides an API to generate and deliver JWT-style tokens.
(POST) /oauth/token
Header Name | Description | Note |
Authorization | set encoded clientId/secret infomation using base64 | discovery default client sample : “Basic cG9sYXJpc19jbGllbnQ6cG9sYXJpcw==” |
Param Name | Description | Note |
grant_type | set “password” | |
scope | set “read” | |
username | target username | |
password | password |
Sample Request
var data = new FormData(); data.append("grant_type", "password"); data.append("scope", "read"); data.append("username", "metatron"); data.append("password", "metatron"); var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.open("POST", "https://dev-discovery.www.metatron.app/oauth/token"); xhr.setRequestHeader("Authorization", "Basic cG9sYXJpc19jbGllbnQ6cG9sYXJpcw=="); xhr.send(data);
Sample Response
{ "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NTYxMjY5MTUsInVzZXJfbmFtZSI6ImFkbWluIiwiYXV0aG9yaXRpZXMiOlsiUEVSTV9TWVNURU1fTUFOQUdFX0RBVEFTT1VSQ0UiLCJQRVJNX1NZU1RFTV9NQU5BR0VfUFJJVkFURV9XT1JLU1BBQ0UiLCJQRVJNX1NZU1RFTV9NQU5BR0VfVVNFUiIsIlBFUk1fU1lTVEVNX01BTkFHRV9TWVNURU0iLCJfX1BFUk1JU1NJT05fTUFOQUdFUiIsIl9fQURNSU4iLCJQRVJNX1NZU1RFTV9NQU5BR0VfU0hBUkVEX1dPUktTUEFDRSIsIl9fU0hBUkVEX1VTRVIiLCJQRVJNX1NZU1RFTV9WSUVXX1dPUktTUEFDRSIsIl9fREFUQV9NQU5BR0VSIiwiUEVSTV9TWVNURU1fTUFOQUdFX01FVEFEQVRBIiwiUEVSTV9TWVNURU1fTUFOQUdFX1dPUktTUEFDRSIsIl9fUFJJVkFURV9VU0VSIl0sImp0aSI6IjA2MWIxMGIzLWMzNTYtNGFkMC05YWI1LTA3MDJhYWI5MzVjMyIsImNsaWVudF9pZCI6ImpvdnRLciIsInNjb3BlIjpbInJlYWQiXX0.yqJhBDHZ3U6t2e9g2v6SlOcSyUn6JsMRHjSwDwsdiA4", "token_type": "bearer", "refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJhZG1pbiIsInNjb3BlIjpbInJlYWQiXSwiYXRpIjoiMDYxYjEwYjMtYzM1Ni00YWQwLTlhYjUtMDcwMmFhYjkzNWMzIiwiZXhwIjoxNTU4Njc1NzE1LCJhdXRob3JpdGllcyI6WyJQRVJNX1NZU1RFTV9NQU5BR0VfREFUQVNPVVJDRSIsIlBFUk1fU1lTVEVNX01BTkFHRV9QUklWQVRFX1dPUktTUEFDRSIsIlBFUk1fU1lTVEVNX01BTkFHRV9VU0VSIiwiUEVSTV9TWVNURU1fTUFOQUdFX1NZU1RFTSIsIl9fUEVSTUlTU0lPTl9NQU5BR0VSIiwiX19BRE1JTiIsIlBFUk1fU1lTVEVNX01BTkFHRV9TSEFSRURfV09SS1NQQUNFIiwiX19TSEFSRURfVVNFUiIsIlBFUk1fU1lTVEVNX1ZJRVdfV09SS1NQQUNFIiwiX19EQVRBX01BTkFHRVIiLCJQRVJNX1NZU1RFTV9NQU5BR0VfTUVUQURBVEEiLCJQRVJNX1NZU1RFTV9NQU5BR0VfV09SS1NQQUNFIiwiX19QUklWQVRFX1VTRVIiXSwianRpIjoiYzM4ZjgzYWQtYmNkMy00MzZhLTkzOWUtYjE3NzE5N2UwMWE4IiwiY2xpZW50X2lkIjoiam92dEtyIn0.NsJabkUQLmaLnnd7sPlzVecJfGNMQFDEVUd79J0D14Q", "expires_in": 43199, "scope": "read", "jti": "061b10b3-c356-4ad0-9ab5-0702aab935c3" }
3. Include dashboards and charts in iFrame
Discovery provides APIs for passing charts and dashboard pages with authentication information.
This allows you to include widgets in external applications.
(POST) /api/sso
Param Name | Description | Note |
token | OAuth token | |
refreshToken | OAuth refresh token | |
type | Set “bearer” | |
userId | username to view | |
forwardUrl | forward embedded URL * Chart : http://{discovery domain}/app/v2/embedded/page/{chart_widget_id} * Dashboard : http://{discovery domain}/app/v2/embedded/dashboard/{dashbard_id} |
Sample Request
http://{discovery domain}/api/sso?token=token&refreshToken=refreshToken&type=bearer&userId=metatron&forwardUrl=http://discovery.www.metatron.app/app/v2/embedded/dashboard/id
Iframe Sample Code
(for JavaScript)
function openMetatron(token, refreshToken, type, userId, redirectUri) { var target = 'metatron'; var formName = 'metatronForm'; let existForm = document.getElementsByName(formName)[ 0 ]; if (existForm) { existForm.remove(); } let form = document.createElement('form'); form.setAttribute('name', formName); form.setAttribute('method', 'post'); form.setAttribute('action', 'https://discovery.www.metatron.app/api/sso?token='+token+'&refreshToken='+refreshToken+'&type='+type+'&userId='+userId+'&forwardUrl='+redirectUri); form.setAttribute('target', target); document.getElementsByTagName('body')[ 0 ].appendChild(form); window.open('', target); form.submit(); }
(for TypeScript)
private openMetatron(returnUrl: string) { const target = 'metatron'; const formName = 'metatronForm'; const token = this.cookieService.get(CookieConstant.KEY.METATRON_TOKEN); const refreshToken = this.cookieService.get(CookieConstant.KEY.METATRON_REFRESH_TOKEN); const type = this.cookieService.get(CookieConstant.KEY.METATRON_TOKEN_TYPE); const userId = this.cookieService.get(CookieConstant.KEY.USER_ID); let existForm = document.getElementsByName(formName)[ 0 ]; if (existForm) { existForm.remove(); } let form = document.createElement('form'); form.setAttribute('name', formName); form.setAttribute('method', 'post'); form.setAttribute('action', `https://discovery.www.metatron.app/api/sso?token=${token}&refreshToken=${refreshToken}&type=${type}&userId=${userId}&forwardUrl=${returnUrl}`); form.setAttribute('target', target); document.getElementsByTagName('body')[ 0 ].appendChild(form); window.open('', target); form.submit(); }
4. It’s finished!
Above process allows you to embed a dashboard or chart as shown below image