Introduction
The ChartJs 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://www.ChartJs.org/
This plugin source code is available in JogetOSS repository at https://github.com/jogetoss/chartjs-menu/tree/main.
JogetOSS is a community-led team for open source software related to the Joget no-code/low-code application platform. Projects under JogetOSS are community-driven and community-supported, and you are welcome to contribute to the projects.
Figure 1: Multiple Chartjs userview menus displayed in a dashboard
ChartJs Menu Properties
Figure 2: ChartJs Properties
Configure ChartJs 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 Type | Available chart types:
|
| Chart Dataset |
|
| Show Tabular Data | Show tabular data at the configured position.
|
| Show Export Links | This option is visible when "Show Tabular Data" is visible. Show or hide the export links located below the tabular data.
|
| Show Filters | Show or hide the filters on the top right of the chart. The filters are defined in the datalist chosen.
|
Data Mappings
Area Chart, Bar Chart, Pie Chart, Line Chart, Donut Chart, Polar Area Chart, Radar Chart, Bubble Chart, Scatter Chart
| 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 |
|
Chart Options
Area Chart
| Name | Description |
|---|---|
| X-axis Label | Label for the X-axis. |
| Y-axis Label | Label for the Y-axis. |
| Show Legend | If checked, chart legend will be shown. |
| Opaque Chart | If Checked chart will show opaque color. |
| If Checked CSV and Pdf downloads will be enabled | |
| Width | Maximum Width of chart. |
| Height | Minimum Height of chart. |
Figure 3: Area Chart
Bar Chart, Bubble Chart
| Name | Description |
|---|---|
| X-axis Label | Label for the X-axis. |
| Y-axis Label | Label for the Y-axis. |
| Show Legend | If checked, chart legend will be shown. |
| Disable Tool Tip | If checked tooltip will be disabled |
| Opaque Chart | If Checked chart will show opaque color. |
| If Checked CSV and Pdf downloads will be enabled | |
| Width | Maximum Width of chart. |
| Height | Minimum Height of chart. |
Figure 4: Bar Chart
Line Chart
| Name | Description |
|---|---|
| X-axis Label | Label for the X-axis. |
| Y-axis Label | Label for the Y-axis. |
| Show Legend | If checked, chart legend will be shown. |
| Disable Tool Tip | If checked tooltip will be disabled |
| Enable Animation | If Checked animation will be enabled. |
| If Checked CSV and Pdf downloads will be enabled | |
| Width | Maximum Width of chart. |
| Height | Minimum Height of chart. |
Figure 5: Line Chart
Donut Chart, Pie Chart, Polar Area Chart, Radar Chart
| Name | Description |
|---|---|
| Show Legend | If checked, chart legend will be shown. |
| Disable Tool Tip | If checked tooltip will be disabled |
| Opaque Chart | If Checked chart will show opaque color. |
| If Checked CSV and Pdf downloads will be enabled | |
| Width | Maximum Width of chart. |
| Height | Minimum Height of chart. |
Figure 6: Bar Chart
Figure 7: Pie Chart
Figure 8: Polar Area Chart
Figure 9: Radar Chart
Scatter Chart
| Name | Description |
|---|---|
| X-axis Label | Label for the X-axis. |
| Y-axis Label | Label for the Y-axis. |
| Show Legend | If checked, chart legend will be shown. |
| Disable Tool Tip | If checked tooltip will be disabled |
| If Checked CSV and Pdf downloads will be enabled | |
| Width | Maximum Width of chart. |
| Height | Minimum Height of chart. |
Figure 10: Radar Chart
Advanced
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.
Download Sample App
APP_kb_dx8_Chartjs.jwa