Versions Compared

Old Version 7

changes.mady.by.user Ismat

Saved on

compared with

New Version Current

changes.mady.by.user Nabila Jahan

Saved on

Key

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

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

...

NameDescription
LabelMenu label. Mandatory field.
Menu ID

Item link slug. Optional field. Value defined here must be unique to the rest of the UI Menus as the first matching name will be called upon.

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
  • jqPlot Charts

Configure Datasource

Image Removed

Figure 2b: SQL Chart Properties - Default Datasource

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

Figure 2a: SQL Chart Properties - Default Datasource

NameDescription
Datasource

Select the datasource for the chart.

  • Default Datasource
  • Custom Datasource

    • 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

SQL Query

When Datasource is set to "Default Datasource" or "Custom Datasource", this option will show up. You use an SQL Query to produce the dataset required for the graph type. 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

NameDescription
Datasource

Select the datasource for the chart.

  • Default Datasource
  • Custom Datasource

    • Image Removed

      Figure 2a: SQL Chart Properties - Custom Datasource

       
  • Load Data From

    • Image Removed

      Figure 2b: SQL Chart Properties - Load Data From

  • Using List

    • Image Removed

      Figure 2c: SQL Chart Properties - Using List

SQL Query

When Datasource is set to "Default Datasource" or "Custom Datasource", this option will show up. You use an SQL Query to produce the dataset required for the graph type. 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
languagesql
titleExample
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
languagesql
titleSQL
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 Datalist Binder 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).

NameDescription
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 URLEnter the Database's URL
UsernameEnter your DB username credential.
PasswordEnter your DB password credential.
Tip
titleTip

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.

 

Using List
NameDescription
ListSelect 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 on 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 from directly from the UI page.

  • Yes
  • No

Data Binder & Chart Data Mapping

Figure 3: Data Binder & Chart Data Mapping Properties



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


Y-axis dataset.

NameDescription
Order ByColumn 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.

NameDescription

Number Value

Select a numeric parameter
NameDescription
Order ByColumn 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
NameDescription

Number Value

Select a numeric parameter to be plotted on the Y-axis. This field supports hash variables, app variables and List columns.
Series NameCustom name for the series of values.
Series CustomizationThis 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 Removed

Figure 4: Chart Options

. This field supports hash variables, app variables and List columns.
Series NameCustom name for the series of values.
Series CustomizationThis 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 Added

Figure 4: Chart Options


NameDescription
Echart Theme
This option appears when Echart Library is selected in Configure Chart (Fig 1).
X-axis Label 
X-axis Label 
NameDescription
Echart Theme
This option appears when Echart Library is selected in Configure Chart (Fig 1).
X-axis Label 
X-axis Label 
X-axis display as
  • Category
  • Number
  • Date
Y-axis Label 
Y-axis Label 
Y-axis Prefix
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?
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.

ColorsColours

Series colorcolour. 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


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

Info
titleWhat are the default colors?

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

...

Figure 5: Advanced Properties


NameDescription
Series Customization
NameDescription
UI Key
Series NameCustom name for the series of values.
Series CustomizationThis 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 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

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

UI Key Name: type

UI Key Value: val

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

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

Info
titleExample

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

UI Key Name: type

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 Removed

Figure 6: Chart Properties - Performance & Offline Settings 

...

Name

...

Description

...

Caching options are:

  • None: No caching.
  • Application: Cache content by application where all users will see the same content.
  • User: Cache by username

...

Read more at Performance Improvement with UI Caching.

PWA Offline Settings

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

...

Name

...

Description

...

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

Info
titleExample

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

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 Added

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.

Read more at Performance Improvement with UI Caching.

PWA Offline Settings

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

Name

Description

Enable cache for offline supportCheck 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

Display Labels Outside the Pie Chart

Image Added

The following code can be modified and put in "Custom Header" for displaying the labels outside of the pie chart.

Code Block
languagejs
<script>
    $(function(){
        $.

Read Progressive Web Application (PWA) for more information.

Additional Notes & Modifications

Display Labels Outside the Pie Chart

Image Removed

The following code can be modified and put in "Custom Header" for displaying the labels outside of the pie chart.

Code Block
languagejs
<script>
    $(function(){
        $.jqplot.preParseOptionsHooks.push(function(args){
            args.seriesDefaults.rendererOptions.dataLabelPositionFactor = 1.05;
        });
    });
</script>

...

Code Block
languagejs
<script>
$(document).ready(function(){

    $('	//replace both #jq_plot_chart').bind('jqplotDataClick',
        function (event, seriesIndex,  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
languagejs
<script>
$(document).ready(function() {
    //ID of one's eChart can be found in html elements of the varchart series = $(".jqplot-table-legend-label:eq("+data.seriesIndex+")");

  when launching the app
    //which can be found by right-clicking the chart and  console.log("values :" + data.data);
          pressing "Inspect"
	var aChart = echarts.init(document.getElementById('some_id'));

    aChart.on('click', function(params) {
      console.log("x-axis :" + xaxis.text());
                Click!");
	  console.log("seriesData name: " + seriesparams.text()name);
      console.log("Data value: "    }
    + params.data);
    }
    );
});
</script>
Note
 This code does not work with OHLC and candlestick charts.
Download Demo Apps
Available in Joget Marketplace