Chart Using PL/SQL Dynamic Content

How to Create Chart Using PL/SQL Dynamic Content

1: first Create Region with PL/SQL Dynamic Content Type

2: Add this Code

declare
    l_cnt              integer := 0;
    max_bars           integer := 16;
    l_total_bars       integer := 0;
    l_start            integer := 1;
    l_display_cnt      integer := 0;
    l_max_bar_sz       number  := 0;
    l_numeric_title    varchar2(255) := 'Customer Categories';
begin

-- determine how many bars exist
    for c1 in (
    select count(*) c
    from (
       select to_char(CREATED,'YYYY.MM') m
       from EBA_CUST_CATEGORIES t
       where IS_ACTIVE = 'Y'
       group by to_char(CREATED,'YYYY.MM')
       )
)
  loop
        l_total_bars := c1.c;
    end loop;

    -- calculate how many to show
    l_start := l_total_bars - max_bars;
    l_start := greatest(l_start,1);

    if l_total_bars > 0 then
        sys.htp.prn('<ul class="barGraph">');
        sys.htp.prn('<li class="barHeaders">');
        sys.htp.prn('<label><span></span></label>');
        sys.htp.prn('<big></big>');
        sys.htp.prn('<span class="noBorder"><strong>'||sys.htf.escape_sc(l_numeric_title)||'</strong></span>');
        sys.htp.prn('</li>');

        -- figure out maximum size of a bar within the window of displayed bars
        l_cnt := 0;
        l_max_bar_sz := 0;
        for c1 in 
          ( select to_char(CREATED,'YYYY.MON') m ,count(*) s
  from EBA_CUST_CATEGORIES t
       where IS_ACTIVE = 'Y'
            group by to_char(CREATED,'YYYY.MON')
           )
        loop
            l_cnt := l_cnt+1;

            if l_cnt >= l_start then
               if c1.s > l_max_bar_sz 
               then
                  l_max_bar_sz := c1.s;
               end if;
            end if;
        end loop;

        -- display chart
        l_cnt := 0;
        for c1 in 
          ( select to_char(CREATED,'YYYY.MON') m , count(*) c
            from EBA_CUST_CATEGORIES t
            where IS_ACTIVE = 'Y'
            group by to_char(CREATED,'YYYY.MON')
            order by 1
          )
        loop
        l_cnt := l_cnt+1;

        if l_cnt >= l_start then
            l_display_cnt := l_display_cnt + 1;
            sys.htp.prn('<li>');
            sys.htp.prn('<label><span>'||substr(c1.m,1,4)||'</span> '||substr(c1.m,6)||'</label>');
            sys.htp.prn('<big><small style="height: '||to_char(round((c1.c/l_max_bar_sz)*100))||'%"></small></big>');
            sys.htp.prn('<span class="noBorder">'||trim(to_char(c1.c,'999G999G999G999G999G990'))||'</span>');
            sys.htp.prn('</li>');
        end if;

        if l_display_cnt > max_bars then
            exit;
        end if;

        end loop;
        sys.htp.prn('</ul>');
    end if;


htp.p(' 
<style>
ul.barGraph
      {
      margin:12px !important;
      list-style:none;
      white-space:nowrap
      }
ul.barGraph li
      {
      display:inline-block;
      width:48px
      }
ul.barGraph li:hover big small
      {
      background-color:#4A6D98
      }
ul.barGraph li.barHeaders
      {
      width:128px
      }
ul.barGraph li.barHeaders > span
      {
      text-align:left
      }
ul.barGraph li > label{
      display:block;
      font:normal 11px/12px Arial,sans-serif;
      color:#444;
      text-align:center
      }
ul.barGraph li > label span
      {
      display:block;
      font:normal 11px/12px Arial,sans-serif;
      color:#767676
      }
ul.barGraph li > big
      {
      height:120px;
      margin:8px;
      position:relative;
      display:block
      }
ul.barGraph li > big > small
      {
      display:block;
      position:absolute;
      bottom:0;
      width:30px;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;
      border-radius:4px;
      background-color:#6A9CDA;
      -moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
      -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
      box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
      border:1px solid #4A6D98
      }
ul.barGraph li > span
      {
      display:block;
      text-align:center;
      font:normal 11px/16px Arial,sans-serif;
      color:#444;
      border-top:1px solid #F0F0F0;
      padding:8px
      }
ul.barGraph li > span.noBorder
      {
      border-top:none;
      padding-top:0
      }
ul.barGraph li > span a
      {
      color:##405580
      }
</style>
');
end;

---

Demo
Sample App
user:demo
Pass:demo1234