I am trying to create a gantt chart from existing code. When I run it I get an error. $('#myGantt').gantt({. All the dependencies are installed and linked correct.
<div id="myGantt"></div>
<script type="text/javascript">
var myTask = [
{
id: 10,
name: 'Task 1',
title: 'Title 1',
date_start: '2019-05-09',
date_end: '2019-06-10',
color: '#ADFF2F',
},
{
id: 11,
name: 'Task 2',
date_start: '2019-06-15',
date_end: '2019-06-20',
color: '#ADD8E6',
},
{
id: 12,
name: 'Task 3',
date_start: '2019-07-05',
date_end: '2019-07-15',
color: '#FFDAB9',
},
{
id: 13,
name: 'Task 4',
date_start: '2019-07-16',
date_end: '2019-07-18',
color: '#BC8F8F',
},
{
id: 14,
name: 'Task 5',
date_start: '2019-07-20',
date_end: '2019-07-23',
color: '#9932CC'
},
{
id: 15,
name: 'Task 6',
date_start: '2019-07-25',
date_end: '2019-07-28',
color: '#808000'
}
];
$('#myGantt').gantt({
data: myTask
});
$('#myGantt').gantt({
data: myTask,
dtStart: '2019-05-05',
dtEnd: '2019-09-05'
});
$('#myGantt').gantt({
data: myTask,
width: 500, // default auto
height: 400
});
$('#myGantt').gantt({
data: myTask,
click: function(taskId, taskName, taskCountDays){
console.log('task', taskId, taskName, taskCountDays);
}
});
$('#myGantt').gantt({
data: myTask,
locale: 'pt-BR'
});
$('#myGantt').gantt({
data: myTask,
labelTask: true
});
$('#myGantt').gantt({
data: myTask,
widthCorrectionFirstCol: 100
});
</script>
you are repeatedly applying gantt() function to same DOM element $('#myGantt') with different input params. You should collect all Params and call gantt() only once like
$('#myGantt').gantt({
data: myTask
dtStart: '2019-05-05',
dtEnd: '2019-09-05', ....
...
});