Chart Menu

Introduction

The Chart Menu allows you to select a form binder or define your SQL query to display chart data for common graph types. You can also include charts in your UI Dashboard Menu.

Configure chart

To configure Chart properties, in UI Builder, drag and drop the Chart element onto the canvas and click on it.

When adding Chart, you will see the following fields available for configuration:

• Label: Menu label. This is a mandatory field.
• Menu ID: Item link slug. Optional field. The 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 details, see the ECharts documentation.
  • jqPlot Charts: For details, see the jqPlot documentation.

Configure Datasource

The Configure Datasource allows you to define the source of the data that will be used to generate the chart. You can choose between default and custom datasources, load data from a list, or use an SQL query to create a dataset. This flexibility ensures that your chart can accurately represent the desired data.

Fields to Configure:

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

  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:
  

  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 the Datasource is set to Load Data From, use an advanced form data binder to build chart datasets using join, group, and aggregate functions. See the List Data Store documentation for available binders.
• Configure Database: This option is available when the Datasource is set to Custom Datasource. 
  • Database Type: Enter the database type (e.g., com.mysql.jdbc.Driver). For more information, see Custom Database Configuration.
  • Target DB URL: Enter the database URL.
  • Username: Enter the database username.
  • Password: Enter the database password.

For reference, check the default Joget Datasource settings: Settings > System Settings > Datasource & Profile Settings.

• Using List
  • 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: when tabular data is enabled. This option determines whether export links are displayed alongside the tabular data.
    • Yes: Show export links.
    • No: Do not show export links.
  • Show Filters: when tabular data is enabled. This option allows you to filter the tabular data used to plot the chart directly from the UI page. 
    • Yes: Allow filtering of the tabular data.
    • No: Do not allow filtering of the tabular data. 

Data store & chart data mapping

The Data store & chart data mapping lets you map data from your datasource to the chart. You can define how data should be sorted, specify values for the X and Y axes, and customize the appearance of your chart. This helps in creating clear and accurate visual representations of your data.

Fields to Configure:

• 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.
  • Number Value: Select a numeric parameter to be plotted on the Y-axis. 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 to modify the graph's visualization. (e.g.: modify legend position)
  • Add Row: Add another dataset to be plotted on the Y-axis.

Chart options

The Chart options provides various customization settings for your chart, such as selecting the chart library, defining labels, adjusting display settings, and setting chart dimensions. These options allow you to tailor the chart's appearance and functionality to meet specific needs.

Fields to Configure:

• Echart Theme This option appears when Echart Library is selected in Configure Chart.
• 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?: If checked, the Chart will be displayed horizontally.
• No Boundary Gap: Remove the gap between the axes label and chart.
• Width: Chart width (e.g., 100%).
• Height: Chart height (e.g., 300px).
• Colors: Series color. Optional field. This option only appears when jqPlots Library is selected in the Configure Chart. Comma-separated values (CSV) of color codes. For more information, see What are the default colors?.
  Example 1: #3333FF,#66FF00,#FF9933,#990000
  
  Example 2: red,orange,yellow,green
  

Advanced

The Advanced includes settings further to customize your chart's series and additional data. You can insert scripts to modify the chart's visualization, add rows for more datasets, and define custom headers and footers in HTML. This enables detailed and specific modifications to enhance your chart.

Fields to Configure:

• Series Customization: Insert a script to modify the graph's visualization.
  • Series Name: Custom name for the series of values.
  • Series Customization: This field allows you to insert a script to 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 a script to modify the graph's visualization. (e.g: modify legend position)

UI key data filter

The UI key data filter allows you to filter data based on UI keys. By defining UI key names and values, you can append additional conditions to your SQL queries, ensuring that the data displayed in your chart is relevant and filtered according to specific criteria.

Field to Configure:

• 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 the UI key value is defined, you may define #userviewKey# in your SQL query to replace it 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'

UI

The UI provides fields for customizing the chart's user interface. You can add custom headers and footers in HTML, enhancing the presentation and integration of the chart within your application.

Field to Configure:

• Custom Header: Custom Header in HTML.
• Custom Footer: Custom Footer in HTML.

Performance & offline

The Performance & offline focuses on optimizing the chart's performance and enabling offline support. You can configure cache settings to improve loading times and enable Progressive Web Application (PWA) settings to support offline use, particularly for mobile browsers.

Cache settings

The Cache settings allows you to define caching parameters to enhance the chart's performance. You can choose the scope of caching (none, application, or user) and set the duration for which the data should be cached, ensuring faster load times and a smoother user experience.

• Scope:
  Options include 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

The PWA offline settings enable caching for offline support, making your application more resilient and accessible when internet connectivity is intermittent or unavailable. This setting is especially useful for mobile users needing consistent chart data access.

Field to Configure:

• PWA Offline Settings: Enable caching for offline support. This is usually set for mobile browsers. See Progressive Web Application (PWA) documentation for more details.

Additional notes & modifications

You can find tips and code examples for further customizing the chart. This can involve removing padding and whitespace, displaying labels outside pie charts, hiding gridlines, and creating interactive charts. These modifications help refine the chart's appearance and functionality to suit your needs better.

• Remove Padding and Whitespaces from Charts
  The code below can help hide the padding and utilize the spacing around the chart.
  • Output of the code
    
    
  • Code to remove padding and spacing
    
    
    

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

• Display Labels Outside the Pie Chart
  
  
  

  The following code can be modified and put in the Custom Header to display the labels outside 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 Hook Index to see the full list of available hooks for customization.

• Hide Gridlines from Chart Plot
  The following code can be modified and put in the 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(){
   
      //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>

  This code does not work with OHLC and candlestick charts. The code above only works for charts made with jqPlot.
• Interactive ECharts
  The following code is for interactive charts made with eChart and should also be put in the Custom Footer. For more information, see Interactive ECharts.
  

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

Related documentation

See these resources for more information on how to use and customize the Chart Menu in Joget DX 8.

Available in Joget Marketplace:

• Candlestick Charting
• Tutorial App: Joget Workflow Charts (using jqPlots)

Download sample app