DevOps, CI/CD and Automation

Hello,

Using APEX 5.1.4 with JQuery 2.2.3, I'm trying to implement an combination jet chart and format the tick labels and the titles. Basic font manipulation and bolding etc. I believe my series and axis attributes are set in a basic way and I can not find any 'CSS Classes' like attributes to manipulate the tick labels or titles. Bottom line, I'm looking for a way to format the titles and labels using Advanced Javascript functionality. The oj-chart documentation makes this look doable and I'm probably missing something basic here.

Thanks for taking time to look at this. Dave

My chart.

Using Hilary's example (https://apex.oracle.com/pls/apex/f?p=36648:165:) as a guide, I've added javascript as the listed example to my function( options ){....) code.

I've added this verbatim:

options.xAxis.tickLabel = {

style: { fontStyle:"italic",color:"#6070C7",fontSize:"15px" }};

I've also varied it using as indicated by oj-chart:

options.xAxis.tickLabel.style = { fontStyle:"italic",color:"#6070C7",fontSize:"15px" };

And used some other variations too.

I get this error:

13:20:28.455 ojdvt-base.js:15 Uncaught TypeError: v.indexOf is not a function

at Object.vja (ojdvt-base.js:15)

at Object.iqa (ojdvt-base.js:15)

at t.(/prod/anonymous function).(anonymous function).jA ([https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/oj/v2.0.2/min/ojdvt-base.js:19:135](https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/oj/v2.0.2/min/ojdvt-base.js:19:135))

at t.(/prod/anonymous function).(anonymous function).jA ([https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/jquery/jqueryui-amd-1.11.4.min/widget.js:4:1032](https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/jquery/jqueryui-amd-1.11.4.min/widget.js:4:1032))

at t.(/prod/anonymous function).(anonymous function).t ([https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/jquery/jqueryui-amd-1.11.4.min/widget.js:4:857](https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/jquery/jqueryui-amd-1.11.4.min/widget.js:4:857))

at t.(/prod/anonymous function).(anonymous function).jA ([https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/oj/v2.0.2/min/ojchart.js:12:439](https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/oj/v2.0.2/min/ojchart.js:12:439))

at t.(/prod/anonymous function).(anonymous function).jA ([https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/jquery/jqueryui-amd-1.11.4.min/widget.js:4:1032](https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/jquery/jqueryui-amd-1.11.4.min/widget.js:4:1032))

at t.(/prod/anonymous function).(anonymous function).yf ([https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/oj/v2.0.2/min/ojdvt-base.js:27:236](https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/oj/v2.0.2/min/ojdvt-base.js:27:236))

at t.(/prod/anonymous function).(anonymous function).yf ([https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/jquery/jqueryui-amd-1.11.4.min/widget.js:4:1032](https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/jquery/jqueryui-amd-1.11.4.min/widget.js:4:1032))

at t.(/prod/anonymous function).(anonymous function).rf ([https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/oj/v2.0.2/min/ojdvt-base.js:18:188](https://snsapp1.sns.ornl.gov/i/libraries/oraclejet/2.0.2/js/libs/oj/v2.0.2/min/ojdvt-base.js:18:188))

My complete javascript function is this:

function( options ){

//some jet overall references

//[https://docs.oracle.com/en/middleware/jet/4.2.0/reference-api/oj.ojChart.html#ChartSeries](https://docs.oracle.com/en/middleware/jet/4.2.0/reference-api/oj.ojChart.html#ChartSeries)

// or [https://apex.oracle.com/pls/apex/f?p=36648:1](https://apex.oracle.com/pls/apex/f?p=36648:1)

// chart colors

var myColors = \["red","blue","green","yellow", "orange"\];

// Setup a callback function which gets called when data is retrieved, it allows to manipulate the series

options.dataFilter = function( data ) {

    for (i = 0; i \< data.series.length; i++) {

        // Set color for ledgend

        data.series\[ i \].color = myColors \[ i \];

    }

    // formatting series attributes

    data.series\[ 0 \].borderWidth = 0;

    data.series\[ 1 \].borderWidth = 0;

    data.series\[ 0 \].markerShape = "circle";

    data.series\[ 1 \].markerShape = "square";

    data.series\[ 0 \].markerColor = "red";

    data.series\[ 1 \].markerColor = "blue";

    data.series\[ 0 \].borderColor = "red";

    data.series\[ 1 \].borderColor = "blue";

    data.series\[ 0 \].markerSize = 3;

    data.series\[ 1 \].markerSize = 3;

    return data;

};

// plotArea options. 

options.plotArea = { borderWidth : 50 };

// added only to prove ticklabel option worked in general

options.y2Axis.tickLabel.rendered = "on";

//used to move the overview area away from bottom of chart.

options.xAxis.size = "50px";

// This block of code is the issue. Causes the error. ----

options.xAxis.tickLabel.style = { fontStyle:"italic",color:"#6070C7",fontSize:"15px" } ;

options.yAxis.tickLabel.style = {  fontStyle:"italic",color:"red",fontSize:"15px" };

options.y2Axis.tickLabel.style = {  fontStyle:"italic",color:"blue",fontSize:"15px" };

options.y2Axis.titleStyle.style = { color:"black",fontSize:"18px" };

options.yAxis.titleStyle.style = { color:"black",fontSize:"20px" };

options.xAxis.titleStyle = { color:"black",fontSize:"20px" };

// End of problem -------------

    // Toggle Series set up.

// Choose to hide 1st category

var hiddenCategories = \["Accumulated Energy"\];

// Set 'hiddenCategories' attribute

options.hiddenCategories = hiddenCategories;

return options;

}