View on GitHub

Wizard and Experts

On this page

Charts

Create beautiful charts for your dashboard and other pages using Quickappz’s implementation of the open-source library Chart.js.

  • Chart Type: Select the type of chart you require from the dropdown.
  • Select Tables: Select one or more tables as per your requirement to populate the charts.
  • Relationships: Establish the database relationship between the required tables.

Steps to Establish Relationships:

  1. Click on the button 'Relationships'.
  2. Select the required fields from your selected tables (e.g., Employees & Departments) to equate them together, similar to a SQL WHERE clause.
  3. WHERE Table1.Column_Name = Table2.Column_Name
  4. Click on the 'Add Link' button to add the database link or 'Remove Link' to delete an existing link, then click 'OK' once done.

Note: If you have selected multiple tables for your charts and yet accidentally forgot to add the relationships, upon clicking Next, you are presented with the Relationships modal by default, as charts cannot be created with different tables’ data without establishing the relationship between them.

Chart Configuration Steps:

  1. Click "Next" to proceed to the next step.
  2. Configure which fields’ data you want to plot the chart against by selecting valid fields under the dropdowns for X-Axis & Y-Axis Columns. These are mandatory fields.
  3. Optionally, input values for Dataset Label and Title. Title is the text displayed under the charts, and Dataset Label is a label attached to your chart.
  4. Click "Next" to move to the next step.
  5. Configure any additional data manipulation and transformation you wish to apply to the data for the charts.
    • For single table selection, only the X-Axis Column has an editable dropdown that allows you to select the field name or apply the Count aggregate function to the table's field.
    • For multiple tables, both the X-Axis & Y-Axis Columns have editable dropdowns that allow you to select the respective field names or apply the Count aggregate function on the X-Axis Column AND all other aggregate functions on the Y-Axis Column.
  6. Optionally, add a Where Clause by entering text directly in the text bar or clicking the "Set" button to open a modal.
    • Select your required field name(s) from the table(s) you selected in the first step.
    • Choose from available operators supported by MySQL.
    • Input your criteria's value and click "Add" to add the created WHERE condition.
    • You can add multiple WHERE clauses separated by AND/OR operators.

Caveats of Where Clause Modal:

  • When you select any comparison operators under the Operator dropdown (except is null and is not null), you HAVE TO enter a valid value in the Value text bar, otherwise the interface creates such a WHERE clause: WHERE Table.Column_Name = '?' .
  • In case of is null and is not null operators, you don’t have to type anything in the Value text bar. Even if you add something and click on Add, the value entered under the Value text bar won’t be added to the condition.
  • Even though having contradicting WHERE clauses would just return NO data (0 records), you are not restricted from adding such clauses, such as: departments.Department_Name is null AND departments.Department_Name is not null

Group By Clause:

A Group by dropdown that has the value None by default but can be dropped down to select a SQL Group By column from the list of tables selected in the first step.

Choose a SQL Group By column from the list of tables selected in the first step. A Group By clause is incomplete without the Having clause, which accepts values in the same way as the Where Clause field.

Final Step:

Click "Next" to proceed to the final step of the Chart Design Wizard. Here, you'll find the SQL query listing, as per your inputs provided in the previous steps. The query will be used to fetch the required data from the database to plot the required chart. The SQL query is editable, allowing customization if needed.

Click "Submit" to view your chart created on the page.