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
| 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. | Info |
|---|
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: - Area Chart
- Bar Chart
- Line Chart
- Donut Chart
- Pie Chart
- Custom
| Tip |
|---|
| With the Custom option, you can define multiple charts and chart types in a single page to represent different sets or interpretations from the same datasource. Additional configurations required to define chart type(s) for each of the number value(s). See Data Mappings below. |
|
| Name | Description |
|---|
| List | Target Datalist to read records from. |
| X-axis Value | Datalist column to represent the x-axis of the chart. |
| Number Values | |
| 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 |
| Name | Description |
|---|
| Show Legend |
|
| Show Value Label in Chart |
|
| Show Tool Tip |
|
| Width | Maximum Width of chart. |
| Height | Minimum Height of chart. |
| Name | Description |
|---|
| Additional Customization | | Code Block |
|---|
| language | js |
|---|
| title | Sample |
|---|
| linenumbers | true |
|---|
| grid : {
top: "55%"
},
tooltip : {
"trigger": "item",
"formatter": "{a} {b}: {c} ({d}%)"
} |
|
| 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. | Info |
|---|
| 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. | Info |
|---|
| 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' |
|
| Name | Description |
|---|
| Custom Header | Custom Header in HTML. |
| Custom Footer | Custom Footer in HTML. |
Name | Description |
|---|
| Scope | Caching options are: - None: No caching.
- Application: Cache content by application where all users will see the same content.
- User: Cache by username.
|
| Duration (s) | Duration in seconds to cache content, defaults to 20 seconds if applicable. |
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.
APP_echart_demo.jwa