Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

264
Views
How to configure date in Grantt chart of (Highcharts) so it accept date in string without javascript date?

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>
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!