5 Replies Latest reply on Oct 11, 2018 6:50 AM by Billy~Verreynne

    OracleJET in APEX: combined range, line, and area series chart

    Billy~Verreynne

      I do a lot of customised graphing - and back with APEX v3 we actually bought Anychart v5 (Flash) in order to do the graph customisation needed (even wrote a custom PL/SQL API for it). It still works in APEX v5.1, but supporting Flash is becoming a major issue (for obvious reasons).

       

      Busy at the moment doing test conversions of our APEX Anychart graphs to JET - and ran into the following issue.

       

      One of our existing graphs have x as the time period, y1 as the volume, and y2 as percentage. Series1 is an area plot against y2 showing network availability % at time x. Series2 is a range series against y1, showing the statistical min/max volume, at time x. Series3 is a line series showing the actual network traffic volume at time x.

       

      Now I have created APEX JET charts with a range of different single data point series combined - line, line area, area, etc. These work fine.

       

      A range series in APEX however can only be combined with other range series (2 data points per Y series item). I do not see how one can either change an existing series to a line with, or add a line series to, an APEX JET range chart.

       

      Comments and suggestions appreciated. If needed, suggestions can be for APEX v18.x and not limited to v5.1 - if we need to upgrade sooner rather than later to v18.x, so be it.

        • 1. Re: OracleJET in APEX: combined range, line, and area series chart
          Oleh Tyshchenko

          Are you trying to get something like this

          1.png

          • 2. Re: OracleJET in APEX: combined range, line, and area series chart
            Billy~Verreynne

            Yep, kind of.

             

            Here is an example of the Anychart Flash graph:

             

            Screenshot_20181009_1.png

            Small VPN's traffic for 100% (green area Y2) of its WAN routers, for min/max range (light blue Y1), and actual traffic (dark blue line Y1).

            • 3. Re: OracleJET in APEX: combined range, line, and area series chart
              Oleh Tyshchenko

              For some unknown reason APEX silently refuses to draw range charts (neither bar nor area) in a combination with other types. No problem with plain bar/area. Debug shows that APEX add range series with no values (maybe a bug). This give me an idea that we can fix this with advanced javascript.

              To do so I modified range SQL's like this:

              SELECT 'Range' s, 'a' g, 30 lo, 63 hi, '30|63' t FROM dual

              then set "Custom tooltip" property to T. This trick let me access lo/hi values in the advanced javascript:

              function( options ){
                  // Setup a callback function which gets called when data is retrieved, it allows to manipulate the series
                  options.dataFilter = function( data ) {
                      for (var i=0;i<data.series[ 0 ].items.length;i++){
                          data.series[ 0 ].items[i].low  = data.series[ 0 ].items[i].shortDesc.split("|")[0];
                          data.series[ 0 ].items[i].high = data.series[ 0 ].items[i].shortDesc.split("|")[1];
                          delete data.series[ 0 ].items[i].shortDesc;
                      }
              
              
                      return data;
                  };
                  
                  $.extend(
                      options.y2Axis,
                      {
                          referenceObjects: [
                              {
                                  text            : 'CE Monitored, %',
                                  type            : 'area',
                                  items           : [{low: 0, high: 100}, {low: 0, high: 100}, {low: 0, high: 100}, {low: 0, high: 100}], 
                                  color           : 'lightgreen',
                                  displayInLegend : 'on',
                                  location        : 'back'
                              }
                          ]
                      }
                  );
              
              
                  return options;
              }
              

              Also note that I added "CE Monitored" as reference object

               

              Working example here

              1 person found this helpful
              • 4. Re: OracleJET in APEX: combined range, line, and area series chart
                Billy~Verreynne

                Appreciated, thanks - busy looking at it.

                • 5. Re: OracleJET in APEX: combined range, line, and area series chart
                  Billy~Verreynne

                  Thanks Oleh.

                   

                  Unfortunately the production side is running APEX v5.1 - which will need to be upgraded to v18.2, to use the features your example used.

                   

                  The main APEX app running in production I developed on v4.2, with a fair amount of JQuery UI widgets used for modal and non-modal window support, via custom APEX theme regions and Javascript.

                   

                  Will need to first test this customised 4.2 APEX app on 18.2 to confirm to business that the app will still work as expected in a 18.2 runtime - get an approved maintenance window, and spend a very late Saturday night doing the upgrade.

                   

                  Wish upgrades were less painful. I still maintain that with a slightly better implementation (ceasing the abuse of the SYS schema), multiple versions of APEX can coexist, and be used at the same time, in the same database.