Versions Compared

Key

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

...

Chart Menu Properties

Configure Chart Menu

Image Modified

Figure 1: Edit Chart Properties


ID element unique id. Userview will use this id in the URL for the menu if the Custom ID is empty.
NameDescription
LabelMenu label. Mandatory field.
Menu Custom ID

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

LabelMenu label. Mandatory field.
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 RemovedImage Added

Figure 22b: SQL Chart Properties - Default Datasource

NameDescription
Datasource

Select the datasource for the chart.

  • Using Data Binder
  • Using List
  • Default Datasource
  • Custom Datasource
    Data Binder
      • Image Added

        Figure 2a: SQL Chart Properties - Custom Datasource

         
    • Load Data From
      • Image Added

        Figure 2b: SQL Chart Properties - Load Data From

    • Using List
      • Image Added

        Figure 2c: SQL Chart Properties - Using List

    When Datasource is set to "Using Data Binder", this option will show up. Advance Form Data Binder has more flexible ways to build chart datasets using join, group, and aggregate function. Please see Datalist Binder for the available binder to use.
    SQL Query

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

    Image Added 

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

    Image Modified

    Figure 3: Data Binder & Chart Data Mapping Properties


    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.
    Add Row

    Chart Options Properties

    Image Modified

    Figure 4: Chart Options

    ...

    NameDescription
    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.
    Width 

    Width in character, for example 100%.

    Height 

    Height in character, example 300px.

    Colors

    Series color. Optional field.

    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

    Advanced Properties

    Image Modified

    Figure 5: Advanced Properties

    ...