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.
