Introduction

The EChart 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://echarts.apache.org

This plugin source code is available in JogetOSS repository at https://github.com/jogetoss/echart-menu.

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 EChart userview menus displayed in a dashboard

EChart Menu Properties

Configure EChart 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.

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 Theme

Choose from a wide selections of color themes for the chart. You can select "Custom" to define your own theme too.

Custom Theme JSON

This option appears when "Chart Theme" is set to "Custom".

Follow the steps below to generate custom theme.

  1. Go to https://echarts.apache.org/en/theme-builder.html and customize your own theme.
  2. When ready, click "Export".
  3. Paste the content of the file downloaded here.
Sample Theme 
{
    "version": 1,
    "themeName": "shine",
    "theme": {
        "seriesCnt": 4,
        "backgroundColor": "rgba(0,0,0,0)",
        "titleColor": "#333333",
        "subtitleColor": "#aaaaaa",
        "textColorShow": false,
        "textColor": "#333",
        "markTextColor": "#eeeeee",
        "color": [
            "#c12e34",
            "#e6b600",
            "#0098d9",
            "#2b821d",
            "#005eaa",
            "#339ca8",
            "#cda819",
            "#32a487"
        ],
        "borderColor": "#ccc",
        "borderWidth": 0,
        "visualMapColor": [
            "#1790cf",
            "#a2d4e6"
        ],
        "legendTextColor": "#333333",
        "kColor": "#c12e34",
        "kColor0": "#2b821d",
        "kBorderColor": "#c12e34",
        "kBorderColor0": "#2b821d",
        "kBorderWidth": 1,
        "lineWidth": 2,
        "symbolSize": 4,
        "symbol": "emptyCircle",
        "symbolBorderWidth": 1,
        "lineSmooth": false,
        "graphLineWidth": 1,
        "graphLineColor": "#aaaaaa",
        "mapLabelColor": "#c12e34",
        "mapLabelColorE": "#c12e34",
        "mapBorderColor": "#eee",
        "mapBorderColorE": "#ddd",
        "mapBorderWidth": 0.5,
        "mapBorderWidthE": 1,
        "mapAreaColor": "#ddd",
        "mapAreaColorE": "#e6b600",
        "axes": [
            {
                "type": "all",
                "name": "通用坐标轴",
                "axisLineShow": true,
                "axisLineColor": "#333",
                "axisTickShow": true,
                "axisTickColor": "#333",
                "axisLabelShow": true,
                "axisLabelColor": "#333",
                "splitLineShow": true,
                "splitLineColor": [
                    "#ccc"
                ],
                "splitAreaShow": false,
                "splitAreaColor": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            },
            {
                "type": "category",
                "name": "类目坐标轴",
                "axisLineShow": true,
                "axisLineColor": "#333",
                "axisTickShow": true,
                "axisTickColor": "#333",
                "axisLabelShow": true,
                "axisLabelColor": "#333",
                "splitLineShow": false,
                "splitLineColor": [
                    "#ccc"
                ],
                "splitAreaShow": false,
                "splitAreaColor": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            },
            {
                "type": "value",
                "name": "数值坐标轴",
                "axisLineShow": true,
                "axisLineColor": "#333",
                "axisTickShow": true,
                "axisTickColor": "#333",
                "axisLabelShow": true,
                "axisLabelColor": "#333",
                "splitLineShow": true,
                "splitLineColor": [
                    "#ccc"
                ],
                "splitAreaShow": false,
                "splitAreaColor": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            },
            {
                "type": "log",
                "name": "对数坐标轴",
                "axisLineShow": true,
                "axisLineColor": "#333",
                "axisTickShow": true,
                "axisTickColor": "#333",
                "axisLabelShow": true,
                "axisLabelColor": "#333",
                "splitLineShow": true,
                "splitLineColor": [
                    "#ccc"
                ],
                "splitAreaShow": false,
                "splitAreaColor": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            },
            {
                "type": "time",
                "name": "时间坐标轴",
                "axisLineShow": true,
                "axisLineColor": "#333",
                "axisTickShow": true,
                "axisTickColor": "#333",
                "axisLabelShow": true,
                "axisLabelColor": "#333",
                "splitLineShow": true,
                "splitLineColor": [
                    "#ccc"
                ],
                "splitAreaShow": false,
                "splitAreaColor": [
                    "rgba(250,250,250,0.3)",
                    "rgba(200,200,200,0.3)"
                ]
            }
        ],
        "axisSeperateSetting": true,
        "toolboxColor": "#06467c",
        "toolboxEmphasisColor": "#4187c2",
        "tooltipAxisColor": "#cccccc",
        "tooltipAxisWidth": 1,
        "timelineLineColor": "#005eaa",
        "timelineLineWidth": 1,
        "timelineItemColor": "#005eaa",
        "timelineItemColorE": "#005eaa",
        "timelineCheckColor": "#005eaa",
        "timelineCheckBorderColor": "#316bc2",
        "timelineItemBorderWidth": 1,
        "timelineControlColor": "#005eaa",
        "timelineControlBorderColor": "#005eaa",
        "timelineControlBorderWidth": 0.5,
        "timelineLabelColor": "#005eaa",
        "datazoomBackgroundColor": "rgba(47,69,84,0)",
        "datazoomDataColor": "rgba(47,69,84,0.3)",
        "datazoomFillColor": "rgba(167,183,204,0.4)",
        "datazoomHandleColor": "#a7b7cc",
        "datazoomHandleWidth": "100",
        "datazoomLabelColor": "#333333"
    }
}



Chart Library Version

Choose echart library version.

  • 4.9.0
  • 5.1.2
Chart Type

Available chart types:

  • Area Chart
  • Bar Chart
  • Line Chart
  • Donut Chart
  • Pie Chart
  • Custom

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.

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, Line Chart, Donut Chart, Custom

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.
Show Value Label in Chart?Check this option to display the category values on the chart.
Series Customization

See chart configuration documentation here: 

Here expects JSON value(s) to modify the features or look-and-feel of the series.

For example, if a bar chart type is selected, to display the categories as a stacked bar chart, you can key in as such:

{
    stack : 'one',
	label: {
        show: true,
        precision: 1,
        valueAnimation: true
    }
}


If Chart Type selected is Custom, a chart type and any of its necessary properties must be defined.
To see all available chart types, see documentation here: https://echarts.apache.org/en/option.html#series

Examples as below:

{"type" : "line"}
{"type" : "pie",
 "radius" : "40%",
 "center": ["50%", "25%"],
 "label": {
   "formatter": "{a} {b}: {@2012} ({d}%)"
 }
}


You can also download the sample app in this page below to use as a reference.

Pie Chart

NameDescription
ListTarget Datalist to read records from.
X-axis ValueDatalist column to represent the categories of the pie chart.
Number ValueDatalist 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

Here expects JSON value(s) to modify the features or look-and-feel of the series.

Examples:-

Resize pie chart size

Sample
{
	"radius": "50%"
}

Chart Options

Area Chart, Line Chart

NameDescription
X-axis LabelLabel for the X-axis.
X-Axis Display as

To display the X-axis value as:

  • Category
  • Number
  • Date
Y-axis LabelLabel for the Y-axis.
No Boundary GapIf checked, there will be no gaps on the sides of the chart within the plot area.
Smooth Line

If checked, the chart line(s) will be curved in order to appear smooth. Else, chart line(s) will be straight lines connecting the plotted data points.

This option is ignored if Series Customization property is set.

Show LegendIf checked, chart legend will be shown.
Show Tool TipIf checked, when mousing over the data points, additional information about the data point will be displayed.
WidthMaximum Width of chart.
HeightMinimum Height of chart.


Number and Currency Formatting

Name

Description

Enable Data Labels

If checked, the chart will display data labels next to each data point.

Formatting Style

Defines the style in which numbers and currency are formatted. Refer to the available options:

Sub-element

Description

US Style Formatting

Uses commas as thousand separators and periods as decimal markers. Example: 1,000.00

European Style Formatting

Uses periods as thousand separators and commas as decimal markers. Example: 1.000,00

Prefix

Allows to add a custom prefix to the number, such as a currency symbol or text (Example: $1,000.00 (US Dollar)).

Postfix

Allows you to add a custom postfix to the number, such as a currency symbol or text (Example: 1,000.00 JPY (Japanese Yen)).

Disable Decimal

If checked, decimal places will be hidden, and numbers will be displayed as whole numbers.

Use Thousand Separator

If checked, numbers will be grouped by thousands for easier readability (e.g., 1,000 instead of 1000).

Bar Chart

NameDescription
X-axis LabelLabel for the X-axis.
X-Axis Display as

To display the X-axis value as:

  • Category
  • Number
  • Date
Y-axis LabelLabel for the Y-axis.
No Boundary GapIf checked, there will be no gaps on the sides of the chart within the plot area.
Show LegendIf checked, chart legend will be shown.
Display as Horizontal Chart?If checked, the X-axis and Y-axis will be swapped to represent the data horizontally.
Show Tool TipIf checked, when mousing over the data points, additional information about the data point will be displayed.
WidthMaximum Width of chart.
HeightMinimum Height of chart.


Number and Currency Formatting

Name

Description

Enable Data Labels

If checked, the chart will display data labels next to each data point.

Formatting Style

Defines the style in which numbers and currency are formatted. Refer to the available options:

Sub-element

Description

US Style Formatting

Uses commas as thousand separators and periods as decimal markers. Example: 1,000.00

European Style Formatting

Uses periods as thousand separators and commas as decimal markers. Example: 1.000,00

Prefix

Allows to add a custom prefix to the number, such as a currency symbol or text (Example: $1,000.00 (US Dollar)).

Postfix

Allows you to add a custom postfix to the number, such as a currency symbol or text (Example: 1,000.00 JPY (Japanese Yen)).

Disable Decimal

If checked, decimal places will be hidden, and numbers will be displayed as whole numbers.

Use Thousand Separator

If checked, numbers will be grouped by thousands for easier readability (e.g., 1,000 instead of 1000).

Donut Chart

NameDescription
Show LegendIf checked, chart legend will be shown.
Show Tool TipIf checked, when mousing over the data points, additional information about the data point will be displayed.
WidthMaximum Width of chart.
HeightMinimum Height of chart.


Number and Currency Formatting

Name

Description

Enable Data Labels

If checked, the chart will display data labels next to each data point.

Formatting Style

Defines the style in which numbers and currency are formatted. Refer to the available options:

Sub-element

Description

US Style Formatting

Uses commas as thousand separators and periods as decimal markers. Example: 1,000.00

European Style Formatting

Uses periods as thousand separators and commas as decimal markers. Example: 1.000,00

Prefix

Allows to add a custom prefix to the number, such as a currency symbol or text (Example: $1,000.00 (US Dollar)).

Postfix

Allows you to add a custom postfix to the number, such as a currency symbol or text (Example: 1,000.00 JPY (Japanese Yen)).

Disable Decimal

If checked, decimal places will be hidden, and numbers will be displayed as whole numbers.

Use Thousand Separator

If checked, numbers will be grouped by thousands for easier readability (e.g., 1,000 instead of 1000).

Pie Chart

NameDescription
Show LegendIf checked, chart legend will be shown.
Show Value Label in Chart?

If checked, the category values will be shown.

This option is ignored if Series Customization property is set.

Show Tool TipIf checked, when mousing over the data points, additional information about the data point will be displayed.
WidthMaximum Width of chart.
HeightMinimum Height of chart.



Number and Currency Formatting

Name

Description

Enable Data Labels

If checked, the chart will display data labels next to each data point.

Formatting Style

Defines the style in which numbers and currency are formatted. Refer to the available options:

Sub-element

Description

US Style Formatting

Uses commas as thousand separators and periods as decimal markers. Example: 1,000.00

European Style Formatting

Uses periods as thousand separators and commas as decimal markers. Example: 1.000,00

Prefix

Allows to add a custom prefix to the number, such as a currency symbol or text (Example: $1,000.00 (US Dollar)).

Postfix

Allows you to add a custom postfix to the number, such as a currency symbol or text (Example: 1,000.00 JPY (Japanese Yen)).

Disable Decimal

If checked, decimal places will be hidden, and numbers will be displayed as whole numbers.

Use Thousand Separator

If checked, numbers will be grouped by thousands for easier readability (e.g., 1,000 instead of 1000).

Custom

NameDescription
X-axis LabelLabel for the X-axis.
X-Axis Display as

To display the X-axis value as:

  • Category
  • Number
  • Date
No Boundary GapIf checked, there will be no gaps on the sides of the chart within the plot area.
Show LegendIf checked, chart legend will be shown.
Display as Horizontal Chart?If checked, the X-axis and Y-axis will be swapped to represent the data horizontally.
Show Tool TipIf checked, when mousing over the data points, additional information about the data point will be displayed.
WidthMaximum Width of chart.
HeightMinimum Height of chart.


Number and Currency Formatting

Name

Description

Enable Data Labels

If checked, the chart will display data labels next to each data point.

Formatting Style

Defines the style in which numbers and currency are formatted. Refer to the available options:

Sub-element

Description

US Style Formatting

Uses commas as thousand separators and periods as decimal markers. Example: 1,000.00

European Style Formatting

Uses periods as thousand separators and commas as decimal markers. Example: 1.000,00

Prefix

Allows to add a custom prefix to the number, such as a currency symbol or text (Example: $1,000.00 (US Dollar)).

Postfix

Allows you to add a custom postfix to the number, such as a currency symbol or text (Example: 1,000.00 JPY (Japanese Yen)).

Disable Decimal

If checked, decimal places will be hidden, and numbers will be displayed as whole numbers.

Use Thousand Separator

If checked, numbers will be grouped by thousands for easier readability (e.g., 1,000 instead of 1000).

Advanced

General

NameDescription
Additional Customization

For all customizable properties, see documentation here: https://echarts.apache.org/en/option.html

Here expects JSON value(s) to customize the overall chart functions or look-and-feel.

Example:


Sample
grid : {
	top: "55%"
}, 
tooltip : {
	"trigger": "item", 
	"formatter": "{a} {b}: {c} ({d}%)"
}


If label is too long, use the following code

grid: { containLabel: true }

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.

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

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.

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

APP_echartDemo-2-20210729175255.jwa

Change Logs

7.0.3 Beta

[ MODIFIED ]    : Supports echart library 5.0.2
[ MODIFIED ]    : Support custom theme
[ MODIFIED ]    : Show datalist formatter value instead of original databinder value.
[ MODIFIED ]    : Option to show/hide tabular data, filters, export links, chart dataset scope.

7.0.2 Beta

[ FIXED ]       : Date picker missing and showing no data message.

7.0.1 Beta

[ FIXED ]       : Labels not showing Properly.
[ FIXED ]       : Label on Donut chart not showing Properly.

7.0.0 Beta

[ ADDED ]       : Initial Release.



  • No labels