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
6 Comments
Awesome post. You Post is very informative. Thanks for Sharing.
Oracle Training in Noida
Hi how do I do conditional coloring on this
Hello, yes it is possible by adding one more column in select query as a color name column. e.g. "#000000" in step 1. Then in step 2 add new attribute to div as data-color and value as #COLOR_NAME#. In step 5 – instead set the dynamic color using $(this).attr("data-color") in "fill" action. Hope that should do the job.
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)+'%');
});
I used this code but it's not working
$('.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)+'%');
});
Use following jQuery. It should work.
$('.round').each(function(){
var vColor = $(this).attr('data-color');
$(this).circleProgress({fill: {color: vColor}})
.on('circle-animation-progress', function(event, progress, stepValue){
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2)+'%');
});
});