Table of Contents

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

Figure 1: Multiple EChart userview menus displayed in a dashboard

EChart Menu Properties

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

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

icon	false

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.

Data Mappings

Area Chart, Bar Chart, Line Chart, Donut Chart, Custom

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

Property

Description

Number Value

Datalist 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:

Area Chart & Line Chart - https://echarts.apache.org/en/option.html#series-line
Bar Chart - https://echarts.apache.org/en/option.html#series-bar
Donut Chart - 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.

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

Code Block
{ 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:

Code Block
{"type" : "line"}

Code Block
{"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

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 Here expects JSON value(s) to modify the features or look-and-feel of the series.

Chart Options

Area Chart, Line Chart

Name	Description
X-axis Label	Label for the X-axis.
X-Axis Display as	To display the X-axis value as: Category Number Date
Y-axis Label	Label for the Y-axis.
No Boundary Gap	If 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 Legend	If checked, chart legend will be shown.
Show Tool Tip	If checked, when mousing over the data points, additional information about the data point will be displayed.
Width	Maximum Width of chart.
Height	Minimum Height of chart.

Bar Chart

Name	Description
X-axis Label	Label for the X-axis.
X-Axis Display as	To display the X-axis value as: Category Number Date
Y-axis Label	Label for the Y-axis.
No Boundary Gap	If checked, there will be no gaps on the sides of the chart within the plot area.
Show Legend	If 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 Tip	If checked, when mousing over the data points, additional information about the data point will be displayed.
Width	Maximum Width of chart.
Height	Minimum Height of chart.

Donut Chart

Name	Description
Show Legend	If checked, chart legend will be shown.
Show Tool Tip	If checked, when mousing over the data points, additional information about the data point will be displayed.
Width	Maximum Width of chart.
Height	Minimum Height of chart.

Pie Chart

Name	Description
Show Legend	If 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 Tip	If checked, when mousing over the data points, additional information about the data point will be displayed.
Width	Maximum Width of chart.
Height	Minimum Height of chart.

Custom

Name	Description
X-axis Label	Label for the X-axis.
X-Axis Display as	To display the X-axis value as: Category Number Date
No Boundary Gap	If checked, there will be no gaps on the sides of the chart within the plot area.
Show Legend	If 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 Tip	If checked, when mousing over the data points, additional information about the data point will be displayed.
Width	Maximum Width of chart.
Height	Minimum Height of chart.

Advanced

General

Name

Description

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:

Code Block

language	js
title	Sample
linenumbers	true

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

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.

Info

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

Info

title	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:

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

borderColor	purple
bgColor	#fefaff
borderWidth	1
titleBGColor	#ddccff
borderStyle	solid

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_echart_demo.jwa

Change Logs

7.0.

2

1 Beta

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

7.0.1 Beta

[ FIXED ]       : Property editor error on initial configuration.

7.0.0 Beta

[ ADDED ]       : Initial Release.

Space shortcuts

Page tree

Versions Compared

Old Version 33

New Version 34

Key

Introduction

EChart Menu Properties

Configure EChart Menu

Data Mappings

Area Chart, Bar Chart, Line Chart, Donut Chart, Custom

Pie Chart

Chart Options

Area Chart, Line Chart

Bar Chart

Donut Chart

Pie Chart

Custom

Advanced

General

Userview Key Data Filter

UI

Performance & Offline

Cache Settings

PWA Offline Settings

Download Sample App

Change Logs

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 33

New Version 34

Key

Introduction

EChart Menu Properties

Configure EChart Menu

Data Mappings

Area Chart, Bar Chart, Line Chart, Donut Chart, Custom

Pie Chart

Chart Options

Area Chart, Line Chart

Bar Chart

Donut Chart

Pie Chart

Custom

Advanced

General

Userview Key Data Filter

UI

Performance & Offline

Cache Settings

PWA Offline Settings

Download Sample App

Change Logs