Embedding a Dashboard in a Webpage | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (203)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (65)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (81)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (897)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (39)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (501)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (381)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (323)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Embedding a Dashboard in a Webpage

Embedding a dashboard into an existing web application lets you monitor current data from a single page through interactive data visualizations, which is now possible with the Syncfusion Dashboard Platform. You can embed an existing dashboard into your webpage through JavaScript API or embedded code.

Using JavaScript API

If you have a dashboard file (*.sydx) available in a specific machine and need to showcase it in a webpage hosted on the same machine that has access to the file location, embed the dashboard in your web page with the JavaScript API of the Dashboard Viewer, which ships with the Syncfusion Dashboard Platform SDK, as seen in the following code sample.

<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"/>
<script src="https://cdn.syncfusion.com/2.3.0.32/js/ej.dashboardViewer.all.min.js"/> 
<link href="https://cdn.syncfusion.com/2.3.0.32/css/ej.widgets.core.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/2.3.0.32/css/default-theme/ej.theme.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/2.3.0.32/css/default-theme/ej.dashboardViewer.all.min.css" rel="stylesheet" />
<div id="dashboard" style="width: 100%; height: 100%;"></div> 
<script type="text/javascript">
    $(document).ready(function () {
        $('#dashboard').ejDashboardViewer({
           serviceUrl: http://localhost:3002/DashboardService.svc,
           dashboardPath: "C:\\Users\\UserName\\Desktop\\Blogs\\EmbedDashboard\\NorthwindOrderPlacementDashboard.sydx",
        });
    });
</script>

For this to run, ensure the that the dashboard service is hosted in IIS and is accessible to the dashboard for data fetching from the connected data source.

Using Embedded Code

If the dashboard is hosted either directly or published from the Dashboard Designer to the Dashboard Server on a remote machine, to make it publicly accessible through the webpage, enable public accessibility to the dashboard, and embed the dashboard in your web page using the embed code obtained from the dashboard server.

<iframe id=“frame-div” width=“100%” height=“100%” frameborder=“0” src=“http://localhost:50290/dashboards/embed/Sample%20Dashboards/NorthwindOrderPlacementDashboard?hascomments=true&hasviews=true&hassso=false” />

Here is a simple demonstration of a webpage displaying Northwind orders with a dashboard created and embedded through the JavaScript API.

<html>
<head>
   
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
   
<script src="https://cdn.syncfusion.com/2.3.0.32/js/ej.dashboardViewer.all.min.js"></script>
   
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
   
<link href="https://cdn.syncfusion.com/2.3.0.32/css/ej.widgets.core.min.css" rel="stylesheet" />
   
<link href="https://cdn.syncfusion.com/2.3.0.32/css/default-theme/ej.theme.min.css" rel="stylesheet" />
   
<link href="https://cdn.syncfusion.com/2.3.0.32/css/default-theme/ej.dashboardViewer.all.min.css" rel="stylesheet" />
   
<style>
       
body, html {
           
height: 100%;
           
overflow: auto !important;
       
}
       
.e-dbrd-banner {
           
height: 0px !important;
           
visibility: collapse !important;
       
}
       
#dashboard-head {
           
height: 55px;
           
padding: 0 5%;
           
border-bottom: 1px solid #B3B3B3;
       
}
       
#dashboard-head .dashboard-logo {
           
width: 225px;
           
height: 50px;
           
float: left;
       
}
       
#dashboard-head #dashboard-subtitle {
           
padding: 14px;
           
text-transform: uppercase;
           
font-size: 14px;
           
border-left: 1px solid #b7b7b7;
           
float: left;
          
 margin-top: 5px;
       
}
       
.first-section {
           
padding: 10px 270px 0px;
       
}
       
.first-section .title {
           
text-align: center;
           
font-size: 14px;
           
margin-bottom: 10px;
           
font-weight: bold;
       
}
       
.first-section .content {
           
font-size: 14px;
           
margin-bottom: 15px;
           
text-align: center;
       
}
   
</style>
</head>
<body>
   
<div id="dashboard-head">
       
<img src="images/dashboard_logo.png" class="dashboard-logo" />
       
<div id="dashboard-subtitle">It is demand that decides product popularity!</div>
   
</div>
   
<div class="first-section">
       
<p class="title">Orders
placed by Countries</p>
       
<p class="content">With
the growing demands of consumers, the product serving maximum needs gains huge
attention. With Northwind products, this can be revealed by the number of
orders placed across the countries.</p>
   
</div>
   
<div id="dashboard" style="width: 100%; height:
100%;"></div>
   
<script type="text/javascript">
       
$(document).ready(function () {
           
$('#dashboard').ejDashboardViewer({
               
serviceUrl: http://localhost:3002/DashboardService.svc,
               
dashboardPath: "C:\\Users\\UserName\\Desktop\\Blogs\\Embed
Dashboard\\NorthwindOrderPlacementDashboard.sydx",
           
});
       
});
   
</script>
</body>
</html>

The webpage will render like this.

The dashboard is interactive. In the following screenshot, notice the filtered view—United States is selected in the Countries combo box.

 

Although the Dashboard Server itself provides a web interface for managing and sharing the dashboards you create, by embedding a dashboard within your own application, you can create a single location for your users to access all the data visualizations pertinent to your organization’s daily business.

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed