3 Replies Latest reply on Jun 13, 2018 2:06 PM by Shilpi Pauranik-Oracle

    Percent graph in IR/IG with 3 values ?

    Alex Hoefling-Oracle

      Does anyone know if there is an easy solution to display an Interactive Grid (or Report) column similar to type "Percent Graph", but with multiple values  (adding up to 100%) ?

      Something like a column type "stacked bar graph".

       

      I would like to show the percent distribution of a condition which can have 3 states.

       

      Thanks for any pointers.

        • 1. Re: Percent graph in IR/IG with 3 values ?
          fac586

          Alex Hoefling-Oracle wrote:

           

          Does anyone know if there is an easy solution to display an Interactive Grid (or Report) column similar to type "Percent Graph", but with multiple values (adding up to 100%) ?

          Something like a column type "stacked bar graph".

           

          I would like to show the percent distribution of a condition which can have 3 states.

          I have thought about various ways of approaching this, and ended up ruling most of them out.

           

          • The built-in APEX Percent Graph column type can't show multiple values, and attempts to derive something from this were inelegant and more complex than the alternatives.
          • The HTML meter element is also unsuitable for displaying multiple values.
          • There probably are jQuery suitable plug-ins available, but I don't consider it a good use of my time to go searching for third party components that I have no experience of using, considering that forum users should be able to research these for themselves.
          • It would be possible to create an APEX item plug-in (either from scratch or based on an existing jQuery plug-in), but this would only be usable in an interactive grid, not in an interactive or classic report.

           

          A simple—if not highly reusable—solution (demonstration) is to use an HTML Expression containing suitable mark-up to represent the values involved (I've used data elements: depending on the derivation of the values, output might be another possibility, or you could fall back to semantics-free spans) with some custom CSS to format it:

           

          IR column HTML Expression:

           

          <div class="pct-meter">
            <data class="sal u-color-5" value="#SAL_PCT#" style="width: #SAL_PCT#%" title="#SAL_PCT#%"><span class="u-VisuallyHidden">#SAL_PCT#%</span></data>
            <data class="comm u-color-7" value="#COMM_PCT#" style="width: #COMM_PCT#%" title="#COMM_PCT#%"><span class="u-VisuallyHidden">#COMM_PCT#%</span></data>
            <data class="pension u-color-9" value="#PENSION_PCT#" style="width: #PENSION_PCT#%" title="#PENSION_PCT#%"><span class="u-VisuallyHidden">#PENSION_PCT#%</span></data>
          </div>
          

           

          This uses built-in color utility classes from the Universal Theme to set the display colors for each metric, but these can easily be specified in the custom CSS.

           

          Change the #COL_ALIAS# references to &COL_ALIAS. when using an interactive grid (a serious reusability annoyance inflicted on us by Oracle).

           

           

          Page Inline CSS:

           

          /*
            Remuneration % comprising 3 values
          */
          .pct-meter {
            border-radius: 2px;
            height: 16px;
            background-color: #d9dee3;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset;
          }
          .pct-meter data {
            display: inline-block;
            float: left;
          }
          .pct-meter data::before {
            content: "\2008";
          }
          
          1 person found this helpful
          • 2. Re: Percent graph in IR/IG with 3 values ?
            Alex Hoefling-Oracle

            Thanks a lot for your help!!!
            Will need to play more with realy values in my dashboard, but did some tests and that seems to be working so far.

            • 3. Re: Percent graph in IR/IG with 3 values ?
              Shilpi Pauranik-Oracle

              I was looking for something similar. Your approach worked out well for me. Many thanks.

               

              Regards,

              Shilpi