Hello,
My Gantt chart does not show all the tasks that are returned from the dataset when I specify custom date ranges. I can see the data being returned by the controller as JSON and the missing tasks are listed and yet, on the actual Gantt view, certain tasks are missing and there seems to be no reason for is.
Here is my code. I’ll start with my function that changes the view based on the button that is pressed and set’s it to a preset as defined in the code. I have included the moment.js library here to help with managing datetimes.
//Date Range Views
function rangeSet(e) {
var now = new Date(),
startYear,
startMonth,
startDay,
endYear,
endMonth,
endDay;
if (e.id == "view_30days") {
let momentStart = moment(now);
let momentEnd = moment(now).add(30, "days");
startYear = momentStart.format("YYYY");
startMonth = momentStart.format("MM");
startDay = momentStart.format("DD");
endYear = momentEnd.format("YYYY");
endMonth = momentEnd.format("MM");
endDay = momentEnd.format("DD");
gantt.config.scale_unit = "day";
gantt.config.date_scale = "%D";
} else if (e.id == "view_90days") {
let momentStart = moment(now);
let momentEnd = moment(now).add(90, "days");
startYear = momentStart.format("YYYY");
startMonth = momentStart.format("MM");
startDay = momentStart.format("DD");
endYear = momentEnd.format("YYYY");
endMonth = momentEnd.format("MM");
endDay = momentEnd.format("DD");
gantt.config.scale_unit = "day";
gantt.config.date_scale = "%D";
} else if (e.id == "view_6months") {
console.log("6 Months");
let momentStart = moment(now);
let momentEnd = moment(now).add(6, "months");
startYear = momentStart.format("YYYY");
startMonth = momentStart.format("MM");
startDay = momentStart.format("DD");
endYear = momentEnd.format("YYYY");
endMonth = momentEnd.format("MM");
endDay = momentEnd.format("DD");
gantt.config.scale_unit = "month";
gantt.config.date_scale = "%M";
} else if (e.id == "view_1year") {
console.log("1 Year");
let momentStart = moment(now);
let momentEnd = moment(now).add(1, "year");
startYear = momentStart.format("YYYY");
startMonth = momentStart.format("MM");
startDay = momentStart.format("DD");
endYear = momentEnd.format("YYYY");
endMonth = momentEnd.format("MM");
endDay = momentEnd.format("DD");
gantt.config.scale_unit = "year";
gantt.config.date_scale = "%Y";
} else if (e.id == "view_3year") {
console.log("3 Years");
let momentStart = moment(now);
let momentEnd = moment(now).add(3, "years");
startYear = momentStart.format("YYYY");
startMonth = momentStart.format("MM");
startDay = momentStart.format("DD");
endYear = momentEnd.format("YYYY");
endMonth = momentEnd.format("MM");
endDay = momentEnd.format("DD");
gantt.config.scale_unit = "year";
gantt.config.date_scale = "%Y";
}
//Set dates on Gantt
gantt.config.start_date = new Date(startYear, startMonth, startDay);
gantt.config.end_date = new Date(endYear, endMonth, endDay);
gantt.render();
}
If I select any of these buttons, some of my tasks vanish.
Here is the rest of my code which shows the setup of my grid.
//Gantt Initilisation and config
document.addEventListener("DOMContentLoaded", function (event) {
// specifying the date format
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.config.readonly = true;
// initializing gantt
gantt.init("positionsReport");
// initiating data loading
gantt.load("/api/data/get");
// initializing dataProcessor
var dp = new gantt.dataProcessor("/api/");
gantt.addTaskLayer(function draw_planned(task) {
var vessels = [task];
for (i = 0; i < vessels.length; i++) {
var data = vessels[i];
if (data.onhire && data.offhire) {
var sizes = gantt.getTaskPosition(data, data.onhire, data.offhire);
var el = document.createElement('div');
el.className = 'baseline gantt_task_content event-data'
el.style.left = sizes.left + 'px';
el.style.width = sizes.width + 'px';
el.style.top = sizes.top + gantt.config.task_height + 5 + 'px';
el.innerHTML = "<b>" + data.charterer + "</b>";
el.onmouseover = function () {
toolTip.style.display = "block";
};
el.onmouseout = function () {
toolTip.style.display = "none";
};
return el;
}
return false;
}
});
//Month format
gantt.config.scale_unit = "month";
gantt.config.date_scale = "%M";
//Show items with no fixtures
gantt.config.show_unscheduled = true;
gantt.config.task_height = 35;
gantt.config.row_height = 35;
//View
var initDateStart = moment(new Date()).subtract(1, "months");
//clone used to make date immutable
var initDateEnd = initDateStart.clone().add(13, "months");
var startDay = parseInt(initDateStart.format("DD"));
var startMonth = parseInt(initDateStart.format("MM"));
var startYear = parseInt(initDateStart.format("YYYY"));
var endDay = parseInt(initDateEnd.format("DD"));
var endMonth = parseInt(initDateEnd.format("MM"));
var endYear = parseInt(initDateEnd.format("YYYY"));
gantt.config.start_date = new Date(startYear, startMonth, startDay);
gantt.config.end_date = new Date(endYear, endMonth, endDay);
//Define Columns and their names
gantt.config.columns = [
{ name: "text", tree: false, width: 150, resize: true, align: "left", label: "Vessel" },
{ name: "start_date", align: "center", width: 150, resize: true, align: "left", label: "Onhire" },
{ name: "duration", align: "center", width: 70, resize: true, hide: true }
];
//Base tooltip template
gantt.templates.tooltip_text = function (start, end, task) {
var s = moment(start).format("DD/MM/YYYY");
var e = moment(end).format("DD/MM/YYYY");
return "<b>Charterer: </b>" + task.current_charterer + "<br/><b>Start: </b>" + s + "<br /><b>End: </b>" + e;
};
gantt.templates.task_text = function (start, end, task) {
return "<b>" + task.current_charterer + "</b>";
};
// and attaching it to gantt
dp.init(gantt);
// setting the REST mode for dataProcessor
dp.setTransactionMode("REST");
});
So, on load my data appears, when I select a view certain tasks disappear but there are no obvious differences in the data.