Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents
                                                                                                                      

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

Image Modified

Figure 2: ChartJs Properties

Configure ChartJs Menu

NameDescription
IDMenu 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.

LabelMenu label. Mandatory field.
Chart TitleChart Title to be displayed as part of the generated chart.
Chart Type

Available chart types:

  • 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

NameDescription
ListTarget Datalist to read records from.
X-axis ValueDatalist column to represent the x-axis or categories of the chart.
Number Values
PropertyDescription
Number ValueDatalist column to represent the category values of the chart.


Chart Options

Area Chart

NameDescription
X-axis LabelLabel for the X-axis.
Y-axis LabelLabel for the Y-axis.
Show LegendIf checked, chart legend will be shown.
Opaque ChartIf Checked chart will show opaque color. 


If Checked, CSV and
Pdf
PDF downloads will be enabled and two Text Fields will appear for you to configure the labels.

Name

Example
Download PDF Button Label Download PDF
Download CSV Button Label Download CSV


WidthMaximum Width of chart.
HeightMinimum Height of chart.

Figure 3: Area Chart

Bar Chart, Bubble Chart

NameDescription
X-axis LabelLabel for the X-axis.
Y-axis LabelLabel for the Y-axis.
Show LegendIf checked, chart legend will be shown.
Disable Tool TipIf checked tooltip will be disabled
Opaque ChartIf Checked chart will show opaque color. 


If Checked, CSV and
Pdf
PDF downloads will be enabled and two Text Fields will appear for you to configure the labels.

Name

Example
Download PDF Button Label Download PDF
Download CSV Button Label Download CSV


WidthMaximum Width of chart.
HeightMinimum Height of chart.

Figure 4: Bar Chart


Line Chart

NameDescription
X-axis LabelLabel for the X-axis.
Y-axis LabelLabel for the Y-axis.
Show LegendIf checked, chart legend will be shown.
Disable Tool TipIf checked tooltip will be disabled
Enable AnimationIf Checked animation will be enabled.


If Checked, CSV and
Pdf
PDF downloads will be enabled and two Text Fields will appear for you to configure the labels.

Name

Example
Download PDF Button Label Download PDF
Download CSV Button Label Download CSV


WidthMaximum Width of chart.
HeightMinimum Height of chart.

Figure 5: Line Chart

Donut Chart, Pie Chart, Polar Area Chart, Radar Chart

NameDescription
Show LegendIf checked, chart legend will be shown.
Disable Tool TipIf checked tooltip will be disabled
Opaque ChartIf Checked chart will show opaque color. 


If Checked, CSV and
Pdf
PDF downloads will be enabled and two Text Fields will appear for you to configure the labels.

Name

Example
Download PDF Button Label Download PDF
Download CSV Button Label Download CSV


WidthMaximum Width of chart.
HeightMinimum Height of chart.

Figure 6: Bar Chart


Figure 7: Pie Chart


Figure 8: Polar Area Chart


Figure 9: Radar Chart

Scatter Chart

NameDescription
X-axis LabelLabel for the X-axis.
Y-axis LabelLabel for the Y-axis.
Show LegendIf checked, chart legend will be shown.
Disable Tool TipIf checked tooltip will be disabled


If Checked, CSV and
Pdf
PDF downloads will be enabled and two Text Fields will appear for you to configure the labels.

Name

Example
Download PDF Button Label Download PDF
Download CSV Button Label Download CSV


WidthMaximum Width of chart.
HeightMinimum Height of chart.

Figure 10: Radar Chart

Advanced

Userview Key Data Filter

NameDescription
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
titleExample

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
titleExample

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

NameDescription
Custom HeaderCustom Header in HTML.
Custom FooterCustom Footer in HTML.

Performance & Offline

Cache Settings

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.
Panel
borderColorpurple
bgColor#fefaff
borderWidth1
titleBGColor#ddccff
borderStylesolid

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 supportEnable caching for offline support, usually set for use on mobile browsers.

Read Progressive Web Application (PWA) for more information.


Download Sample App

View file
nameAPP_kb_dx8_Chartjs(v1).jwa
height250