Let’s embed a Dashboard or Chart in another application

Let’s embed a Dashboard or Chart in another application

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.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.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.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.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

Was this post helpful?

Leave a Reply

Your email address will not be published. Required fields are marked *