Introduction

Chart Menu Properties

Configure Chart Menu

...

Configure Datasource

Image Removed

Figure 2a: SQL Chart Properties - Default Datasource

Configure Datasource

Image Added

Figure 2a: SQL Chart Properties - Default Datasource

Name	Description
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
Name	Description
Datasource	Select the datasource for the chart. Default Datasource Custom Datasource Image Removed Figure 2b: SQL Chart Properties - Custom Datasource   Load Data From Image Removed Figure 2c: SQL Chart Properties - Load Data From Using List Image Removed 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. 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 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 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.
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

...

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

Output of the code

Image Modified

Code to remove padding and spacing

...

Read Progressive Web Application (PWA) for more information.

Additional Notes & Modifications

Display Labels Outside the Pie Chart

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.

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

Hide Gridlines from Chart Plot

...

The following code can be modified and put in "Custom Header" for displaying the labels outside of the pie chartproperty, to hide gridlines from the chart plot.

Code Block
language js
<script> $(function(){ $.jqplot.preParseOptionsHooks.push(function(args){ args.seriesDefaultsaxesDefaults.rendererOptions.dataLabelPositionFactordrawMajorGridlines = 1.05false; }); }); </script>

Note
The charts are plotted using jqPlot. Head over to their website here to see the full list of available hooks for customization.

...

}); </script>

Interactive Chart

The following code can be modified and put in "Custom Header" property, to hide gridlines from the chart plotFooter" for interactive Charts.

<script>
    $(function(){
        $.jqplot.preParseOptionsHooks.pushdocument).ready(function(args){

	//replace both #jq_plot_chart id with the       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(){
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>

...

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.

<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

...