Introduction
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
Figure 1: Edit Chart Properties
| Name | Description |
|---|---|
| Label | Menu 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 |
|
| Chart Title | Chart Title to be displayed as part of the generated graph. |
| Chart Library |
|
Configure Datasource
Figure 2b: SQL Chart Properties - Default Datasource
| Name | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Datasource | Select the datasource for the chart.
| ||||||||||||
| 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. 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: 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 Datalist Binder for the available binders to use. | ||||||||||||
| Configure Database | This option is available when the Datasource is set to "Custom Datasource" (Figure 2a).
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.
| ||||||||||||
| Using List |
|
Data Binder & Chart Data Mapping
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 |
| ||||||||||
X-axis Value | X-axis label. | ||||||||||
Y-axis Values | Y-axis dataset.
|
Chart Options Properties
Figure 4: Chart Options
| Name | Description |
|---|---|
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 |
|
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? | 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
What are the default colors? |
Advanced Properties
Figure 5: Advanced Properties
| Name | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
Series Customization |
| ||||||||
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 value. Example 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. Example 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
Figure 6: Chart Properties - Performance & Offline Settings
Name | Description |
|---|---|
| Scope | Caching options are:
|
| 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 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
Display Labels Outside the Pie Chart
The following code can be modified and put in "Custom Header" for displaying the labels outside of the pie chart.
<script>
$(function(){
$.jqplot.preParseOptionsHooks.push(function(args){
args.seriesDefaults.rendererOptions.dataLabelPositionFactor = 1.05;
});
});
</script>
The charts are plotted using jqPlot. Head over to their website here to see the full list of available hooks for customization.
Hide Gridlines from Chart Plot
The following code can be modified and put in "Custom Header" property, to hide gridlines from the chart plot.
<script>
$(function(){
$.jqplot.preParseOptionsHooks.push(function(args){
args.axesDefaults.drawMajorGridlines = false;
});
});
</script>
Interactive Chart
The following code can be modified and put in "Custom Footer" for interactive Charts.
<script>
$(document).ready(function(){
$('#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>
This code does not work with OHLC and candlestick charts.
Download Demo Apps
Available in Joget Marketplace