Introduction
The EChart Menu plugin is 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.
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
| Name | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| List | |||||||||
| X-axis Value | |||||||||
| Number Value (Pie) | |||||||||
| Series Customization (Pie) | |||||||||
| Number Values |
|
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.