How to locate the chart series using static ID in Oracle Apex?

Question

I am using Oracle Apex to build a web application now, and I want to use Javascript to add a style class to a chart series after click one button. According to Add filters to Interactive Grid via Javascript, I knew that the region can be find via static id and manipulated. Therefore, I give a static ID to the chart series, and I wonder how can I locate the chart series, and add a style css to the chart using Javascript in Dynamic Action.

Update:

Based on the Sample Charts (Area) example, I created a button called change color, and define a dynamic action which will be triggered when the button is clicked. The true action is to execute the Javascript code, which is listed as below:

    $(function( options ) {

    // Setup a callback function which gets called when data is retrieved, to manipulate the series data
    options.dataFilter = function( data ) {
        data.series[ 0 ].color = "#90ee90";
        return data;
    };

    return options;
});

After the execution of the Javascript, the data.series[0] should be changed to green color. However, nothing happened after the execution.

Dan McGhan Dan McGhan · Accepted Answer · 2019-11-22T16:27:14

You should use JavaScript, not CSS... Log into your APEX Workspace, click the App Gallary tab, then install the Sample Charts app. When the install completes, click Run. Log in to the app, click Area in the navigation menu, then select the Area Chart Color (JavaScript Code Customization) tab. That's probably the best place for you to start.

Go to edit the page, select the Attributes for the Area Chart (Color JavaScript Code Customization) region, then scroll down to Advanced > JavaScript Initialization Code. There, you'll see this code:

function( options ) {

    // Setup a callback function which gets called when data is retrieved, to manipulate the series data
    options.dataFilter = function( data ) {

        data.series[ 0 ].color = "#ED6647";
        data.series[ 0 ].borderColor = "#0F3248";
        data.series[ 0 ].markerDisplayed = "on";
        data.series[ 0 ].markerShape = "plus";
        data.series[ 0 ].markerColor = "red";
        data.series[ 0 ].markerSize = 8;
        data.series[ 0 ].pattern = "smallChecker";
        return data;
    };

    return options;
}

See the JET API doc to learn more about the options for a series: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChartSeries.html

If you're trying to change the color after initialization, then you'll need to use the option method to get an array of the series. From there, you can update the color property of the series you want and then invoke the refresh method to update the DOM.

var series = apex.region("area1").widget().ojChart('option', 'series');

series[0].color = '#ED6647';

apex.region("area1").widget().ojChart('refresh');

How to locate the chart series using static ID in Oracle Apex?

1 Answers