Oracle APEX 23 Course For Beginners

Oracle APEX 23 Course For Beginners
Oracle APEX 23 Course For Beginners

Sunday 27 November 2022

How to Create Gantt Chart in Oracle APEX

A Gantt chart allows you to effectively plan your complex projects. It enables you to plan all of your tasks in one place and helps you work out the minimum delivery time for your project and schedule when the right people are available to complete it. Gantt chart starts by listing all the tasks you need to complete to finish your project. You also need to specify the earliest date you can start each activity, how long you think each will take and whether any of them are dependent on the completion of other activities.

Data Workshop

To understand the functionality of this chart, you need to create a table and populate it with relevant data. For this purpose, you will use Oracle APEX's Data Workshop utility. The Data Workshop utility located under SQL Workshop enables you to load and unload text, DDL, and spreadsheet data to and from the database. You can load or unload XML files or delimited-field text files (such as comma-delimited (.csv) or tab-delimited files). You can also load data by copying and pasting from a spreadsheet. During loading and unloading process you can skip columns you do not need in your table. The utility allows you to load data into an existing table or create a new table from the loaded data. When loading into a new table, column names can be taken from the loaded data. Each time you load data from a file, file details are saved in a Text Data Load Repository. You can access these files from within the repository at any time.

Note that the wizards load and unload table data only, they do not load or unload other kinds of schema objects.

Download the scripts used in this exercise.

Execute the following steps to create a new table and load it with relevant data from a csv file.

 

1.   Create a table named Project_Table using Project_Table.sql script provided in the book code. Open SQL Workshop | SQL Commands (A). Copy and then paste the CREATE TABLE statement from the script file (Project_Table.sql) into the command area (B), and then click the Run button (C), as shown in the following screen shot.



























2.   Click SQL Workshop | Utilities | Data Workshop to access the Data Load/Unload page.


















3.     On the Data Workshop page, click the Load Data button.

 

4.     On the Load Data page, select the Upload a File tab, and click the Choose File button. In the Open dialog box, select Project_Table.csv file from downloaded folder, and click Open.

 

5.     On the next screen, click the Existing Table option (A), select the PROJECT_TABLE (B), and click the Load Data button (C). The database column names and columns in the data can be viewed in the Preview section.




















If everything goes well, the next screen appears with the message "Data in table PROJECT_TABLE appended with 73 new rows!". Click the View Table button at the bottom to complete the process.


Create Gantt Chart


Execute the following instructions to create a new page for the Gantt Chart:

 

1.     Click Create Page  in the main App Builder interface.

 

2.     Click the Chart option.

 

3.     On Chart Type screen, choose Gantt.

 

4.     Fill in the next couple of screens as follows and then click Next.













5.     On the Source screen, choose SQL Query for Source Type, and enter the following query in the SQL Query box. Click Next to proceed.

 

SELECT      task_name task_name,

  id task_id,

  start_date task_start_date,

  end_date task_end_date,

  decode(status,'Closed',1,'Open',0.6,'On-Hold',0.1,'Pending',0) status,

  (select min(start_date) -5 from project_table) gantt_start_date,

  (select max(end_date) from project_table)  gantt_end_date

FROM        project_table

ORDER BY id ASC

 

6.     Fill in the Column Mapping screen as illustrated in the following figure:






















The following table provides details of the parameters:

 

Start Date Column

Select the column name to be used for defining the start date of the Gantt chart.

End Date Column

Select the column name to be used for defining the end date of the Gantt chart.

Task ID

Select the column name to be used for defining the task ID on the Gantt chart.

Task Name

Select the column name to be used for defining the task name on the Gantt chart.

Task Start Date

Select the column name to be used for defining the task start date on the Gantt chart.

Task End Date

Select the column name to be used for defining the task end date on the Gantt chart.

 

7.     Click Create to complete the page creation process.


8.     In Page Designer, click on Series 1 and set Progress (under Column Mapping) to Status. The Status column defines the task progress on the Gantt chart.

 

9.     Click Save and Run page button to test your work.

 

Press and hold the Ctrl key, and move the mouse wheel upward to enable the zoom buttons (A). Keep clicking the Zoom Out icon unless it is grayed out. The Gantt chart, as illustrated in the following screenshot, displays the overall progress of a project. Same-day tasks are shown in diamond shapes, completed tasks are represented in dark blue, while remaining tasks are displayed in light blue colors. Hovering the mouse pointer over a bar shows details of that particular task.




















Display Data Dynamically In A Gauge Chart

In this tutorial, we will learn how to display customer's ordered data in a gauge chart dynamically. As you choose a customer name from ...