Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/stimulsoft/samples-dashboards.js-for-vue.js

JavaScript samples for Dashboards.JS data analysis tool for Vue.js applications
https://github.com/stimulsoft/samples-dashboards.js-for-vue.js

analysis analytics dashboard data-cache data-parsing embedded exporting grouping html-viewer javascript package pdf-document sorting themes transformation vue vue-components vue-dashboard vue3 vuejs

Last synced: about 2 months ago
JSON representation

JavaScript samples for Dashboards.JS data analysis tool for Vue.js applications

Awesome Lists containing this project

README 

        
# Vue.js samples for Stimulsoft Dashboards.JS



#### This repository contains the source code of the examples of usage Stimulsoft Dashboards.JS embedded data analysis tool in the Vue applications, using JavaScript code and Vue components. The dashboard builder and examples are fully compatible with any Vue.js version.



## Overview

A set of examples for working with dashboard components in Vue.js:



#### Localization and Globalization

* [Localizing the Designer](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Localization%20and%20Globalization/Localizing%20the%20Designer.vue)

* [Localizing the Viewer](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Localization%20and%20Globalization/Localizing%20the%20Viewer.vue)

* [Globalizing Dashboard](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Localization%20and%20Globalization/Globalizing%20Dashboard.vue)



#### Fonts and Resources

* [Using a Custom Font](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Fonts%20and%20Resources/Using%20a%20Custom%20Font.vue)

* [Adding a Font to the Resource](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Fonts%20and%20Resources/Adding%20a%20Font%20to%20the%20Resource.vue)



#### Printing and Exporting

* [Printing a Dashboard from Code](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Printing%20and%20Exporting/Printing%20the%20Dashboard%20from%20Code.vue)

* [Exporting a Dashboard to PDF](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Printing%20and%20Exporting/Exporting%20a%20Dashboard%20to%20PDF.vue)

* [Exporting a Dashboard to HTML](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Printing%20and%20Exporting/Exporting%20a%20Dashboard%20to%20HTML.vue)

* [Exporting a Dashboard from Code with Changing Export Settings](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Printing%20and%20Exporting/Exporting%20a%20Dashboard%20from%20Code%20with%20Changing%20Export%20Settings.vue)



#### Data Connection and Registration

* [Creating a new Data Connection from code](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Creating%20a%20new%20Data%20Connection%20from%20code.vue)

* [Registering Data from Code](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Registering%20Data%20from%20Code.vue)

* [Using SQL Data Sources](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Using%20SQL%20Data%20Sources.vue)

* [Using Parameters in SQL Query](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Using%20Parameters%20in%20SQL%20Query.vue)

* [Using a Custom Data Adapter](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Using%20a%20Custom%20Data%20Adapter.vue)

* [Supply Custom Headers for JSON Database](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Supply%20Custom%20Headers%20for%20JSON%20Database.vue)



#### Working with Viewer Settings and Events

* [Customizing the Designer](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Customizing%20the%20Designer.vue)

* [Changing the Designer Theme](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Changing%20the%20Designer%20Theme.vue)

* [Customizing the Viewer](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Customizing%20the%20Viewer.vue) 

* [Changing the Viewer Theme](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Changing%20the%20Viewer%20Theme.vue)

* [Using Designer Events](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Using%20Designer%20Events.vue)

* [Using Viewer Events](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Using%20Viewer%20Events.vue)

* [Working with onDesign and onExit Events](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Working%20with%20onDesign%20and%20onExit%20Events.vue)

* [Using the two Viewer in the One Project](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Using%20the%20two%20Viewer%20in%20the%20One%20Project.vue)

* [Get a modified Dashboard from the Designer](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Get%20a%20modified%20Dashboard%20from%20the%20Designer.vue)

* [Using the Right-To-Left Mode in the Viewer](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Using%20the%20Right-To-Left%20Mode%20in%20the%20Viewer.vue)



#### Working with Dashboards and Advanced Features

* [How to Activate the Product](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Dashboards%20and%20Advanced%20Features/How%20to%20Activate%20the%20Product.vue)

* [Using Dashboard Variables in Code](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Dashboards%20and%20Advanced%20Features/Using%20Dashboard%20Variables%20in%20Code.vue)

* [Creating Dashboard at Runtime](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js/blob/main/src/Working%20with%20Dashboards%20and%20Advanced%20Features/Creating%20Dashboard%20at%20Runtime.vue)



## Running samples

To run the examples, open the required folder with the example and run the following commands in the console:

* use `npm install` to install requred modules;

* use `npm run dev` to run sample;

* navigate to http://localhost:5173/ for Vue.js samples.



## Connect to SQL databases

Since pure JavaScript does not have built-in methods for working with remote databases, this functionality is implemented using server-side code. Therefore, Stimulsoft Dashboards.JS product contains server data adapters implemented using PHP, Node.js, ASP.NET, Java, .NET Core technologies.

* [DataAdapters.JS](https://github.com/stimulsoft/DataAdapters.JS)



## Other JS dashboard components

Many examples for other platforms and technologies are collected in separate repositories:

* [HTML / JS](https://github.com/stimulsoft/Samples-Dashboards.JS-for-HTML)

* [Angular / AngularJS](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Angular)

* [Node.js](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Node.js)

* [React](https://github.com/stimulsoft/Samples-Dashboards.JS-for-Vue.js)



## About Stimulsoft Dashboards.JS

Stimulsoft Dashboards.JS is a robust dashboard development tool designed for JavaScript-based applications. This product offers a powerful engine for data processing and visualization, along with an intuitive dashboard designer and an interactive viewer to review finalized documents. Dashboards.JS is compatible with any HTML5 and JavaScript supported web browser, making it suitable for creating dashboards. Furthermore, it easily integrates with React, Vue.js, Node.js apps and projects, and can be utilized both on the client-side and the server-side.



## Useful links

* [Live Demo](http://demo.stimulsoft.com/#Js)

* [Product Page](https://www.stimulsoft.com/en/products/dashboards-js)

* [Free Download](https://www.stimulsoft.com/en/downloads)

* [NPM](https://www.npmjs.com/package/stimulsoft-dashboards-js)

* [Documentation](https://www.stimulsoft.com/en/documentation/online/programming-manual/index.html?reports_js.htm)

* [License](LICENSE.md)