I am using Grantt chart of (highcharts.com) by default the start and end date key of the object accepting values using javascript date().gettime function. I want to pass date formats like '2021-09-20' so i can create json object from php backend i have created a ajax call so it fetch from a backend and appear the response data in series.
// THE CHART
<script type="text/javascript">
Highcharts.ganttChart('container', {
chart: {
styledMode: true
},
title: {
text: 'Highcharts Gantt in Styled Mode'
},
subtitle: {
text: 'Purely CSS-driven design'
},
xAxis: {
min: today.getTime() - (2 * day),
max: today.getTime() + (32 * day)
},
series: [{
name: 'Project 1',
data: [{
name: 'Planning',
id: 'planning',
start: '2021-09-20',
end: ''
}, {
name: 'Requirements',
id: 'requirements',
parent: 'planning',
start: today.getTime(),
end: today.getTime() + (5 * day)
}, {
name: 'Design',
id: 'design',
dependency: 'requirements',
parent: 'planning',
start: today.getTime() + (3 * day),
end: today.getTime() + (20 * day)
}, {
name: 'Layout',
id: 'layout',
parent: 'design',
start: today.getTime() + (3 * day),
end: today.getTime() + (10 * day)
}, {
name: 'Graphics',
parent: 'design',
dependency: 'layout',
start: today.getTime() + (10 * day),
end: today.getTime() + (20 * day)
}, {
name: 'Develop',
id: 'develop',
start: today.getTime() + (5 * day),
end: today.getTime() + (30 * day)
}, {
name: 'Create unit tests',
id: 'unit_tests',
dependency: 'requirements',
parent: 'develop',
start: today.getTime() + (5 * day),
end: today.getTime() + (8 * day)
}, {
name: 'Implement',
id: 'implement',
dependency: 'unit_tests',
parent: 'develop',
start: today.getTime() + (8 * day),
end: today.getTime() + (30 * day)
}]
}]
});
</script>
According to the documentation data.start only accepts numbers, you need to convert the values to the correct format.
let time = new Date('2021-09-20'),
newTime = time.getTime();
Demo: https://jsfiddle.net/BlackLabel/uv0fnpw2/
API References: https://api.highcharts.com/gantt/series.gantt.data.start