jQuery Circular Progress Bar - Pie Chart

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
from(
select DEPTNO,
       DNAME,
       LOC,
       (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"
          data-value="#CIRCULAR_VAL#"
          data-size="70"
          data-thickness="6">
    <strong></strong>
    <span>#DNAME#</span>
</div>

3. Add following to Page > JavaScript > File URLs section.

https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.0/circle-progress.min.js

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){
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2)+'%');
});  

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.

Thanks,
Jaydip Bosamiya
jbosamiya@gmail.com

Comments

  1. I tried something like this but it doesnt seem to work
    $('.round').circleProgress({fill: {color:
    $(this).attr("data-color")}})
    .on('circle-animation-progress', function(event, progress, stepValue){
    $(this).find('strong').text(String(stepValue.toFixed(2)).substr(2)+'%');
    });

    ReplyDelete

Post a Comment

My photo
Jaydip Bosamiya
I am Oracle APEX Consultant, Blogger and Integrator. All-rounder in building small, medium and enterprise applications. Extensive knowledge in various area of web-driven applications in Back-end (PL/SQL, SQL, Java), Front-end (Oracle APEX, HTML, JavaScript, CSS, jQuery, OracleJET, ReactJS), RESTful APIs, Third-party library integrations (Apex Office Print (AOP), Payment Gateways, Syncfusion, HighCharts) and APEX Plugins (HighChart, StarRating)

Popular posts from this blog

Oracle APEX - Interactive Report - Scrollbars on Top

How to create your own customized nested report regions using jQuery

Oracle APEX - Build Your Own Enhanced Nested Report