Forum Stats

  • 3,874,176 Users
  • 2,266,677 Discussions
  • 7,911,757 Comments

Discussions

Display fewer Ticklabels in ojChart in APEX 20.1

Roxy rollers
Roxy rollers Member Posts: 77 Red Ribbon

Hi there,

I am using ojChart within APEX 20.1.

I have a Query where I have # of Participants who are attending conferences every month and I need to display this in a Line Chart. So, my Y-Axis would be the "# of Participants" and my X-Axis would be Date (5 Year range). I am running this report from JUL-2017 to JUL-2022.

I would like to report with only Tick Labels showing up for Jul-2017, Jul-2018, Jul-2019, Jul-2020, Jul-2021 and Jul-2022. Currently, I have my "Time Axis Type" set to "Mixed Frequency" and my labels are appearing every 3 months (Probably because the space on my X-Axis is allowing up to 3 months labels to appear). Any help in this regard is greatly appreciated.

On another note, my Major Ticks are also starting from Jan and then repeating every consecutive Jan. Is it possible to reset that so its always on the July? Of course, when I run this Chart for August 2022, I would like to Major Ticks to appear for the August 2017 - 2022 Tick labels.

I have included table definition and also script to insert rows into the table.

CREATE TABLE conf_stats (rep_month date, 
	                 part_num  number);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUN-2017 00:00:00','DD-MON-YYYY HH24:MI:SS'),237);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUL-2017 00:00:00','DD-MON-YYYY HH24:MI:SS'),238);
insert into conf_stats (rep_month,part_num) values (to_date('01-AUG-2017 00:00:00','DD-MON-YYYY HH24:MI:SS'),243);
insert into conf_stats (rep_month,part_num) values (to_date('01-SEP-2017 00:00:00','DD-MON-YYYY HH24:MI:SS'),223);
insert into conf_stats (rep_month,part_num) values (to_date('01-OCT-2017 00:00:00','DD-MON-YYYY HH24:MI:SS'),219);
insert into conf_stats (rep_month,part_num) values (to_date('01-NOV-2017 00:00:00','DD-MON-YYYY HH24:MI:SS'),213);
insert into conf_stats (rep_month,part_num) values (to_date('01-DEC-2017 00:00:00','DD-MON-YYYY HH24:MI:SS'),207);
insert into conf_stats (rep_month,part_num) values (to_date('01-JAN-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),210);
insert into conf_stats (rep_month,part_num) values (to_date('01-FEB-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),210);
insert into conf_stats (rep_month,part_num) values (to_date('01-MAR-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),208);
insert into conf_stats (rep_month,part_num) values (to_date('01-APR-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),208);
insert into conf_stats (rep_month,part_num) values (to_date('01-MAY-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),212);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUN-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),202);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUL-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),198);
insert into conf_stats (rep_month,part_num) values (to_date('01-AUG-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),198);
insert into conf_stats (rep_month,part_num) values (to_date('01-SEP-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),197);
insert into conf_stats (rep_month,part_num) values (to_date('01-OCT-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),187);
insert into conf_stats (rep_month,part_num) values (to_date('01-NOV-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),179);
insert into conf_stats (rep_month,part_num) values (to_date('01-DEC-2018 00:00:00','DD-MON-YYYY HH24:MI:SS'),175);
insert into conf_stats (rep_month,part_num) values (to_date('01-JAN-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),177);
insert into conf_stats (rep_month,part_num) values (to_date('01-FEB-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),175);
insert into conf_stats (rep_month,part_num) values (to_date('01-MAR-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),176);
insert into conf_stats (rep_month,part_num) values (to_date('01-APR-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),173);
insert into conf_stats (rep_month,part_num) values (to_date('01-MAY-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),168);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUN-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),168);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUL-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),164);
insert into conf_stats (rep_month,part_num) values (to_date('01-AUG-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),163);
insert into conf_stats (rep_month,part_num) values (to_date('01-SEP-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),155);
insert into conf_stats (rep_month,part_num) values (to_date('01-OCT-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),159);
insert into conf_stats (rep_month,part_num) values (to_date('01-NOV-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),158);
insert into conf_stats (rep_month,part_num) values (to_date('01-DEC-2019 00:00:00','DD-MON-YYYY HH24:MI:SS'),155);
insert into conf_stats (rep_month,part_num) values (to_date('01-JAN-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),153);
insert into conf_stats (rep_month,part_num) values (to_date('01-FEB-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),147);
insert into conf_stats (rep_month,part_num) values (to_date('01-MAR-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),142);
insert into conf_stats (rep_month,part_num) values (to_date('01-APR-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),143);
insert into conf_stats (rep_month,part_num) values (to_date('01-MAY-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),140);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUN-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),138);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUL-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),134);
insert into conf_stats (rep_month,part_num) values (to_date('01-AUG-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),130);
insert into conf_stats (rep_month,part_num) values (to_date('01-SEP-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),130);
insert into conf_stats (rep_month,part_num) values (to_date('01-OCT-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),133);
insert into conf_stats (rep_month,part_num) values (to_date('01-NOV-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),123);
insert into conf_stats (rep_month,part_num) values (to_date('01-DEC-2020 00:00:00','DD-MON-YYYY HH24:MI:SS'),118);
insert into conf_stats (rep_month,part_num) values (to_date('01-JAN-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),113);
insert into conf_stats (rep_month,part_num) values (to_date('01-FEB-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),113);
insert into conf_stats (rep_month,part_num) values (to_date('01-MAR-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),106);
insert into conf_stats (rep_month,part_num) values (to_date('01-APR-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),101);
insert into conf_stats (rep_month,part_num) values (to_date('01-MAY-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),100);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUN-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),98);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUL-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),99);
insert into conf_stats (rep_month,part_num) values (to_date('01-AUG-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),97);
insert into conf_stats (rep_month,part_num) values (to_date('01-SEP-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),92);
insert into conf_stats (rep_month,part_num) values (to_date('01-OCT-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),92);
insert into conf_stats (rep_month,part_num) values (to_date('01-NOV-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),91);
insert into conf_stats (rep_month,part_num) values (to_date('01-DEC-2021 00:00:00','DD-MON-YYYY HH24:MI:SS'),90);
insert into conf_stats (rep_month,part_num) values (to_date('01-JAN-2022 00:00:00','DD-MON-YYYY HH24:MI:SS'),86);
insert into conf_stats (rep_month,part_num) values (to_date('01-FEB-2022 00:00:00','DD-MON-YYYY HH24:MI:SS'),80);
insert into conf_stats (rep_month,part_num) values (to_date('01-MAR-2022 00:00:00','DD-MON-YYYY HH24:MI:SS'),84);
insert into conf_stats (rep_month,part_num) values (to_date('01-APR-2022 00:00:00','DD-MON-YYYY HH24:MI:SS'),80);
insert into conf_stats (rep_month,part_num) values (to_date('01-MAY-2022 00:00:00','DD-MON-YYYY HH24:MI:SS'),80);
insert into conf_stats (rep_month,part_num) values (to_date('01-JUN-2022 00:00:00','DD-MON-YYYY HH24:MI:SS'),76);

Here is what I am currently getting:


My desired output on the X-Axis should be something like this. Is this possible?

Thanks in advance.

Answers

  • Philip Sommer
    Philip Sommer Member Posts: 118 Bronze Badge

    Hi Roxy,


    I would say the x-axis.step property is what you are looking for. However, I did not get this to work by fiddling in the cookbook. Maybe you'll have more luck.

    "The increment between major tick marks. Defaults to null for automatic calculation based on the data. Only applies to time and numerical axes."


    Kind Regards,

    Philip

  • Roxy rollers
    Roxy rollers Member Posts: 77 Red Ribbon

    Thank you Philip for addressing the issue. I posted the same post under APEX discussions as I am sometimes not sure where to address chart issues. It seems to me that other folks do the same. I am VERY new to ojChart and hence running into issues at this stage. I did try several things with the xAxis but I don't see anything more I can do with the options that are out there. Nothing seems to change the outcome.

    Having said that, do you know how the Format is even being set to the format I am actually seeing (MMM yyyy)? I did not set this under properties as I am doing everything with JavaScript under JavaScript initiation Code. If you do not go for this option and set it it under Value in Format and Pattern, then you do get this Date format if you wish. I am a bit perplexed but perhaps it could have something to do with the Date Format set within APEX under Globalization. Here is what I have so far for the xAxis.

    function(options) {
    options.xAxis = {
     titleStyle:
     {
      color: "black",
      fontWeight: "bold",
      fontSize: "12px"
     },
     axisLine:
     {
      lineWidth : 1.5,
      rendered: "on",
      lineColor : "black"
     },
     tickLabel:
     {
      scaling: "none",
      style: {
       fontWeight: "bold",
       fontSize: "11px"
      }
     },
     majorTick:
     { 
      lineWidth : 1,
      rendered: "on",
      lineColor : "black",
      lineStyle : "solid"
     },
    }
    return options;
    }
    


  • Philip Sommer
    Philip Sommer Member Posts: 118 Bronze Badge

    Hi Roxy,


    I am unfamiliar with APEX, but I would not expect it to interfere with the way JET handles dates. As for the xAxis object: I think the properties you gave are only used for styling. As I said, the "step" property *should be the right one for setting the distance, although I also don't know the correct format.

    For the format of the tick lables themselves, you can use the x-axis.tickLabel.converter. E.g. if you want to display an ISO string:

    this.xaxis = {

           tickLabel : {

            converter: {

             format: function(v){

              let d = v ? new Date(v) : new Date();

              return d.toISOString();

             },

             getHint: function(){return "";},

             getOptions: function(){return {};},

             parse: function(v){return new Date(v);},

             resolvedOptions: function(){return {};}

            }

           }

          };


    I tried it on the Demo and it works:


    Hope that helps.

    Philip   

    Roxy rollers
  • Hey Roxy,

    I'm not an APEX expert either, but I do know JET a little. APEX includes all of what JET can do, under the covers for sure. What they expose through their own UI in properties, etc. may be a subset of all the possible API settings, however. There are a ton of API settings in the ojChart itself.

    Hopefully the question posted in the APEX forum will get the answer about how to do what Philip recommends (which is spot on) via the APEX UI.

    Roxy rollers
  • Roxy rollers
    Roxy rollers Member Posts: 77 Red Ribbon

    Hi there,

    I actually posted under APEX at first but had no luck and then I landed up posting here. I find a few things a bit odd with Formatting the Dates as it seems the APEX UI Interface is doing things a little bit differently. It's possible that I have not exhausted all combinations under Attributes and and X Axis properties.

    For now, the User seems fine with my I have provided.

    Thanks again guys. If I do have an answer later, I will update the thread.

    John 'JB' Brock-Oracle