Chart

Attributes

• Type: Bar

Advanced

• JavaScript Initialization Code

function( options ){
    // Setup a callback function which gets called when data is retrieved, it allows to manipulate the series
    options.dataFilter = function( data ) {
        //data.series[ 0 ].color = "#00FF00";

        // 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;
    };
    // Set chart initialization options
    options.type = "bar";
    options.plotArea = { 
                         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
                         };             

    $.extend( options.styleDefaults, { barGapRatio: 0.5, maxBarWidth:16 }) ;       

    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' }) ;

    return options;
}

Chart Series

Source

• Location: Local database
• Type: SQL Query
• SQL Query:

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 ),

flight_hours as (
select 1 month_num, 20 football, 7 running, 5 fitness from dual union all
select 2 month_num, 13 football, 12 running, 8 fitness from dual union all
select 3 month_num, 34 football, 15 running, 9 fitness from dual union all
select 4 month_num, 12 football, 4 running, 1 fitness from dual union all
select 5 month_num, 14 football, 2 running, 12 fitness from dual union all
select 6 month_num, 16 football, 24 running, 3 fitness from dual union all
select 7 month_num, 8 football, 10 running, 6 fitness from dual union all
select 8 month_num, 34 football, 15 running, 5 fitness from dual union all
select 9 month_num, 12 football, 20 running, 9 fitness from dual union all
select 10 month_num, 24 football, 12 running, 7 fitness from dual union all
select 11 month_num, 18 football, 10 running, 2 fitness from dual union all
select 12 month_num, 40 football, 15 running, 5 fitness from dual )

select a.*, 10 bar_width, -- override the values above (if needed, bring back the values)
       case sport_type 
        when 'football' then '#7cc576'
        when 'running' then '#448ccb'
        when 'fitness' then '#f68e56'
       end bar_colour 
from (
        select * from (
                        select ym.month_num, lpad(ym.month_num,2,'0')/*||' '||ym.month_text*/ mnt, fh.football, fh.running, fh.fitness 
                        from year_months ym
                        join flight_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

Column Mapping

• Series name: SPORT_TYPE
• Label: MNT
• Value: HOURS_COUNT