Hello
I need to show a Gantt chart dynamically on Ajax call.
My json gantt looks like this;
var tasks = {
"data": [
{
"id": "111_7966",
"text": "MY_PROJECT",
"parent": 0,
"progress": 0,
"open": false,
"start_date": "08/02/2022 00:00",
"end_date": "13/01/2024 00:00",
"duration": 704
},
{
"id": "999_15420",
"text": "TEST",
"start_date": "09/02/2022 00:00",
"end_date": "02/04/2022 00:00",
"duration": 51,
"parent": "111_7966",
"progress": 0,
"open": true
}
],
"links": [
{
"id": "555_15420",
"source": "111_7966",
"target": "999_15420",
"type": 1
}
]
};
so, the gantt chart has two bars:
MY_PROJECT with start date 08/02/2022 and end date 13/01/2024
TEST with start date 09/02/2022 and end date 02/04/2022
all the dates are in the format dd/mm/yyyy
the output.html page is the following
<script type=“text/javascript” >
var tasks = {“data”: [], “links”: []};
</script><div id=“gantt_in_progress” style=“width: 90%; height: 42%; position: absolute; text-align: center; background: white; display: none”>
<span style=“text-align: center;”>Gantt chart in progress…</span>
</div>
<div id=“gantt_here” style=“width: 90%; height: 42%; position: absolute”></div>
<div id=“gantt_parsing”>
<script>
ParseGantt(flagParse, jsonGanttChart) {
if (flagParse === true) {
gantt.config.date_grid = “%d/%m/%Y”;
gantt.config.date_format = “%d/%m/%Y”;gantt.init(“gantt_here”);
gantt.clearAll();
gantt.parse(jsonGanttChart);}
}ParseGantt(false, tasks);
</script>
</div>
<script type=“text/javascript” src=“ganttChartConfiguration.js”></script>
the following is the content of ganttChartConfiguration.js
gantt.plugins({
auto_scheduling: true
});gantt.config.readonly = true;
gantt.config.auto_types = true;
gantt.config.scale_height = 40;
gantt.config.open_split_tasks = true;
gantt.config.fit_tasks = true;
gantt.config.static_background = true;
gantt.config.grid_width = 400;
gantt.config.add_column = false;
gantt.config.work_time = true;gantt.templates.task_class = function (st, end, item) {
return item.$level == 0 ? “gantt_project” : “”
};gantt.templates.scale_cell_class = function (date) {
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();};
gantt.config.open_tree_initially = false;
gantt.locale.labels.section_split = “Display”;
// zoom
var hourToStr = gantt.date.date_to_str("%H:%i");
var hourRangeFormat = function(step){
return function(date){
var intervalEnd = new Date(gantt.date.add(date, step, “hour”) - 1)
return hourToStr(date) + " - " + hourToStr(intervalEnd);
};
};gantt.config.min_column_width = 100;
var zoomConfig = {
minColumnWidth: 100,
maxColumnWidth: 150,
levels: [
[
{ unit: “month”, format: “%F %Y”, step: 1},
{ unit: “week”, step: 1, format: function (date) {
var dateToStr = gantt.date.date_to_str("%d %M");
var endDate = gantt.date.add(date, +6, “day”);
return dateToStr(date) + " - " + dateToStr(endDate);
}}
],[ { unit: "month", format: "%M %Y", step: 1}, { unit: "day", format: "%D %d %M", step: 1} ], [ { unit: "day", format: "%D %d %M", step: 1}, { unit: "hour", format: hourRangeFormat(12), step: 12} ], [ {unit: "day", format: "%D %d %M",step: 1}, {unit: "hour",format: hourRangeFormat(6),step: 6} ], [ { unit: "day", format: "%D %d %M", step: 1 }, { unit: "hour", format: "%H:%i", step: 1} ] ],useKey: “ctrlKey”,
trigger: “wheel”,
element: function(){
return gantt.$root.querySelector(".gantt_task");
}
}gantt.ext.zoom.init(zoomConfig);
output.html has a button that, on clicking, triggers the following ajax call
$.ajax({
url: “http://localhost:8080/get-gantt-chart”,
type: “post”, //send it through post method
data: {
filter: uriEncodedDatiFormTimeline
},
async: false,
dataType: ‘JSON’,
beforeSend: function() {
// Show image container
$("#gantt_here").hide();
$("#gantt_in_progress").show();
},
success: function(response, textStatus, status) {
console.log(textStatus);
console.log(status);tasks = JSON.stringify(response.gantt_chart); ParseGantt(true, tasks); }, complete: function(response) { // Hide image container $("#gantt_in_progress").hide(); // ParseGantt(true, tasks); $("#gantt_here").show(); }, error: function(xhr, textStatus, err) { console.log(xhr.responseText); console.log(xhr.statusText); console.log(textStatus); console.log(err); } });
http://localhost:8080/get-gantt-chart is a url to a Java SpringBoot class which produces response.gantt_chart as a json object, and after stringifying, it results in the tasks json variable shown at the beginning of this post.
A div with the message Gantt chart in progress is shown until the Ajax call is in progress, and on success, the message is replaced by the Gantt chart with the two bars.
The problem is that MY_PROJECT and TEST bars appear with the same length, with start and ending date of MY_PROJECT equal start and ending date of TEST.
As a test, I also created output2.html which is a static page like follows
<div id=“gantt_here” style=“width: 90%; height: 42%; position: absolute”></div>
<script>
var tasks = // here the json gantt chart
</script>
<script>
gantt.config.date_grid = "%d/%m/%Y";
gantt.config.date_format = "%d/%m/%Y";gantt.init("gantt_here"); gantt.clearAll();gantt.parse(tasks);
</script>
<script type=“text/javascript” src=“ganttChartConfiguration.js”></script>
and the bars appear with the right dates (and length)
It seems that invoking gantt parse dynamically doesn’t work properly, but statically does.
Thanks to anybody could give me some useful hints or help