Sergio's Blog

Another post from the archives...

HTML Expressions is a feature in the Application Express reporting engine that lets you apply an HTML mask to a column value in a report. In the HTML Expression, you refer to the column value using #COLUMN_NAME#. Recently, I saw this used to create neat inline bar charts like the one below:

To create this example, I used the following query based on the Issue Tracker data model:

select pname, 
       cnt_issues,
       ratio_to_report (cnt_issues) over () * 100 issues_chart,
       round (ratio_to_report (cnt_issues) over () * 100, 1) issues_ratio
  from (
select p.person_name pname, count(*) cnt_issues 
  from ht_issues i, ht_people p
 where i.assigned_to = p.person_id
 group by p.person_name
  )

I then edited the column attritbues for the ISSUES_CHART column and placed the following HTML in the the HTML Expression field:

<div style="width:100px;height:14px;background:#dddddd;
border-top:1px solid #aaaaaa;border-left:1px solid #aaaaaa;
border-bottom:1px solid #ffffff;border-right:1px solid #ffffff;">
<img src="/i/1px_trans.gif" width="#ISSUES_CHART#" height="14" border="0" style="background:#3f863f;"></div>

In this HTML with CSS style declarations, the width:100px in the beginning controls the maximum length in pixels of each bar in the chart and background:#dddddd makes the background grey. The width="#ISSUES_CHART#" controls the actual length of the green part of the bar by using the value of issues_chart from the result set.