Tuesday 9 January 2018

Modify OracleJET Property at Runtime in APEX

OracleJET has attributes galore, but some are are (not yet) available to change at design time, so JavaScript code can be added to the chart attributes to set relevant attributes.
function(options) {
options.styleDefaults.threeDEffect = "on";

return options;
}
See my previous post about modifying these attributes on render.
We can also do this at runtime, perhaps as response to a button click, such as the 2D/3D button in the cookbook.

First, set a static ID on the chart, possibly one of the most common "advanced" properties I use.

Static ID property available on many components

Use this ID in the browser console at runtime to see what JSON was generated for the chart definition.
Any missing properties will use the default specified in the documentation.
apex.widget.jet.getChartJSON('p95_skew')

Browser Console results

The documentation on these attributes is thorough, but I'd love some examples to help keep me moving.
http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html#styleDefaults.threeDEffect

We can modify the orientation property by supplying a name/value pair as a JSON string.
$("#p95_skew_jet").ojChart({'orientation': 'horizontal'});
Note the selector has is the static ID with a suffix: $("the_static_id"+"_jet")

It took a little while to find the correct punctuation for the nested properties, so this is really one of those blog posts I created so I don't forget. You've seen Alex's blog by-line, right?
$("#p95_skew_jet").ojChart({'styleDefaults':{'threeDEffect': 'off'}});
Not all runtime tweaks behaved as expected, however. The following property behaves as expected when setting on render, but at runtime it squishes the width of the entire chart.
$("#jet1").ojChart({'styleDefaults':{'barGapRatio': 0.2}});

Refreshing the chart region afterwards did not help in this case.
While looking for answers, I came across this post from Riaz describing similar customisations.

6 comments:

Roel said...

apex.widget.jet.getChartJSON('p95_skew') doesn't seem to work in APEX 5.2 (JET 4.1).
Any idea what the equivalent is in the newer version?

Hilary said...

Hi Roel,

The undocumented getChartJSON function was removed from 5.2, which is why it's not working for you on our 5.2 EA instance. We may reconsider reinstating it, but in the meantime, you can review the page source and inspect the call to apex.widget.jet, to see the options being defined for a given chart.

Regards,
Hilary

John Snyders said...

WRT getChartJSON what will work and continue to work is

apex.region("p95_skew").widget().ojChart("option");

There is a slight difference getChartJSON returns what is given to the APEX region where as ojChart("option") returns the options the JET widget is currently using. I think the latter is more desirable. This is also how you get access to other JET widget methods.
One more thing is that not all APEX charts use the ojChart widget; there is also ojDialGauge.
Regards,
-John

Scott Wesley said...

Thanks for all your feedback.
I forgot to note where/how I found getChartJSON, and neglected to mention it was undocumented.

I'll update the post later to be more future proof, thanks John.

Alan Arentsen said...

I'm using it like this now in a DA after refresh report and not fire on initialisation:

options = apex.region('p95_skew').widget().ojChart('option');

options.title.text = apex.item('P95_NAME').getValue() + " rest of title";
options.styleDefaults.pieInnerRadius = 0.5;

$('#p95_skew_jet').ojChart(options);

In this way you won't overwrite settings already done via the page designer. The code is not foolproof, if i.e. the title is not set in the page designer, the title element in the options object doesn't exist. So obviously you cannot set the text directly in that case.

Scott Wesley said...

Thanks for sharing!