Skip to Main Content
Forums

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

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

MeeuwtjeNov 29 2018 — edited Dec 5 2018

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

Comments

Meeuwtje

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.

1 - 1

Post Details

Added on Nov 29 2018
#apex-discussions
1 comment
783 views