Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Please ask technical questions in the appropriate category. Thank you!

OJ-Chart dynamic y-Axis label (Callback function?)

Jegor WielerJun 29 2023

Hello everyone,
I need help to work with OJCHART in APEX and would like to learn more about it. My requirement is, that the X-axis label will be set dynamically.

Example: There are an option group with 2 entries, “Fallzahlen” and “Gesamtkosten”, which I can switch.


In addition there is a chart, depending on what I select with the buttons, the X-axis title should will be changed.

If I select “Fallzahlen”, the axis label should be “Fallzahlen [Anzahl]”,

If I select “Gesamtkosten”, the axis label should be "Gesamtkosten [€]".

There is already a solution and i do it via a dynamic Action after refreshing the region of the chart. If the Chart would be refreshed, the DA execute the following JavaScript function.

function formatGraph(staticID, item){
	switch(item){
		case 'gesamtkosten':
		case 'kosten':
		case 'kostenabsolut':
		var c = new oj.IntlNumberConverter({currency: "EUR", style: 'currency', maximumFractionDigits: 0})
		apex.region(staticID).widget().ojChart({
		valueFormats: {label: { converter: c, scaling: 'none'} , value: { converter: c, scaling: 'none'}}, 
		yAxis: { 
		title: ("Gesamtkosten [€]")
		}
		});
		break;

	case 'fallzahlen':
	case 'faelle':
	case 'fallabsolut':
		var c = new oj.IntlNumberConverter({style: 'decimal', maximumFractionDigits: 0 }) 
		apex.region(staticID).widget().ojChart({ 
		valueFormats: {label: { converter: c, scaling: 'none'} , value: { converter: c, scaling: 'none'}}, 
		yAxis: { 
		title: ("Fallzahlen [Anzahl]")
		}
		}); 
		break;

	case 'fallrelativ':
		apex.region(staticID).widget().ojChart({yAxis: {title: ("Fallzahlen [%]")}});
	break;

	case 'kostenrelativ':
		apex.region(staticID).widget().ojChart({yAxis: {title: ("Gesamtkosten [%]")}});
	break;
}

But I would like to be able to execute the whole thing via a callback function and put the Code in the
initialization Section of the Chart Region.

In Chart.js for example I can add a callback function to set chart properties dynamically. The following Chart.js snipe will change the tooltip-label based on dataset input parameters.

const config = {
       type: 'bar',
       data,
       options: {
           scales: {
               y: {
                   position: 'left',
                   grace: '20%',
                   beginAtZero: true
               }
           }
        },
           plugins: {
               tooltip: {
                   callbacks: {
                       label: function(tooltipItem, data){
                           const v = myChart.data.datasets[tooltipItem.datasetIndex].data[tooltipItem.dataIndex];
                           return Array.isArray(v) ? (v[1] + v[0]) / 2 : v;
                       }
                   }
               },
               ...

I hope you can understand what I want to do. :)
Does anyone have experience with ojchart and knows, how i can implement some callback function in the
initialization section?

I would be very grateful for any advice!

Oracle Apex Version: 22.2
Best Regards
Jegor

This post has been answered by Hilary Farrell-Oracle on Jun 30 2023
Jump to Answer
Comments
Post Details
Added on Jun 29 2023
10 comments
373 views