Taking your APEX JET charts style to the next level

Introduction & helpful links

In the following blog post I will try to explain the options you have to modify your APEX JET powered charts. There are different ways to change certain parts of them, some are easier and straight forward, others require more complex approach and writing some Javascript and CSS. In the first part, I will go through the basic settings available in APEX as declarative options. The second part will include modification of the JavaScript Initialization Code of our Chart region.

Notes

  • I would recommend that you always check the APEX built-in help first. It is available in the middle section of your Page Desiner, under the Help tab. Once you click any element of the Page Designer, a help text is displayed in the Help section. In most cases it will be fully enough for you to understand what are you options for the selected element and what each one of them mean.
  • Next place to go when you need to know more about certain APEX functionality is the APEX Documentation. Here is a LINK to the Charts Section for version 20.2. My observations are that it is almost the same content as the built-in help on charts, but in any case it is worth checking it.
  • Check this APEX Sample Charts application. There are samples with all of the charts types you can use in APEX. What’s cool here is that many of the examples have explanation and source code included.
  • Speaking about charts, and especially JET charts, the next place to go if you want to utilize their full power is the JET Cookbook with tons of examples and JET Documentation. Now, since Oracle JET has a lot more than charts and it can be used independently of APEX, the samples given are more general and not presented in the exact same way you would use them in APEX. In my next blog post I will give you some hints on how to read those examples, navigate in the documentation and ultimately change the way your APEX charts look.

Modifying APEX charts colours

You will in general have some options that are available for all types of charts. Some of them are Color, under the Appearance section, Link section, Label section (where you can change the Font Family, Font Style, Font Size and Fond Colour, as well as apply custom CSS code).

Some of the most modified properties of a chart, are it’s colours. There are at least two way you can do that:

1. Declaratively

First you need to modify your SQL statement (REST Source, etc.) so that it contains a column with the desired colour. Take this example:

select a.*, 
       case type 
        when 'Walk' then '#3FD2C7'
        when 'Public Transport' then '#99DDFF'
        when 'Drive Car' then '#00458B'
        when 'Ride Bike' then '#3CBCC3'
       end bar_colour 
from (
        select 'Walk' Type, 25 Percentage from dual union all
        select 'Public Transport' Type, 10 Percentage from dual union all
        select 'Drive Car' Type, 20 Percentage from dual union all
        select 'Ride Bike' Type, 45 Percentage from dual
) a

Here I have used a column, named bar_colour, as its value is different for each type of transportation I have on my chart. Note that the values are the HEX representations in this case, but you can also use wording such as green, red, yellow, etc.

The other thing you need to do is add the following substitution string &BAR_COLOUR. in the Appearance section, under Color property. It will basically set the value from bar_colour column in your query.

This is an example of a Donut chart, but this approach is the same for other types of charts too. For more examples, check out my DEMO.

2. Using JavaScript Initialization Code

To do that, you need to initialize your chart by going to Attributes > Advanced > JavaScript Initialization Code section of your chart region.

Here is the JavaScript code I’ve used to change the colours of my Donut chart:

function( options ){
    options.dataFilter = function( data ) {
        data.series[ 0 ].color = "#3FD2C7"; 
        data.series[ 1 ].color = "#99DDFF";
        data.series[ 2 ].color = "#00458B";
        data.series[ 3 ].color = "#3CBCC3"; 

        return data;
    };
    return options;
}

Note that in this case you don’t need to have bar_colour column in your SQL query and use it in the Appearance section.

This is an example of changing the colours for a Donut chart. It is slightly different for the other types (more examples in the DEMO). A Bar chart for example would have some of its colours changed by that JavaScript Initialization Code:

function( options ){
    options.dataFilter = function( data ) {
        // Custom set of bars colours
        data.series[ 0 ].items[0].color = "red"; 
        data.series[ 0 ].items[1].color = "red"; 
        data.series[ 0 ].items[5].color = "red"; 

        data.series[ 1 ].items[0].color = "yellow"; 
        data.series[ 1 ].items[1].color = "yellow"; 
        data.series[ 1 ].items[5].color = "yellow"; 

        data.series[ 2 ].items[0].color = "blue"; 
        data.series[ 2 ].items[1].color = "blue";
        data.series[ 2 ].items[5].color = "blue";
		
        return data;
    };
    return options;
}

As you can see, here we have more flexibility to change every individual element of the chart array. In my case those are the colours of the first, second and sixt months of the year (JavaScript arrays count start from 0). And the data series represent my types of activity on the chart.

Modifying APEX charts bar width, donut radius, etc.

1. Bar chart bar width

You can utilize a third dimension in your APEX Bar charts, by using the Z parameter. You can alter your SQL statement (REST Source, etc.) so that it contains a column with the desired value for your Z param. Depending on the distinct values, you will see how the bars would change their width, as the ones with small values will be thinner than the ones with higher values, which will be thicker. Take this example:

with year_months as (
select
    rownum  as month_num,
    to_char(to_date(lpad(rownum,2,'0')||2021,'MMYYYY'),'Mon') month_text
from
    dual
connect by level <= 12 ),

total_hours as (
select 1 month_num,  20 football, 7  running, 5  fitness, 500  calories_burnt from dual union all
select 2 month_num,  13 football, 12 running, 8  fitness, 1000 calories_burnt from dual union all
select 3 month_num,  34 football, 15 running, 9  fitness, 1500 calories_burnt from dual union all
select 12 month_num, 40 football, 15 running, 5  fitness, 1000 calories_burnt from dual )

select a.*, --5 all_calories_burnth, -- override the values above (if needed, bring back the values)
       '<b>Type:  </b>'||a.sport_type ||'<br>'||
       '<b>Month: </b>'||a.month_text ||'<br>'||
       '<b>Hours: </b>'||a.hours_count||'<br>'||
       '<b>Callories burnt: </b>'||a.calories_burnt tooltip_text
       , case sport_type 
          when 'football' then '#3FD2C7'
          when 'running'  then '#99DDFF'
          when 'fitness'  then '#3CBCC3'
         end bar_colour 
from (
        select * from (
                        select ym.month_num, lpad(ym.month_num,2,'0')/*||' '||ym.month_text*/ mnt, 
                               ym.month_text, fh.football, fh.running, fh.fitness, fh.calories_burnt 
                        from year_months ym
                        join total_hours fh
                         on ym.month_num = fh.month_num )
         
        UNPIVOT(
            hours_count         -- unpivot_clause
            FOR sport_type      --  unpivot_for_clause
            IN (                -- unpivot_in_clause
                football AS 'football', 
                running  AS 'running', 
                fitness  AS 'fitness'
            )
        ) 
) a
 
order by month_num asc

Now you just need to use the calories_burnt column in your Column Mapping section for the Z property.

As you can see, another cool thing available is the custom tooltip you can produce, using the Custom Tootip property. For that purpose, you need to define a custom text (HTML can also be used) in one of your columns – in my case tooltip_text column.

2. Donut chart radius

The radius of a Donut chart, and respectively the thickness of the circle can be changed using a JavaScript Initialization Code in Attributes section of your Chart region applied:

function (options) {
    $.extend( options.styleDefaults, { pieInnerRadius: 0.75}) ;
    return options;
} 

The value can vary between 0 and 1, as 1 means bigger radius and thinner circle.

Other chart attributes

Here is a small list of other attributes that you can change. The full API list can be found HERE.

function( options ){
   
    // Set chart initialization options
    options.type = "bar";
    options.plotArea = { //borderColor: "red",
                         //backgroundColor: "white",
                         //borderWidth: 0.5,
                         rendered: "on"  // "on" | "off"
                        } 

    // https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html#Legend
    options.legend = { // backgroundColor: "grey",
                       position: "bottom",     // "start" | "end" | "bottom" | "top" | "auto"
                       rendered: "on",  // "on" | "off" 
                       titleHalign: "start", // "center" | "end" | "start"
                       title: "Hours spent by activity",
                       textStyle : {  color: "#aaaaaa", 
                                      cursor: "auto", 
                                      fontFamily: "sans-serif", 
                                      fontSize: "1.2rem", 
                                      fontStyle: "italic", 
                                      fontWeight: "bold", 
                                      textDecoration: "overline"
                                    },
                       sections: { legendSection: {items: {legendItem: {markerShape: "circle"} } }
                       }
                     }   

    // https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html#LegendItem
    options.legendItem = { symbolType: "marker", // "image" | "line" | "lineWithMarker" | "marker"
                           markerShape: "circle"     // "circle" | "diamond" | "ellipse" | "human" | "plus" | "rectangle" | "square" | "star" | "triangleDown" | "triangleUp" | string
                         };                   

    options.xAxisLineColor = "#9E9E9E";
    options.xAxisLineWidth = 2;             

    options.plotArea = { 
                         backgroundColor: "#eeeeee",
                         borderColor: "#c1c1c1",
                         borderWidth: 1
                       }          

    options.yAxis = { majorTick: 
                        { 
                          lineColor : "#c1c1c1",
                          lineWidth : 1,
                          lineStyle : "solid"
                        } 
                    }

    //$.extend( options.attributes, { otherColor: '#e85d89' }) ;
	//$.extend( options.styleDefaults, { barGapRatio: 0.5, maxBarWidth:16 }) ; 

    return options;
}

To view all of the above Charts live in an APEX application, visit the DEMO.

In the next blog post on charts, I will explain how to easily get yourself oriented in the JET Documentation and modify the code so it can be used in the JavaScript Initialization Code section.

One thought on “Taking your APEX JET charts style to the next level

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s