Introduction
The EChart Menu plugin is a new easy-to-use charting userview menu plugin for Joget DX, and can be considered as an alternative to the default bundled Chart Menu.
Just select any datalist in your app to display its records in several available graph types.
The additional benefits of using this plugin is the ability to reuse the datasource configuration & datalist filters in the selected datalist.
Also as a tip, you can also display multiple of these charts in a single page of a userview via Dashboard Menu.
Download this plugin from the Joget Marketplace here.
The JS library used: https://echarts.apache.org
EChart Menu Properties
Configure EChart Menu
| Name | Description |
|---|---|
| ID | Menu element unique ID. Userview will use this ID in the URL for the menu if Custom ID property is empty. |
| Custom ID | Item link slug. Optional field. Ensure that value defined here is unique to other userview menus in the app, since the first matching/conflicting ID will take precedence in page loading. |
| Label | Menu label. Mandatory field. |
| Chart Title | Chart Title to be displayed as part of the generated chart. |
| Chart Theme | Choose from a wide selections of color schemes for the chart. |
| Chart Type | Available chart types:
|
Data Mappings
Area Chart, Bar Chart, Line Chart, Donut Chart, Custom
| Name | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| List | Target Datalist to read records from. | ||||||||
| X-axis Value | Datalist column to represent the x-axis or categories of the chart. | ||||||||
| Number Values |
|
Pie Chart
| Name | Description |
|---|---|
| List | Target Datalist to read records from. |
| X-axis Value | Datalist column to represent the categories of the pie chart. |
| Number Value | Datalist column to represent the category values of the pie chart. |
| Series Customization | See chart configuration documentation here: https://echarts.apache.org/en/option.html#series-pie |
Chart Options
| Name | Description |
|---|---|
| Show Legend | |
| Show Value Label in Chart | |
| Show Tool Tip | |
| Width | Maximum Width of chart. |
| Height | Minimum Height of chart. |
Advanced
General
| Name | Description |
|---|---|
| Additional Customization | Sample grid : {
top: "55%"
},
tooltip : {
"trigger": "item",
"formatter": "{a} {b}: {c} ({d}%)"
}
|
Userview Key Data Filter
| Name | Description |
|---|---|
| Userview Key Name | When defined, the additional conditions will be appended using the value defined here as the parameter and the userview key value as the value. Example SQL: SELECT category, count(category) FROM table1 Userview Key Name: type Userview Key Value: val Resultant SQL: SELECT category, count(category) FROM table1 WHERE type = 'val' When userview key value is defined, you may define #userviewKey# in your SQL query to have it replaced with the userview key value. Example SQL: SELECT category, count(category) FROM table1 WHERE type = '#userviewKey#' Userview Key Value: val Resultant SQL: SELECT category, count(category) FROM table1 WHERE type = 'val' |
UI
| Name | Description |
|---|---|
| Custom Header | Custom Header in HTML. |
| Custom Footer | Custom Footer in HTML. |
Performance & Offline
Cache Settings
Name | Description |
|---|---|
| Scope | Caching options are:
|
| Duration (s) | Duration in seconds to cache content, defaults to 20 seconds if applicable. |
Read more at Performance Improvement with Userview Caching.
PWA Offline Settings
Note: PWA Offline support is dependent on the theme used.
Name | Description |
|---|---|
| Enable cache for offline support | Enable caching for offline support, usually set for use on mobile browsers. |
Read Progressive Web Application (PWA) for more information.