Html JavaScript Web Dashboard Application
The following application demonstrates the DevExpress HTML JavaScript Web Dashboard. The JavaScript client side is hosted on the GitHub Pages, while the ASP.NET MVC / Web API server side - on DevExpress.com.
See in action:
https://devexpress.github.io/web-dashboard-demo/
Benefits of This Approach
The Web Dashboard can now be easily rendered on the client-side, while having data fed to it by an ASP.NET MVC / Web API back-end. This means you can:
- Integrate a dashboard into any place that supports HTTP requests (e.g., see the GitHub Pages Demo).
- Publish Web Dashboard as a part of applications based on Angular, Knockout, Vue and similar frameworks.
- Use the Dashboard side-by-side with DevExtreme client-side widgets to create highly responsive web apps.
Server-Side Configuration
The server-side of this project is hosted on the DevExpress.com. See the Getting Started section of the DevExpress Dashboard Documentation to learn how to create the Web Dashboard application:
Client-Side Configuration
The index.html file contains the client-side configuration and consists of the following main parts:
- The attached stylesheet and scripts inside the
<head>section:
<head>
<!-- ... -->
<link href="styles/dx.dashboard-control.bundle.light.css" rel="stylesheet" />
<script src="scripts/dx.dashboard-control.third-party.min.js"></script>
<script src="scripts/dx.dashboard-control.bundle.min.js"></script>
</head>- A
<div>element with the specified Web Dashboard ID and position inside the<body>section. The control is rendered inside this div element.
<body>
<div id="container" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0">
</div>
</body>- A script inside the
<head>section. The script contains the Web Dashboard control settings.
<head>
<!-- ...-->
<script>
window.onload = function () {
// ...
// Adds required HTML resources to the DOM:
DevExpress.Dashboard.ResourceManager.embedBundledResources();
// Creates a new Web Dashboard control with the specified ID and settings:
var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("container"), {
// Configures an URL where the Web Dashboard's server-side is hosted:
endpoint: "https://demos.devexpress.com/services/dashboard/api",
workingMode: "Viewer",
extensions: {
"dashboard-panel": (control) => new DevExpress.Dashboard.DashboardPanelExtension(control)
}
});
// Renders the created dashboard.
dashboardControl.render();
};
</script>
</head>To get more details about the Web Dashboard server-side and client-side configuration, refer to HTML JavaScript Dashboard Control.
License
These files are distributed under the MIT license (free and open-source), but can only be used with a commercial DevExpress Dashboard software product. You can review the license terms or download a free trial version of the Dashboard suite at DevExpress.com.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent