| 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. |
...
| 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 | - 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
|
Figure 2a: SQL Chart Properties - Default Datasource
| Name | Description |
|---|
| Datasource | Select the datasource for the chart. - Default Datasource
- Custom Datasource
- Load Data From
- 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 |
|---|
| 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 |
|---|
| 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). | 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 |
|---|
| 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 | | 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. | | 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. |
|
...
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 |
|---|
|
<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> |
Available in Joget Marketplace
...
