Skip to main content

Few Tips on Gantt Charts - Part 2

In one of my previous blog post, Few tips on Gantt Charts, I have explained how you can create Gantt chart to show employees calendar data. In this blog post, I am going to explain two more tips on the Gantt chart. This is continuation of previous blog post. So, if you have not read it yet, I recommend to read it first and then come here.

Vertical Grid for Minor Axis

If you go to Gantt Chart > Attributes, there you can enable vertical and horizontal grid lines using "Show Vertical Grid" and "Show Horizontal Grid" options. In our example, horizontal grid lines displays a line after every employee row. This looks good. However, vertical grid lines are displayed based on "Major Axis". So if "months" are displayed as scale for major axis, then vertical grid line is displayed after every month. However, it will be helpful if we display vertical grid line after every day (minor axis), especially when there are several employees in the Gantt chart. So how can we display grid lines for minor axis? 

Gantt Chart grid lines for minor axis


We can achieve this using little trick. Just swap the axes definitions, so minor axes displays on the top and major axes is displayed below minor axes. Here is the JS code to do this. You need to keep this code in "Gantt Chart > Attributes > JavaScript Initialization Code" section.

function(options) {
 // number of days displayed in Gantt Window
 var windowDays = $v("P14_GANTT_DAYS");
 // axes options
 var minorAxisOptions = {},
  majorAxisOptions = {};
 // set scale and zoom order for minor and major axes 
 // depending on number of window days
 if (windowDays > 0 && windowDays <= 90) {
  minorAxisOptions = {
   "scale": "days",
   "zoomOrder": ['quarters', 'months', 'weeks', 'days']
  };
  majorAxisOptions = {
   "scale": "months",
   "zoomOrder": ['months', 'weeks', 'days']
  };
 } else if (windowDays > 90 && windowDays <= 270) {
  minorAxisOptions = {
   "scale": "months",
   "zoomOrder": ['quarters', 'months', 'weeks', 'days']
  };
  majorAxisOptions = {
   "scale": "quarters",
   "zoomOrder": ['quarters', 'months', 'weeks', 'days']
  };
 } else if (windowDays > 270 && windowDays <= 730) {
  minorAxisOptions = {
   "scale": "months",
   "zoomOrder": ['quarters', 'months', 'weeks', 'days']
  };
  majorAxisOptions = {
   "scale": "years",
   "zoomOrder": ['years', 'quarters', 'months', 'weeks', 'days']
  };
 } else {
  minorAxisOptions = {
   "scale": "quarters",
   "zoomOrder": ['quarters', 'months', 'weeks', 'days']
  };
  majorAxisOptions = {
   "scale": "years",
   "zoomOrder": ['years', 'quarters', 'months', 'weeks', 'days']
  };
 }
 // to display vertical grind lines for minor axis, just reverse the axes
 // minor axis will display first and then major axis will be displayed
 options.minorAxis = majorAxisOptions;
 options.majorAxis = minorAxisOptions;
 return options;
}

Dynamic Height for Gantt Chart

You can define Gantt Chart height in "Gantt Chart > Attributes > Layout > Height" section. However, you have to specify "height" in pixel. i.e. height of the Gantt chart is static. So, how can you make it dynamic? How can we adjust Gantt chart height automatically based on data?

You can do this with little JS code. 

1) As usual, define "Height" in Gantt chart attributes. Here, specify maximum height that should be used for the Gantt chart. In the case of demo, it's been specified as 600 pixel.

2) Create a D.A. which will fire "After Refresh" of the Gantt chart region. Create "True" action with type "Execute JavaScript Code" and put below JS code.  If you are refreshing Gantt chart region using AJAX call (Using "Refresh" D.A.), then you have to specify "Event Scope" as "Dynamic" for this dynamic action. In case of demo, when you click "Go" button then page is being submitted. So I have specified "Event Scope" as "Static".

Gantt chart dynamic height

D.A. JavaScript Code:
try {
 // static ID specified for Gantt Chart Region is emp_gantt_chart
 var ganttContainer = document.querySelector("#db_outer").getBoundingClientRect();
 // 70 pixel is for the axes displayed
 var ganttHeight = ganttContainer.height + 70;
 // limit max height for gantt to 600
 ganttHeight = (ganttHeight < 600) ? ganttHeight : 600;
 // container div will have _jet appended to region static id
 $('#emp_gantt_chart_jet').css("height", ganttHeight);
} catch (err) {
 console.log('Error in "Gantt Chart Dynamic Height" D.A.' + err.message);
}
Here is the link to demo.

Thank you.
Labels:

Comments

Post a Comment

Popular posts from this blog

Interactive Grid - Conditional Enable/Disable

In this blogpost, I am going to discuss few approaches using which we can conditionally enable/disable Interactive Grid (IG) column(s) based on other column(s) values. Note:    There is a bug  30801170  in APEX 19.2/20.1 with respect to "enable/disable" dynamic actions for IG columns. Workaround for this bug is provided at the end of this blogpost . This bug has been fixed in APEX version 20.2. Client Side Only Conditions If conditions to enable/disable are simple, then we can check those conditions easily on the client side. For e.g. let's consider IG on EMP table with following SQL Query. SELECT EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO FROM EMP Let's consider the requirement as - Enable "Commission" column only when JOB is equals to 'SALESMAN' and disable "Commission" column in all other cases. This can be done declaratively using dynamic actions (DA) DA "Enable/Disable Commission - 1" Create DA and give it a prope...
4 comments
Read more

Interactive Grid - Bulk Operation on Selected Rows

What's the Problem? Let's say you have an IG on employee table and you want to update selected employees commission based on user's input. Ideally, it should be very simple, where you can write UPDATE statement in page process and select IG region as "Editable Region" under "Execution Options" of the page process. But, when you select rows and submit page, you can see that, this process won't get executed! The reason is  Selection of 'Row Selector' check-boxes is not considered as row-change. Thus selected rows are not submitted to server. So, is there any work around?  Yes! Luckily there are lot of JavaScript (JS) APIs available to work with IG. If you are not already aware, you can refer "APEX IG Cookbook"  or  JavaScript API Reference documentation. If we continue with above Employee IG example, when user selects IG rows, enters "Commission %" and clicks on "Update Commission" button, then we can writ...
36 comments
Read more

Interactive Grid - Process Filtered Data on Server Side

Recently one of the APEX developers has reached out to me and asked if it's possible to capture filtered rows data of the Interactive Grid on the server-side and do some processing. In APEX 20.1, there is a new API APEX_IG , using which we can achieve this. Photo by Jakub Kapusnak on Unsplash The approach is very simple and straightforward. Get the internal region id based on the Static ID given for the IG region Get the last viewed report id based on region id Open query context for the region and report using region id and report id Fetch and loop through the rows using the query context Do something with fetched rows And finally, close the query context If you have already done this for interactive reports, then you should be already aware of these steps. The only difference here is, we use APEX_IG APIs instead of APEX_IR APIs. For the demo purpose, let's Build an Interactive Grid on EMP table and let's give it a Static ID as emp Create a Textarea page item with...
1 comment
Read more