Table of Contents

Introduction

English
Chart menu allows you to select a form binder or define your own SQL query to display the chart data for the most common graph types. You can also include charts in your

...

UI Dashboard Menu.

Chart Menu Properties

Configure Chart Menu

Image Modified

Figure 1: Edit Chart Properties

ID element unique id. Userview will use this id in the URL for the menu if the Custom ID is empty.

Name	Description
Label	Menu	label. Mandatory field.
Menu Custom ID	Item link slug. Optional field. Value Value defined here must be unique to the rest of the Userview UI Menus as the first matching name will be called upon. Label	Menu label. Mandatory field.
Chart Type	Area Chart Bar Chart Bubble Chart Candlestick Chart Donut Chart Line Chart Open High Low Close Chart (OHLC Chart) Pie Chart XY Chart
Chart Title	Chart Title to be displayed as part of the generated graph.
Chart Library	Apache ECharts For a comprehensive guide on creating and customizing charts using Apache ECharts, refer to the official ECharts documentation https://echarts.apache.org/en/api.html#echarts. It provides instructions on implementing various chart types, data sets, and options for personalizing the visual appeal and interactivity of your charts jqPlot Charts Explore the jqPlot documentation http://www.jqplot.com/docs/index/Hooks.html for detailed instructions on utilizing this plotting and charting plugin

Configure Datasource

Image RemovedImage Added

Figure 22a: SQL Chart Properties - Default Datasource

Name

Description

Datasource

Select the datasource for the chart.

Using Data Binder
Using List
Default Datasource
Custom Datasource

Data Binder

- Image Added
  Figure 2b: SQL Chart Properties - Custom Datasource
Load Data From
- Image Added
  Figure 2c: SQL Chart Properties - Load Data From
Using List
- Image Added
  Figure 2d: SQL Chart Properties - Using List

When Datasource is set to "Using Data Binder", this option will show up. Advance Form Data Binder has more flexible ways to build chart datasets using join, group, and aggregate function. Please see Datalist Binder for the available binder to use.

SQL Query

When Datasource is set to use any of the ""Default Datasource" or "Custom Datasource", this option will show up. You You use an SQL Query to produce the dataset required for the graph type. The The first column in the dataset will be assumed for the X-axis/label.

Example 1:The first column to be returned from the query must be a label (X-axis), followed by value columns for the Y-axis.

Code Block

language	sql
title	Example

SELECT
    c_status AS 'status',
    COUNT(c_status) AS 'count' 
FROM
    app_fd_tix_tickets 
WHERE
    c_status IS NOT NULL 
GROUP BY
    c_status

Example 2:

Code Block

language	sql
title	SQL

SELECT
    c.c_claimant,
    SUM( CAST( replace(c.c_total, '$', '') AS DECIMAL(10, 2)) ) AS 'total',
    AVG( CAST( replace(c.c_total, '$', '') AS DECIMAL(10, 2)) ) AS 'avg' 
FROM
    app_fd_j_expense_claim c 
GROUP BY
    c.c_claimant

Data Store

When Datasource is set to "Load Data From", this option will show up. Advance Form Data Binder has more flexible ways to build chart datasets using join, group, and aggregate functions. Please see List Data Store for the available binders to use.

Configure Database

This option is available when the Datasource is set to "Custom Datasource" (Figure 2a).

Name	Description
Database Type	Enter the database type. (example: com.mysql.jdbc.Driver) Please ensure that the database type entered here is compatible with Joget DX 8. For reference, check this Link.
Target DB URL	Enter the Database's URL
Username	Enter your DB username credential.
Password	Enter your DB password credential.

Tip

title	Tip

For a reference of what the parameters entered into "Configure Database" should look like, check the default Joget Datasource settings, Expand the admin bar then go to Settings>System Settings>Datasource & Profile Settings.

Image Added

Using List

Name	Description
List	Select the List that the chart will use to plot data.
Chart Dataset	Select the size of the chart's dataset. Current Page Dataset Entire Dataset
Show Tabular Data	This option allows you to view the data used to plot the chart in tabular form. No - Do not show the tabular data Top - Show tabular data on top of the chart Bottom - Show tabular data at the bottom of the chart
Show Export Links	Available when Show tabular data is set to either "Top" or "Bottom". When set to "Yes", this option allows you to export the chart into CSV, Excel, XML or PDF directly from the UI page. Yes No
Show Filters	Available when Show tabular data is set to either "Top" or "Bottom". When set to "Yes", this option allows you to filter the tabular data used to plot the chart directly from the UI page. Yes No

Data Binder & Chart Data Mapping

Image Modified

Remove Padding and Whitespaces from Charts

To hide the padding and utilizing the spacing around the chart, below code can be helpful.

Output of the code

Image Added

Code to remove padding and spacing

Image Added

{
"top": "5px",
"left": "5px",
"right": "5px",
"bottom": "5px"
}

Figure 3: Data Binder & Chart Data Mapping Properties

Name

Description

Order By

Column to be sorted in the graph dataset. This would affect how the graph is plotted.

Order

ASC
DESC

X-axis Value

X-axis label.

Y-axis Values

Y-axis dataset.

Name	Description
Number Value	Select a numeric parameter to be plotted on the Y-axis. This field supports hash variables, app variables and List columns.
Series Name	Custom name for the series of values.
Series Customization	This field allows you to insert a script that can modify the graph's visualization. (e.g: modify legend position)
Add Row	Add another dataset to be plotted on the Y-axis.

Chart Options Properties

Image Modified

Figure 4: Chart Options

Display as Horizontal ChartColors color

Name

Description

Echart Theme

This option appears when Echart Library is selected in Configure Chart (Fig 1).

X-axis Label

X-axis display as

Category
Number
Date

Y-axis Label

Y-axis Prefix

Show Legend?

If checked, the legend will be shown in the generated graph.

Show Value Label in Chart?

If checked, the value label will be shown in the generated graph.

Stack Series?

If checked, this will affect the generated graph.

Display as Horizontal Chart?

If checked, the Chart will be displayed horizontally.

No Boundary Gap

If checked, there will be no gap between the axes label and the chart.

Width

Width in character, for example 100%.

Height

Height in character, example 300px.

Colours

Series

colour. Optional field. This option only appears when jqPlots Library is selected in Configure Chart.

Comma-separated values (CSV) of color codes.

Example 1: #3333FF,#66FF00,#FF9933,#990000

Image Modified

Example 2: red,orange,yellow,green,blue,indigo

Image Modified

Info

title	What are the default colors?

http://stackoverflow.com/questions/18332440/what-are-the-jqplot-default-series-colors

Advanced Properties

Image Modified

Figure 5: Advanced Properties

Name

Description

Series Customization

Name	Description


Series Name	Custom name for the series of values.
Series Customization	This field allows you to insert a script that can modify the graph's visualization. e.g: tooltip : { "trigger" : "item" , "formatter" : {a} {b} : {c} ({d}%) }
Add Row	Add another dataset to be plotted on the Y-axis.

Additional Customization

This field allows you to insert an additional script that can modify the graph's visualization. (e.g: modify legend position)

UI Userview Key Name

When defined, the additional conditions will be appended using the value defined here as the parameter and the userview UI key value as the value.

Info

title	Example

SQL: SELECT category, count(category) FROM table1

Userview UI Key Name: type

Userview UI Key Value: val

Resultant SQL: SELECT category, count(category) FROM table1 WHERE type = 'val'

When userview UI key value is defined, you may define #userviewKey# in your SQL query to have it replaced with the userview UI key value.

Info

title	Example

SQL: SELECT category, count(category) FROM table1 WHERE type = '#userviewKey#'

Userview UI Key Value: val

Resultant SQL: SELECT category, count(category) FROM table1 WHERE type = 'val'

Custom Header

Custom Header in HTML.

Custom Footer

Custom Footer in HTML.

Performance & Offline

Image Modified

Figure 6:

...

Performance & Offline 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.

PWA Offline Settings

Note: PWA Offline support is dependent on the theme used.

Name	Description
Enable cache for offline support	Check this to enable caching for offline support, usually set for use on mobile browsers.

Read Progressive Web Application (PWA) for more information.

Additional Notes & Modifications

...

Code Block

language	js

<script>
$(document).ready(function(){

	//replace both #jq_plot_chart id with the correct id. can be found by right-clicking the chart and pressing "Inspect"
    $('#jq_plot_chart').bind('jqplotDataClick',
        function (event, seriesIndex, pointIndex, data) {   
            console.log(event);
            console.log(seriesIndex);
            console.log(pointIndex);
            console.log(data);
            
            //for chart which used legend and x-axis, 
            var xaxis = $(".jqplot-xaxis-tick:eq("+pointIndex+")");
            var series = $(".jqplot-table-legend-label:eq("+seriesIndex+")");
            
            console.log("x-axis :" + xaxis.text());
            console.log("series :" + series.text());
        }
    );
 
    //for double click event. Please note the arguments are different.
    $('#jq_plot_chart').bind('jqplotDblClick',
        function (event, coordinate, points, data) {   
            console.log(event);
            console.log(coordinate);
            console.log(points);
            console.log(data);

            if (data) {
                var xaxis = $(".jqplot-xaxis-tick:eq("+data.pointIndex+")");
                var series = $(".jqplot-table-legend-label:eq("+data.seriesIndex+")");

                console.log("values :" + data.data);
                console.log("x-axis :" + xaxis.text());
                console.log("series :" + series.text());
            }
        }
    );
});
</script>

Note
This code does not work with OHLC and candlestick charts.

Note
The code above only works for charts made with jqPlot

The following code is for interactive charts made with eChart and should also be put in the "Custom Footer". You can find more about interactive ECharts here.

Code Block

language	js

<script>
$(document).ready(function() {
    //ID of one's eChart can be found in html elements of the chart when launching the app
    //which can be found by right-clicking the chart and pressing "Inspect"
	var aChart = echarts.init(document.getElementById('some_id'));

    aChart.on('click', function(params) {
      console.log("Click!");
	  console.log("Data name: " + params.name);
      console.log("Data value: " + params.data);
    });
});
</script>

Download Demo Apps

Available in Joget Marketplace

Candlestick Charting
Tutorial App: Joget Workflow Charts (using jqPlots)
Joget DX Showcase APP_jshowcaseJoget_DX8_dxShowcase.jwa (using Apache Echarts)

Space shortcuts

Page tree

Versions Compared

Old Version 3

New Version Current

Key

Introduction

Chart Menu Properties

Configure Chart Menu

Configure Datasource

Data Binder & Chart Data Mapping

Chart Options Properties

Advanced Properties

Performance & Offline

PWA Offline Settings

Additional Notes & Modifications

Download Demo Apps

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 3

New Version Current

Key

Introduction

Chart Menu Properties

Configure Chart Menu

Configure Datasource

Data Binder & Chart Data Mapping

Chart Options Properties

Advanced Properties

Performance & Offline

PWA Offline Settings

Additional Notes & Modifications

Download Demo Apps