We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Embed dashboard from Dashboard Server using Server API

Platform: Dashboard Platform |
Control: Dashboard SDK |
Published Date: July 30, 2018 |
Last Revised Date: May 8, 2019

Server Dashboards Embedding

Embed the Server Dashboards using the ejDashboardViewer component to provide an option for embedding the dashboards available in the Syncfusion Dashboard Server into the web application. To achieve this, follow the given steps:

Steps to Embed the Server Dashboards into web application

Step 1:

You can generate an Access Token in two ways:

  1. By passing user ID and password of the Dashboard Server.
  2. By passing validation key, decryption key, and dashboard server user ID.

The Access Token which is an encrypted string is used to authenticate the user while accessing the Server API.


Code snippet to generate the Access Token in C#

public static string GetTokenWithMachineKey()        {
            var itemRequest = new UserToken            {                UserId = "1", //taken from the context                DecryptionKey = "", //decryption key from the web.config                ValidationKey = “", //validation key from the web.config
            };            try            {                using (var proxy = new CustomWebClient())                {                    var ser = new DataContractJsonSerializer(typeof(UserToken));                    var mem = new MemoryStream();                    ser.WriteObject(mem, itemRequest);                    var data = Encoding.UTF8.GetString(mem.ToArray(), 0, (int)mem.Length);                    proxy.Headers["Content-type"] = "application/json";                    proxy.Encoding = Encoding.UTF8;                    var rdata =                        proxy.UploadString(                            new Uri(                                SyncfusionDashboardServerUrl +                                "/api/get-user-key"),                            "POST", data);
                    var result = JsonConvert.DeserializeObject<ApiServiceResponse>(rdata);                    if (!result.Status)                    {                        throw new ServerException(result.Message);                    }                    var definition = new { access_token = "", token_type = "", expires_in = "", userName = "", error = "", error_description = "", LoginResult = "", LoginStatusInfo = "" };                    var anonymousType = JsonConvert.DeserializeAnonymousType(result.Token, definition);
                    return anonymousType.access_token;                }            }            catch (Exception ex)            {                throw new ServerException(ex.Message);            }        } 


Code snippet to generate the Access Token in JavaScript

<div id="dashboard" style="width: 100%; height: 100%">
<script type="text/javascript">
var render_token = "";
      var getToken = function(){
        var baseurl = “http://localhost:50290”; //specify here with the launched Dashboard Server site URL
       var privatetoken="";
       var tokentype = "Bearer "
       var dataValue =null;
       var apiRequest = new Object();
       apiRequest.password =" "; // Specify the Dashboard Server password and password is optional when passing decryption and validation key
       apiRequest.userid=""; // Specify the Dashboard Server username 
       apiRequest.validationkey =””;
         url:  baseurl  + "/api/get-user-key",  // Specify the Dashboard Server URL
         success: function(data){
              dataValue = data.Token;
              render_token = JSON.parse(dataValue).access_token;
              var token = JSON.parse(data.Token);
              var acesstoken = tokentype.concat(token.access_token);
              privatetoken= acesstoken;
  return privatetoken;


  • You can get the validation key and decryption form from the machine key node of the Dashboard Server web.config file available in the location C:\Syncfusion\Dashboard Server\DashboardServer.Web\


  • The decryption key and validation key of the application must be same as in the Dashboard Server web.config file



Step 2:

You can use the following code snippet to obtain the dashboard server’s service URL.

To embed the dashboard using ejDashboardViewer, the service URL is needed.

var serviceUrl = function () {
var token = getToken();  
var url = "";
        var baseurl = “http://localhost:50290”; //specify here with the launched Dashboard Server site URL
         url:  baseurl + "/api/v3.0/dashboards/serviceurl",
        beforeSend: function (xhr) {
          xhr.setRequestHeader('Authorization', token)
success: function(data){
  url = data;
return url;


Step 3:

You can retrieve the dashboard path by using any of the following two server API.

  1. api/v2.0/dashboards/location?serverPath
  2. api/v2.0/items?ItemType=Dashboard



To get the path of the dashboard using the api/v2.0/dashboards, use the following code snippet.

function getDashboardPath() {
    var dashboardPath = "";
        var baseurl = “http://localhost:50290”; //specify here with the launched Dashboard Server site URL
        type: "GET",
        async: false,
        url:  baseurl + "/api/v2.0/dashboards/location?serverPath=" + targetDashboard,   // targetDashboard refers the specified dashboard having the value dashboardName preceding with category name e.g., "Sample Dashboards/Telecom Dashboard"
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', token)
        success: function (data) {
            dashboardPath = data;
    return dashboardPath;


Refer to the sample shipped in the sample browser to embed the Server Dashboard in your application using the api/v2.0/dashboards.



To get the specified dashboard path by api/v2.0/items API, use the following code snippet.

 function getDashboardPath() {
    var dashboard = "";
    var DashboardPath = "";
    var baseurl = “http://localhost:50290”; //specify here with the launched Dashboard Server site URL
    var token =getToken(); // call the get Token method to get the Authentication Token
    var serviceurl = serviceUrl();
        type: "GET",
        url: baseurl + "/api/v2.0/items?ItemType=Dashboard",  // Specify the Dashboard Server URL
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', token)
        success: function (data) {
            dashboard = data;
            if (dashboard != "") {
                for (var i = 0; i < dashboard.length; i++) {
                    if(dashboard[i].Name ===  "Tickets Sold Analysis Dashboard"){  //Specify the Dashboard Name to be rendered
                        DashboardPath = dashboard[i].ItemLocation;
                        // Crete a Dashboard Viewer object with the Server’s Dashboard Path and Service URL
                            serviceUrl: serviceurl,
                            dashboardPath: DashboardPath,
                            accessToken: render_token,


Also, refer to the sample shipped in the sample browser to embed the Server Dashboard in your application using the api/v2.0/items.





You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon