Forum Stats

  • 3,827,089 Users
  • 2,260,740 Discussions
  • 7,897,163 Comments

Discussions

Avoid rescaling height of a horizontal Bar Chart (Oracle Jet) in APEX

Meeuwtje
Meeuwtje Member Posts: 19 Blue Ribbon
edited Dec 5, 2018 9:16AM in APEX Discussions

Is there a way to avoid the rescaling of the height of the rows of a horizontal Bar chart using Oracle Jet in APEX?

For instance a Chart with 10 rows looks fine:

pastedImage_0.png

But a chart with 3 rows shows too much space between the bars:

pastedImage_1.png

I have set the bar width to a fixed value using:

function( options ) //takes options

{

  options.styleDefaults.barGapRatio = 0; //gap between bars

  options.styleDefaults.maxBarWidth = 25;

  return options;  //return set options

The height for the chart region is also fixed. If I leave the height of the chart empty, it will be set to a default size and this doesn't help.

The APEX document describes that the Z value defines the bar width for a bar. But this does not work either.

Would it be possible to change the height of the graph depending on the number of rows or would it be possible to set the space between the bars to fixed value or disable the scaling?

Here is an example:

https://apex.oracle.com/pls/apex/f?p=56486:9:118273757021565:::::

demo/demo1234

Answers

  • Meeuwtje
    Meeuwtje Member Posts: 19 Blue Ribbon
    edited Dec 5, 2018 9:16AM

    It was too complicated for me to solve it using the ojChart javascript settings.
    In this case the only option is to define the height before the rescaling happens.

    For my case I went back not to use Oracle Jet, but use a manually defined "percent graph" column in a classic report.

    Ted Struik gave me an good example:
    https://tedstruik-oracle.nl/ords/f?p=25384:1069:0::NO:::

    Just define the div elements in the query (or put in a package function).
    Have the column as plain text and set the "Escape Special Characters" to No.

    The div elements looks like:

    '<div class="a-Report-percentChart" style="background-color:#CCCECE;width:100%;">'||

       '<span class="hidden">' || to_char(your_column_value,'000000000000000') ||'</span>'||                  -- Needed for sorting the column

       '<div class="a-Report-percentChart-fill" style="width:' || round((your_column_value / max_your_column_value) * 100) || -- The width percentage creates the bar length

                                                      '%; text-align: right; ' ||

       case    -- If the length of number does not fit in bar, move it next to the bar.

         when   ((your_column_value / max_your_column_value) * 448) <  (to_number(length(your_column_value)) * 7)

         then   -- Depending on a value (for instance your_column_value) you can have different colors

           'padding-left:' || round ((your_column_value / max_your_column_value) * 448) || 'px; '||

           case

             when some_value >= constant_green_color_value then 'background-color:#51b434; '

             when some_value >= constant_orange_color_value then 'background-color:#FFAE02; '

             when some_value >= constant_red_color_value then 'background-color:#b12b2f; '

             else '#c2c4c4; '

           end|| '">'||to_char(your_column_value,'999G999G999G999G990')

         else    -- Show your column value in the bar (if the background color is dark, use a white color for the text. Otherwise black. 

           'padding-right:6px; '||

           case

             when some_value >= constant_green_color_value then 'background-color:#51b434; color:#fff; '

             when some_value >= constant_orange_color_value then 'background-color:#FFAE02; '

             when some_value >= constant_red_color_value then 'background-color:#b12b2f; color:#fff; '

             else '#c2c4c4; '

         end|| '">'||to_char(your_column_value,'999G999G999G999G990')

       end ||   

       '</div>'|| -- Don't know why this span is needed, but APEX generates it when you use a normal percent graph item type

       '<span class="u-VisuallyHidden">' || your_column_value ||'</span>'||

    '</div>'

    This results into:

    pastedImage_3.png

    No matter how many rows the report shows, the size of the bar widths will stay the same.