ChartJs Userview Menu Plugin

Introduction

The ChartJs Menu plugin is a user-friendly charting menu plugin for Joget DX. It is an alternative to the default Chart Menu, allowing you to visualize data by selecting any list within your app and displaying its records through various graph types.

This plugin also provides additional benefits, such as reusing the data source configuration and list filters from the selected list. Additionally, you can display multiple charts on a single UI page using the Dashboard Menu.

• Download this plugin from the Joget Marketplace.
• The JS library used: ChartJs.
• The plugin's source code is available on the JogetOSS repository.

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.

Plugin information

The ChartJs Menu plugin integrates ChartJs capabilities directly into Joget, enabling the display of various chart types within userviews.

Get started

Where to get the plugin

You can download the ChartJs Menu plugin from the Joget Marketplace.

How to install

1. Download the plugin from the Marketplace.
2. Upload the plugin to your Joget environment through the Plugin Manager.
3. After uploading, you can select the ChartJs Menu from the list of available UI elements.

Configure chartJs menu properties

Fields to configure:

• ID: Unique ID for the menu element. The userview will use this ID in the URL if the Custom ID property is empty.
• Custom ID: Item link slug. Optional field.
  Ensure that the 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: Mandatory field for the menu label.
• Chart Title: The title that will be displayed on the chart.
• Chart Type: Select the desired chart type.
  
  • Area Chart
  • Bar Chart
  • Line Chart
  • Donut Chart
  • Pie Chart
  • Polar Area Chart
  • Radar Chart
  • Bubble Chart
  • Scatter Chart
• Chart Dataset: 
  • Current Page Dataset - Generates chart based on the data on the current datalist page being displayed.
  • Entire Dataset - Generates chart based on the entire dataset of the datalist.
• Show Tabular Data: Show tabular data at the configured position.
  • No
  • Top
  • Bottom
• Show Export Links: This option is visible when Show Tabular Data is visible. Show or hide the export links located below the tabular data.
  • No
  • Yes
• Show Filters: Show or hide the filters on the top right of the chart. The filters are defined in the datalist chosen.
  • No
  • Yes

Data mappings

Area Chart, Bar Chart, Pie Chart,  Line Chart, Donut Chart, Polar Area Chart, Radar Chart, Bubble Chart, Scatter Chart

Fields to configure:

• List: Select the target datalist to read records from.
• X-axis Value: Choose the datalist column to represent the x-axis or categories of the chart.
• Number Values: 
  • Number Value: Datalist column to represent the category values of the chart.

Chart options

Area Chart

Fields to configure:

• 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. 
• Enable downloads: If Checked, CSV and PDF downloads will be enabled, and two Text Fields will appear for you to configure the labels.
  • Download PDF Button Label: Download PDF.
  • Download CSV Button Label: Download CSV.
• Width: Maximum Width of chart.
• Height: Minimum Height of chart.

Bar Chart/Bubble Chart

Fields to configure:

• 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. 
• Enable downloads: If Checked, CSV and PDF downloads will be enabled, and two Text Fields will appear for you to configure the labels.
  • Download PDF Button Label: Download PDF.
  • Download CSV Button Label: Download CSV.
• Width: Maximum Width of chart.
• Height: Minimum Height of chart.

Line Chart

Fields to configure:

• 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.
• Enable downloads: If Checked, CSV and PDF downloads will be enabled, and two Text Fields will appear for you to configure the labels.
  • Download PDF Button Label: Download PDF.
  • Download CSV Button Label: Download CSV.
• Width: Maximum Width of chart.
• Height: Minimum Height of chart.

Donut/Pie/Polar Area/Radar Charts

Fields to configure:

• 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. 
• Enable downloads: If Checked, CSV and PDF downloads will be enabled, and two Text Fields will appear for you to configure the labels.
  • Download PDF Button Label: Download PDF.
  • Download CSV Button Label: Download CSV.
• Width: Maximum Width of chart.
• Height: Minimum Height of chart.

Scatter Chart

Fields to configure:

• 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 downloads: If Checked, CSV and PDF downloads will be enabled, and two Text Fields will appear for you to configure the labels.
  • Download PDF Button Label: Download PDF.
  • Download CSV Button Label: Download CSV.
• Width: Maximum Width of chart.
• Height: Minimum Height of chart.

Advanced

UI key data filter

Field to configure:

• UI Key Name:
  When defined, the additional conditions will be appended using the value defined here as the parameter and the UI 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 replace it with the UI 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

Customize headers and footers using HTML.

Fields to configure:

• Custom Header: Custom Header in HTML.
• Custom Footer: Custom Footer in HTML.

Performance & offline

Configure caching and offline settings for optimal performance.

Cache settings

Set caching scope (None, Application, User) and duration in seconds.

Fields to configure: 

• 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.

For more information, see Performance Improvement with UI Caching.

PWA offline settings

Field to configure:

• Enable cache for offline support: Enable caching for offline support, which is usually set for mobile browsers.

For more information, see Progressive Web Application.

Download plugin

You can download the plugin from the Joget Marketplace.

Download sample app