July 21, 2019 APEX, jQuery, Oracle 6 Comments

I have came across following URL – which shows how simply you can create jQuery Circular Progress Bar.

Based on provided information on above link, I have tried to implement same in Oracle APEX – Classic Report. I am sure we can integrate same in Interactive Report, List Regions or Regions with Dynamic PL/SQL.

Following are the steps to build Pie chart kind information to show how many percentage of employees belongs to each of the department.
1. Create new classic report region with following query.

select deptno, dname, loc, round((emp_cnt/emp_tot),2) circular_val
select DEPTNO,
       (select count(1) from emp e where e.deptno = d.deptno) emp_cnt,
       (select count(1) from emp) emp_tot
  from DEPT d)
2. Now, change circular_val column and add following HTML code in HTML expression section.
<div class=”round”
3. Add following to Page > JavaScript > File URLs section.
4. Add following CSS to Page > CSS > Inline section.
.round {
  min-height: 75px;
  margin-top: 30px;
  position: relative;
  margin-bottom: 20px;
.round strong {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  transform: translate(-50%);
  font-size: 20px;
  color: #212121;
  font-weight: 100;
.round span {
  display: block;
  color: #999;
  font-size: 16px;
  margin-top: 10px;
.round span i {
  color: #ff5c5c;
  font-size: 22px;
  margin-right: 6px;
5. Create new dynamic action – on page load and add following JavaScript code.
$(‘.round’).circleProgress({fill: {color: ‘#ff5c5c’}})
    .on(‘circle-animation-progress’, function(event, progress, stepValue){
6. That’s it. See the result. 🙂
You may similarly change the Classic report’s template to Card template and adjust the query and CSS.
Hope this helps.
Jaydip Bosamiya
Written by Jaydip Bosamiya