Skip to main content
BuyLog In
Business Intelligence Dashboard
Search in…
Docs > Web Dashboard > Integrate the Dashboard Component into a Web App > Dashboard Control for JavaScript Applications (JQuery, Knockout, etc.) > Required Client Libraries
All docs
V24.1
Business Intelligence Dashboard
Get Started
.NET Support
Basic Concepts and Terminology
Common Features
WinForms Dashboard
Web Dashboard
Prerequisites
Concepts and Terminology
Integrate the Dashboard Component into a Web App
ASP.NET Core Dashboard Control
ASP.NET MVC Dashboard Extension
ASP.NET Web Forms Dashboard Control
Dashboard Component for Blazor
Dashboard Component for Angular
Dashboard Component for React
Dashboard Component for Vue
Dashboard Control for JavaScript Applications (JQuery, Knockout, etc.)
Required Client Libraries
Add Web Dashboard to a JavaScript Application
Client-Side API Overview
Designer and Viewer Modes
Manage Dashboard State
Obtain Underlying and Displayed Data
Manage Data Inspector
Manage Extensions
Mobile Layout
Themes and Styles
Upgrade to a New Package Version
Localization
Content Security Policy (CSP)
Dashboard Backend
Create Dashboards on the Web
UI Elements and Customization
Advanced Customization
WPF Dashboard Viewer
Visual Studio Integration
Redistribution and Deployment
Video Tutorials
Migration Guides
Examples
End-User Documentation
.NET Framework API Reference
.NET API Reference
HTML JS Control API Reference
ASP.NET Client API Reference
Download CHM

Required Client Libraries for JavaScript Applications

  • 2 minutes to read

This topic contains the list of required libraries and instructions on how to integrate them into the project.

Required Libraries

Web Dashboard requires the following libraries to work correctly:

Optional Libraries

The following libraries are optional

Integration

Add the following scripts and stylesheets:

  • The ThirdParty and DevExtreme scripts.
  • The DevExpress Analytics Components that is a core library for Dashboards and Reporting.
  • The dx-dashboard script that is the JavaScript dashboard control.

  1. Install the npm packages:

    • devexpress-dashboard
    • @devexpress/analytics-core

  2. Attach the resources to the <head> section of a page where the Web Dashboard is rendered:

    <head>
<!-- ... -->
    <link href="/node_modules/ace-builds/css/ace.css" rel="stylesheet" />
    <link href="/node_modules/ace-builds/css/theme/dreamweaver.css"  rel="stylesheet" />
    <link href="/node_modules/ace-builds/css/theme/ambiance.css"  rel="stylesheet" />
    <link href="node_modules/devextreme-dist/css/dx.light.css" rel="stylesheet" />

    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css" rel="stylesheet" />
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css" rel="stylesheet" />
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css" rel="stylesheet" />

    <link href="node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css" rel="stylesheet" />

    <script src="node_modules/jquery/dist/jquery.js"></script>

    <script src="node_modules/knockout/build/output/knockout-latest.js"></script>

    <script src="node_modules/ace-builds/src-min-noconflict/ace.js"></script>
    <script src="node_modules/ace-builds/src-min-noconflict/ext-language_tools.js"></script>
    <script src="node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js"></script>
    <script src="node_modules/ace-builds/src-min-noconflict/theme-ambiance.js"></script>

    <script src="node_modules/devextreme-dist/js/dx.all.js"></script>

    <script src="node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js"></script>
    <script src="node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js"></script>

    <script src="node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"></script>
    <!-- ... -->
</head>

    Web Dashboard comes with an icon library that provides font icons for all DevExtreme themes. The icons should be in the same folder as the DevExtreme CSS files.

    • For npm, the icons folder is node_modules/devextreme-dist/css/icons.
    • For manual scripts integration, copy the icons folder from C:\Program Files\DevExpress 24.1\Components\Sources\DevExpress.Web.Resources\Css\DevExtreme and place it to the directory that contains the DevExtreme CSS files.

Tip

Documentation: Add Web Dashboard to a JavaScript Application

See Also