Let's embed a Dashboard or Chart in another application

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

Let’s embed a Dashboard or Chart in another application