Scales - Custom time unit: show 4 Quarters of a year

Gantt
#1

I’m refering to this part of the documentation:

https://docs.dhtmlx.com/gantt/samples/03_scales/03_full_year.html
https://docs.dhtmlx.com/gantt/desktop__configuring_time_scale.html#customtimeunits

var monthScaleTemplate = function (date) {
var dateToStr = gantt.date.date_to_str("%M");
var endDate = gantt.date.add(date, 2, “month”);
return dateToStr(date) + " - " + dateToStr(endDate);
};
gantt.config.scales = [
{unit: “year”, step: 1, format: “%Y”},
{unit: “month”, step: 3, format: monthScaleTemplate},
];

I have 2 problems with this example which i don’t know how to change:

  1. The custom time unit shows Feb-Apr, May-Jul. It does not start with january.
    How to change it to show Jan-Mar, Apr-Jun, etc. ?

  2. Instead of the months i would just like to display Q1, Q2, Q3, Q4 in the custom scale.

thanks for your help!
Jochen

#2

Hello Jochen,
Timeline and scales start from a date. In the sample, there is the month scale with the step parameter. With that combination, Gantt covers 3 months instead of one. And there is a template that shows the first and third months.
You can use the month scale without the step parameter and calculate the quarter number. Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/f5307157c

If you need the quarter scale to cover 3 months, you need to create a custom scale unit. Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/500601ea1
And here is an explanation of how it works.
We don’t modify the initial date, so we return it as it is:

gantt.date.year_quarter_start = function(date){
  return date;
};

All calculations are made in the gantt.date.add_year_quarter function.
The year quarter scale means that all cells should be equal (3 months). But most likely, the first and last scale cells will differ from others. It happens because they start on a date that is different from the quarter start date.
So, we calculate the quarter dates, check which quarter the cell belongs to and return the quarter date.

#3

Great, this works perfectly fine!

Thanks Ramil

#4

Hi, I tested the second snippet and it works great. I want to show years and quarters only, not months, but if I remove the month line (check it in the snippet), the gantt only shows the last two quarters, but miss the first two ones. Is there any way of fix it? Thanks!

#5

Hi,
You can try using scale_offset_mimimal config, it controls the padding of the time scale from the earliest and the latest dates of the dataset:

gantt.config.scale_offset_minimal = false;

Live demo: http://snippet.dhtmlx.com/ef57d8ad4
Docs: https://docs.dhtmlx.com/gantt/api__gantt_scale_offset_minimal_config.html

Alternatively, you may need to set the time range explicitly, please check this article: https://docs.dhtmlx.com/gantt/desktop__configuring_time_scale.html#range

Btw, quarter units are now supported out of the box https://docs.dhtmlx.com/gantt/desktop__configuring_time_scale.html#timeunits, so you probably don’t need to implement year_quarter_start and add_year_quarter functions:

gantt.config.scale_offset_minimal = false;
gantt.config.scales = [
  {unit: 'year', step: 1, format: '%Y'},
  {unit: 'quarter', step: 1, format: function(date){
      return "Q" + (Math.floor((date.getMonth() / 3)) + 1)
  }}
];
#6

Thanks Aliaksandr, I’l take a look.
Actually, I’m trying to set a semester scale, adapting this sample, but I get the same issue.

#7

Hi, John!
I’ll duplicate my reply from disqus, in case anyone else would follow this thread:

https://docs.dhtmlx.com/gantt/desktop__configuring_time_scale.html#comment-4694078668

you’ll need to define a custom time unit for that: https://docs.dhtmlx.com/gantt/desktop__configuring_time_scale.html#customtimeunits

which is fairly simple, you just need to define two method:

gantt.date.semester_start = function(date){
	// define start dates for each semester
	if(date.getMonth() < 6){
		//the first semester - 1st of January 
		return new Date(date.getFullYear(), 0, 1); 
	}else{
		//the second semester - 1st of July 
		return new Date(date.getFullYear(), 6, 1);
	}
};

gantt.date.add_semester = function(date, inc){
	var start = gantt.date.semester_start(new Date(date));
	return gantt.date.add(start, 6*inc, "month");
};

Then you’ll be able to use the semester unit in code:

gantt.config.scales = [
	{unit: 'year', step: 1, format: '%Y'},
	{unit: 'semester', step: 1, format: function(date){
		if(date.getMonth() < 5){
			return "I";
		}else{
			return "II";
		}
	}}
];

Live demo: https://snippet.dhtmlx.com/1e13fb985