Current filter:
                                You should refresh the page.
                                  • UPDATED: Starting with v.17.2.3, refer to the following documentation: Create an HTML5 JavaScript Designer

                                    With v.17.1.5 we are introducing a new way to launch the Web Dashboard control on the client side. This approach allows you to create Web Dashboard using JavaScript client side and ASP.NET MVC / Web API server side.

                                    Download the completed project: How to create the HTML5 JavaScript Web Dashboard application (Runtime sample)
                                    See demo: https://devexpress.github.io/web-dashboard-demo/
                                    Demo source code: https://github.com/DevExpress/web-dashboard-demo
                                    Documentation: HTML5 JavaScript Dashboard Control

                                    Follow the steps below to create an application with Web Dashboard using this approach:

                                      Server-Side Configuration

                                    1. Create ASP.NET Web Application, select the Empty template and enable the MVC check box to add folders and core references for MVC.

                                    2. Add the following references to the project:
                                    - DevExpress.Dashboard.v17.2.Core
                                    - DevExpress.Dashboard.v17.2.Web
                                    - DevExpress.Dashboard.v17.2.Web.Mvc5

                                    3.  Go to the Global.asax file and map the specified URL route for the dashboard data service:

                                    [C#]
                                    using DevExpress.DashboardWeb; using DevExpress.DashboardWeb.Mvc; protected void Application_Start() { // ... RouteTable.Routes.MapDashboardRoute("api/dashboard"); }

                                    4.  Create the App_Data/Dashboards folder in your project. Then add the following code to the Global.asax file to allocate dashboard storage used to keep dashboards:

                                    [C#]
                                    protected void Application_Start() { // ... DashboardConfigurator.Default.SetDashboardStorage(new DashboardFileStorage("~/App_Data/Dashboards")); }

                                    5. Add the nwind.mdb database to the project's App_Data folder. By default, this database is stored in the following path:C:\Users\Public\Documents\DevExpress Demos 17.2\Components\Data\nwind.mdb

                                    6. Provide predefined data connections for the Web Dashboard. Go to the project's Web.config file and add connection strings specifying a valid connection to the required database. The code sample below shows two connections. The nwindConnection string connects to the nwind.mdb database; the olapDataConnection connects to an online OLAP cube.

                                    [XML]
                                    <configuration> <connectionStrings> <add name="nwindDBConnection" connectionString=" XpoProvider=MSAccess; Provider=Microsoft.Jet.OLEDB.4.0; Data Source=|DataDirectory|\nwind.mdb;" /> <add name="olapDataConnection" connectionString="Provider=MSOLAP;Data Source=https://demos.devexpress.com/Services/OLAP/msmdpump.dll; Initial catalog=Adventure Works DW Standard Edition;Cube name=Adventure Works;Query Timeout=100;" /> </connectionStrings> <!-- ... --> </configuration>

                                      Client-Side Configuration

                                    7.  Right click the project and select Add | HTML Page to create a page that contains the Web Dashboard. Specify Index  as a page name. Right-click the created Index.html fileand set it as the start page.

                                    8.  Download the bundles.zip archive from the attachment. The archive includes scripts, icons, and a stylesheet (required for the Web Dashboard control). In the project create the Content folder and add the archive content to it.

                                    9.  Open the created Index.html file and attach the downloaded stylesheet and scripts to the project inside the <head> section in the following order:

                                    [HTML]
                                    <head> <!-- ... --> <link href="/Content/dx.dashboard-control.bundle.css" rel="stylesheet" /> <script src="/Content/dx.dashboard-control.third-party.min.js"></script> <script src="/Content/dx.dashboard-control.bundle.min.js"></script> </head>

                                    10. Place a <div> element with the specified Web Dashboard ID and position inside the <body> section to add Web Dashboard to the page.

                                    [HTML]
                                    <body> <div id="web-dashboard" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0"> </div> </body>

                                    11. In the same file create a script that launches the Web Dashboard control on the client side. In this script, we need to embed bundled resources, pass the Web Dashboard ID (step 9) and set an endpoint (step 3). After that call the method that renders the Web Dashboard.

                                    [HTML]
                                    <head> <!-- ...--> <script> window.onload = function () { // Adds required HTML resources to the DOM. DevExpress.Dashboard.ResourceManager.embedBundledResources(); // Creates a new Web Dashboard control with specified settings. var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), { // Configures an URL where the Web Dashboard's server-side is hosted. endpoint: "/api/dashboard" }); // Renders the created dashboard. dashboardControl.render(); }; </script> </head>

                                    12. Launch the project to see a Web Dashboard application you can use to create dashboards.

                                      See Also
                                    T540056: How to create the HTML5 JavaScript Web Dashboard application (example)
                                    T543243: How to customize the client side of the HTML5 JavaScript Web Dashboard application

                                Show all comments
                                • Scott Gross 08.09.2017

                                  Would it be possible to use WebForms instead of MVC for this HTML5 app?

                                  see my other ticket: https://www.devexpress.com/Support/Center/Question/Details/T543817/xaf-mobile-possibility-to-use-the-example-for-html5-webdashboard

                                • Constant (DevExpress Support) 08.10.2017

                                  Thank you for your request. I am afraid at present we do not provide a way to use the client-side dashboard control in the XAF Mobile application. It is not enough to support the WebForms server-side application to accomplish this task. It is also necessary to integrate this application into XAF Mobile. I have already informed our developers about your request, however, this is a rather complex task and I cannot promise that this functionality will be implemented in the near future.

                                • CDIS Informática 08.11.2017

                                  Would it be possible to create a Dashboard application with Angular 2 on the client side and ASP .NET Core on the server side? 

                                • Constant (DevExpress Support) 08.14.2017

                                  Yes, it is possible to use this solution to integrate the client-side dashboard control in an Angular application.
                                  However, the server side control does not support the .NET Core framework at present. This functionality is still under consideration. Thus, I cannot promise that it will be supported soon or give you any time frame regarding its implementation.
                                  We will appreciate it if you describe how you would like to use dashboards in an ASP.NET Core application. We are interested in real-life scenarios that may help us better understand all potential user requirements for this product.

                                • CDIS Informática 08.14.2017

                                  We would like the possibility of hosting our application on a server that is not necessarily windows. 

                                • Sergi (DevExpress Support) 08.14.2017

                                  Thank you for your reply. I have passed your feedback to our developers.

                                • Alexandre Henzen 08.15.2017

                                  Would you please elaborate how to use it in a Angular4 application ?

                                  I can see the third-party js file contains jquery and jqueryui (already loaded in our app).

                                  Also, Can you please confirm if this solution will work with jquery 3.x ?

                                • Sergi (DevExpress Support) 08.15.2017

                                  Hello,

                                  I've created a separate ticket on your behalf (T545963: Web Dashboard - How to use Client-Side approach in Angular4 application). It has been placed in our processing queue and will be answered shortly.

                                • Customer45825 03.21.2019

                                  Hi,

                                  Can we do this with react?

                                • Sergi (DevExpress Support) 03.21.2019

                                  Hello,

                                  I've created a separate ticket on your behalf (T726005: How to use HTML JS Dashboard with React). It has been placed in our processing queue and will be answered shortly.

                                0 Solutions

                                Creation Date Importance Sort by