9 Replies Latest reply on May 8, 2018 10:10 AM by fac586

    How to show value for percent graph in interactive grid ?

    Alex Hoefling-Oracle

      Hello

      I am trying to display the percent value next to the percent graph in an interactive grid. (App is hosted on apex.oraclecorp.com)

      In the configuration for type percent graph under "settings" I found an option which says "Show Value", however this does seem to have no influence.

      The graph shows up ok, but the value is not displayed.

       

      Any ideas or pointers to make this work ?

       

      Also, above "Show Value" seems only configurable for a percent graph in interactive grid. Any way to display the value next to a percent graph in an interactive report ?

       

      Thanks! -alex

        • 1. Re: How to show value for percent graph in interactive grid ?
          fac586

          Alex Hoefling-Oracle wrote:

           

          I am trying to display the percent value next to the percent graph in an interactive grid. (App is hosted on apex.oraclecorp.com)

          In the configuration for type percent graph under "settings" I found an option which says "Show Value", however this does seem to have no influence.

          The graph shows up ok, but the value is not displayed.

          That looks like a bug.

          Any ideas or pointers to make this work ?

           

          Also, above "Show Value" seems only configurable for a percent graph in interactive grid. Any way to display the value next to a percent graph in an interactive report ?

          The following CSS works for both IR and IG:

           

          .a-Report-percentChart {
            margin-left: 3em;
            overflow: visible;
          }
          .a-Report-percentChart .u-VisuallyHidden {
            position: static;
            float: left;
            margin: -1.25em -3.5em;
            height: auto;
            width: 3em;
            overflow: auto;
            clip: auto;
            text-align: right;
          }
          

           

          Add these rules to the page Inline CSS property to customise one page, or to the Custom CSS section in the Theme Roller to apply to the whole application.

          • 2. Re: How to show value for percent graph in interactive grid ?
            Pierre Yotti

            It should be something like here

            https://apex.oracle.com/pls/apex/f?p=123868:109

             

            I guess that it is a BUG in interactive grid.

            • 3. Re: How to show value for percent graph in interactive grid ?
              Alex Hoefling-Oracle

              Thanks a lot!! The CSS seems to do the trick.

              I've filed Bug 27978977 for this.

               

              Thank you.

              -alex

              • 4. Re: How to show value for percent graph in interactive grid ?
                Alex Hoefling-Oracle

                Thanks Alli. Are you using CSS properties suggested above ? What do you specify to write the values INSIDE the graph ? Tnx.

                • 5. Re: How to show value for percent graph in interactive grid ?
                  fac586

                  Alex Hoefling-Oracle wrote:

                   

                  Are you using CSS properties suggested above ? What do you specify to write the values INSIDE the graph ? Tnx.

                  No, it's using different CSS plus a dynamic action that is adding other content to the graph element. There are three problems evident with this:

                   

                  • The labels are all showing "10%" which is incorrect for the data in the report.
                  • The labels will be invisible or only partially visible for small data values.
                  • The labels will appear twice for visually impaired users accessing the application using screen readers or refreshable Braille displays. 
                  • 6. Re: How to show value for percent graph in interactive grid ?
                    Pierre Yotti

                    Hi,

                     

                    that was just a sample Demo to see you how it works. To make it works 100% fine and productive you can make it like so

                     

                    1- Add that Code on page Load

                     

                    $('.a-Report-percentChart .u-VisuallyHidden').each(function(a, b) {

                        $(this).parent().find(".a-Report-percentChart-fill").append("<span class='u-progress__label'>" + b.innerText + "</span>");

                        console.log($(this).parent())

                    })

                     

                    2- Add tha css in inline css

                    .u-progress__label{

                        float: right;

                        color: rgb(255, 255, 255);

                     

                    }

                     

                    .a-Report-percentChart-fill{

                        padding-left: 3rem;

                    }

                     

                    It look better.

                    Demo

                    https://apex.oracle.com/pls/apex/f?p=123868:109

                     

                    Like here too

                    https://www.jqueryscript.net/demo/Simple-Animated-Progress-Bar-with-jQuery-CSS3-asProgress/

                    • 7. Re: How to show value for percent graph in interactive grid ?
                      Pierre Yotti

                      That was just a simple Demo to show him how it should works

                       

                      • The labels are all showing "10%" which is incorrect for the data in the report.

                      that was a samle Demo

                      • The labels will be invisible or only partially visible for small data values.

                      We can make it visible with Css. Is not the problem

                       

                      • The labels will appear twice for visually impaired users accessing the application using screen readers or refreshable Braille displays.

                       

                      That is wrong

                      • 8. Re: How to show value for percent graph in interactive grid ?
                        fac586

                        Alli Pierre Yotti wrote:

                         

                        That was just a simple Demo to show him how it should works

                         

                        • The labels are all showing "10%" which is incorrect for the data in the report.

                        that was a samle Demo

                        • The labels will be invisible or only partially visible for small data values.

                        We can make it visible with Css. Is not the problem

                        It is a problem when it distorts the representation of the data, as it does here: percentage fills for small values are exaggerated in size in order to accommodate the text label.

                        • The labels will appear twice for visually impaired users accessing the application using screen readers or refreshable Braille displays.

                         

                        That is wrong

                        Unclear. Are you expressing agreement with the accessibility issue being a significant problem, or denying that it exists (it does: I checked using VoiceOver)?

                        • 9. Re: How to show value for percent graph in interactive grid ?
                          fac586

                          Alex Hoefling-Oracle wrote:

                           

                          What do you specify to write the values INSIDE the graph ?

                          There are obviously various ways to show the value labels, for example at the start or end of the graphical representation, or inside it.

                           

                          There several problems inherent in trying to display it inside the graph. While this saves space, there are issues in showing both the label and an accurate graphical representation of the value in a legible and accessible way. Trying to include the label inside the percentage fill as proposed above is not viable as there is insufficient space in the filled region to do so when the value is small. Extending the filled region to accommodate the label as shown in that implementation results in unacceptable distortion of the graphical visualization.

                           

                          Displaying the label centered within the graph ensures that it is always present, irrespective of the value being represented. The challenge is to render the label text so that it is visible against both the default graph background and the percentage fill colour. One possible solution to this applies the CSS invert() filter to the label, which (at least with the theme default colours) produces more or less legible results, although the contrast is too low for accessibility compliance.

                           

                          For accessibility and usability reasons, my preference would be to display the label at the start of the graph, where it is clearly legible, properly aligned, and easy to scan.

                          1 person found this helpful