Skip to main content
BuyLog In
Business Intelligence Dashboard
Search in…
Docs > Web Dashboard > Dashboard Control for JavaScript Applications (JQuery, Knockout, etc.) > Required Client Libraries
A newer version of this page is available. .
All docs
V20.2
Business Intelligence Dashboard
Get Started
Basic Concepts and Terminology
Common Features
WinForms Dashboard
Web Dashboard
General Information
Create Dashboards on the Web
ASP.NET Core Dashboard Control
ASP.NET MVC Dashboard Extension
ASP.NET Web Forms Dashboard Control
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
Themes and Styles
Upgrade to a New Package Version
Localization
Dashboard Backend
UI Elements and Customization
WPF Dashboard Viewer
Visual Studio Integration
Redistribution and Deployment
Video Tutorials
Migration Guides
Examples
End-User Documentation
.NET Framework API Reference
.NET Core API Reference
HTML JS Control API Reference
ASP.NET Client API Reference
Download CHM

Required Client Libraries

  • 2 minutes to read

The Web Dashboard uses the following client libraries:

Required Libraries

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
    • jquery-ui-dist

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

    <head>
    <!-- ... -->
    <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/jquery-ui-dist/jquery-ui.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 (x86)\DevExpress 20.2\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