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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to embed the Syncfusion Dashboard Viewer in iframe tag?

Embedded Dashboard Viewer in IFrame

 

How to embed the Syncfusion Dashboard Viewer in iframe tag:

Syncfusion Dashboard Viewer can be rendered in a HTML page locally through the following procedure:

#1 Create a new document and save it as .html extension.

#2 After installing Dashboard Platform SDK setup, You can find the scripts, themes, font folders in the below location.

%localappdata%\Syncfusion\Dashboard\Samples\Common\Html

Include these scripts, themes, font folders in your application and refer the files of each folder in the HTML page as mentioned below:

<head>

<script src="scripts/jquery-1.10.2.min.js"></script>

<script src="scripts/jquery.easing.1.3.min.js"></script>

 <script src="scripts/ej.dashboardViewer.all.min.js"></script>

<link href="themes/bootstrap.min.css" rel="stylesheet" />

<link href="themes/default-theme/ej.dashboardViewer.all.min.css" rel="stylesheet" />

<link href="themes/ej.widgets.core.min.css" rel="stylesheet" />

<link href="themes/default-theme/ej.theme.min.css" rel="stylesheet" />

</head>

 

#3 Create a div for the Dashboard Viewer and add the following script code

Initialize Dashboard Viewer control inside div element using ej-dashboardviewer ; Add the hosted Dashboard Service URL and the Dashboard file (*.SYDX) path to the Dashboard Viewer like below:

$('#dashboard').ejDashboardViewer({

 serviceUrl: " http://dashboardsdkdemo.syncfusion.com/DashboardService/DashboardService.svc",

 dashboardPath: "http://dashboardsdkdemo.syncfusion.com//Dashboards//WorldWideCarSalesDashboard.sydx",

 });

 

#4 Hosting Dashboard Service and Adding Dashboard file path

To host the Dashboard Service in IIS or IISExpress, please run the SyncfusionDashboardServiceInstaller-IIS.exe or SyncfusionDashboardServiceInstaller-IISExpress.exe respectively from the following location. If you choose IIS then enter the port number in which dashboard service to be hosted.

%localappdata%\Syncfusion\Dashboard\Samples\Common\DashboardServiceInstaller

For Example:

If you are hosting Dashboard Service at port #607 in localhost, then Dashboard Service URL will be framed as below and it can be passed to serviceUrl of Dashboard Viewer:

http://localhost:607/DashboardService.svc

 

Dashboard path can be a local Dashboard (SYDX) or Dashboard Widget (SYDW) file location or remote link, which is accessible at Dashboard Service. For example,

http://dashboardsdkdemo.syncfusion.com//Dashboards//WorldWideCarSalesDashboard.sydx

or

D:\\Syncfusion\\ Dashboards\\WorldWideCarSalesDashboard.sydx

 

 

Dashboard Viewer Sample HTML structure will be:

<html>

<style>

body, html {

height: 100%;

overflow: auto !important;}

</style>

<head>

<script src="scripts/jquery-1.10.2.min.js"></script>

<script src="scripts/jquery.easing.1.3.min.js"></script>

<script src="scripts/ej.dashboardViewer.all.min.js"></script>

<link href="themes/bootstrap.min.css" rel="stylesheet" />

<link href="themes/default-theme/ej.dashboardViewer.all.min.css" rel="stylesheet" />

<link href="themes/ej.widgets.core.min.css" rel="stylesheet" />

<link href="themes/default-theme/ej.theme.min.css" rel="stylesheet" />

</head>

<body>

  <div id="dashboard" style="width: 100%; height: 100%;" ></div>

   <script type="text/javascript">

    $(document).ready(function () {

    $('#dashboard').ejDashboardViewer({

 serviceUrl: " http://dashboardsdkdemo.syncfusion.com/DashboardService/DashboardService.svc",

 dashboardPath: "http://dashboardsdkdemo.syncfusion.com//Dashboards//WorldWideCarSalesDashboard.sydx",

 });

  });

  </script>

</body>

</html>

 

#5 To render the above HTML file, use ‘src attribute of iframe tag.

For example,

<iframe id="viewerFrame" frameborder="0" tabindex="1" style="width: 100%; height: 90%;display:block; position: absolute;" src= "file:///E:/Dashboard/DashboardViewer.html">

 </iframe>

 

#6 Finally render Dashboard within iframe. For example,

<html>

<style>

body, html {

height: 100%;

overflow: auto !important;}

</style>

 

<head>

<script src="scripts/jquery-1.10.2.min.js"></script>

</head>

  <body>

    <div style="width: 100%; height: 10%">

    <p> Click here to see the dashboard loaded inside the iframe. </p>

    <button id = "IFrameButton">Load</button>

    </div>

    <iframe id="viewerFrame" frameborder="0" tabindex="1" style="width: 100%; height: 90%;display:block; position: absolute;" src= "file:///E:/Dashboard/DashboardViewer.html">

    </iframe>

 

                   <script type="text/javascript">

        $(document).ready(function () {

            $("#IFrameButton").click(function () {

                $("#viewerFrame").attr({"src": "file:///E:/Dashboard/DashboardViewer.html"});

                });

            });

       </script>

 

</body>               

 

</html>

 

Note: The published Dashboard (either in Dashboard Server or Dashboard SDK) can be rendered in iframe by mention the URL for ‘src’ attribute of iframe tag.

For example,

<iframe id=”viewerFrame" frameborder="0" tabindex="1" style="width: 100%; height: 90%;display:block; position: absolute;" src= "https://dashboardserver.syncfusion.com/en-us/dashboards/view/Sample%20Dashboards/Northwind%20Products%20and%20Suppliers%20Dashboard">

 </iframe>

 

Or

<iframe id="viewerFrame" frameborder="0" tabindex="1" style="width: 100%; height: 90%;display:block; position: absolute;" src= "http://dashboardsdkdemo.syncfusion.com/">

 </iframe>

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7636 04/05/2017 04/10/2017 Dashboard Platform Dashboard SDK
Tags:
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