Description:

APEX can create “Percentage Bars” within a report. This can be achieved using HTML Code in your Report SQL Query.

Steps:

1- Create your report:

Create an Interactive or Classic Report using SQL query :

SELECT CASE

WHEN COLUMN <= 30

THEN    ‘<div class=”a-Report-percentChart” style=”background-color:#000000;width:100%;”><div class=”a-Report-percentChart-fill” style=”width:’

|| COLUMN

|| ‘% ; background-color: 330099;”></div><span class=”u-VisuallyHidden”>’

|| COLUMN

|| ‘</span></div>’

|| COLUMN

|| ‘%’

WHEN COLUMN BETWEEN 30 AND 50

THEN    ‘<div class=”a-Report-percentChart” style=”background-color:#000000;width:100%;”><div class=”a-Report-percentChart-fill” style=”width:’

|| COLUMN

|| ‘% ; background-color:CC0000;”></div><span class=”u-VisuallyHidden”>’

|| COLUMN

|| ‘</span></div>’

|| COLUMN

|| ‘%’

WHEN COLUMN BETWEEN 55 AND 70

THEN    ‘<div class=”a-Report-percentChart” style=”background-color:#000000;width:100%;”><div class=”a-Report-percentChart-fill” style=”width:’

|| COLUMN

|| ‘% ; background-color:#99eb47;”></div><span class=”u-VisuallyHidden”>’

|| COLUMN

|| ‘</span></div>’

|| COLUMN

|| ‘%’

END AS “Progress bar”

FROM Table

Note: 

Ø Use CASE Statement to display different colors for the bars based on percentage.

Ø Value of the Column apex_util.html_pct_graph_mask must be between 0 and 100.

2-Set the Report Bar column to Standard Report Column

3-Output:

In this report, we’re using the employee’s percentage of salary within their department

Note: If you want the same color for the bar, then use the same query without Case Statements.

Summary:

In the above report, APEX5 to create the HTML code in the following data.

queries?

Do drop a note by writing us at contact@doyensys.com or use the comment section below to ask your questions.

Share this post
Recent Posts

Leave a Comment

Start typing and press Enter to search