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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Embed dashboard from Dashboard Server using Server API

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:

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 = "";

$(document).ready(function(){

      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 =””;

       apiRequest.decryptionkey=””

       $.ajax({

       type:"POST",

        async:false,

         url:  baseurl  + "/api/get-user-key",  // Specify the Dashboard Server URL

         data:apiRequest,

         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;

  }

 

Note:

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

 

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

 

   $.ajax({

      type:"GET",

        async:false,

         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

 

api/v2.0/dashboards

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

    $.ajax({

        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.

http://dashboardsdk.syncfusion.com/sample/Embedding/Dashboard/Dashboard%20Server/API%202

api/v2.0/items

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();

    $.ajax({

        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

                        $("#dashboard").ejDashboardViewer({

                            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.

http://dashboardsdk.syncfusion.com/sample/Embedding/Dashboard/Dashboard%20Server/API%201/

 

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
9042 07/30/2018 09/19/2018 Dashboard Platform Dashboard SDK
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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