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.
<scriptsrc="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"
/> <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"
/> <scriptsrc="https://cdn.syncfusion.com/2.3.0.32/js/ej.dashboardViewer.all.min.js"
/> <linkhref="https://cdn.syncfusion.com/2.3.0.32/css/ej.widgets.core.min.css"rel="stylesheet"/> <linkhref="https://cdn.syncfusion.com/2.3.0.32/css/default-theme/ej.theme.min.css"rel="stylesheet"/> <linkhref="https://cdn.syncfusion.com/2.3.0.32/css/default-theme/ej.dashboardViewer.all.min.css"rel="stylesheet"/> <divid="dashboard"style="width: 100%; height: 100%;"></div> <scripttype="text/javascript"> $(document).ready(function () { $('#dashboard').ejDashboardViewer({ serviceUrl: "http://localhost:3002/DashboardService.svc", dashboardPath: "C:\\Users\\UserName\\Desktop\\Blogs\\Embed
Dashboard\\NorthwindOrderPlacementDashboard.sydx", }); }); </script> |
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.
<iframeid="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> <scriptsrc="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script> <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <scriptsrc="https://cdn.syncfusion.com/2.3.0.32/js/ej.dashboardViewer.all.min.js"></script> <linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/> <linkhref="https://cdn.syncfusion.com/2.3.0.32/css/ej.widgets.core.min.css"rel="stylesheet"/> <linkhref="https://cdn.syncfusion.com/2.3.0.32/css/default-theme/ej.theme.min.css"rel="stylesheet"/> <linkhref="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: 05%; border-bottom: 1pxsolid#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: 1pxsolid#b7b7b7; float: left; margin-top: 5px; } .first-section { padding: 10px270px0px; } .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> <divid="dashboard-head"> <imgsrc="images/dashboard_logo.png"class="dashboard-logo"/> <divid="dashboard-subtitle">It is demand that decides
product popularity!</div> </div> <divclass="first-section"> <pclass="title">Orders placed by countries</p> <pclass="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> <divid="dashboard"style="width: 100%; height: 100%;"></div> <scripttype="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.