mardi 6 février 2018

Error displaying Gantt chart in laravel

I am trying to display tasks for each project using a Gantt chart. Unfortunately, I can only get the last project (with tasks) to show. It ignores other projects. I have included a link to the fiddle I am using for this example. What am I doing wrong here? This is my Javascript code:

var data = [
                                    {
                                        "project": "edo",
                                        "tasks": [
                                            {
                                                "created_at": "2018-01-29 18:24:05",
                                                "due_date": "2018-01-03 00:00:00",
                                                "name": "new task"
                                            },
                                            {
                                                "created_at": "2018-02-05 15:50:52",
                                                "due_date": "2018-02-14 00:00:00",
                                                "name": "new task1"
                                            }
                                        ]
                                    },
                                    {
                                        "project": "srgra",
                                        "tasks": [
                                            {
                                                "created_at": "2018-02-05 15:51:29",
                                                "due_date": "2018-02-16 00:00:00",
                                                "name": "new textfield1"
                                            },
                                            {
                                                "created_at": "2018-02-05 15:51:41",
                                                "due_date": "2018-02-19 00:00:00",
                                                "name": "new textfield2"
                                            }
                                        ]
                                    },
                                    {
                                        "project": "olotu project",
                                        "tasks": [
                                            {
                                                "created_at": "2018-02-05 15:49:30",
                                                "due_date": "2018-02-22 00:00:00",
                                                "name": "new button"
                                            },
                                            {
                                                "created_at": "2018-02-05 15:49:46",
                                                "due_date": "2018-02-15 00:00:00",
                                                "name": "new button2"
                                            }
                                        ]
                                    }
                                ];


                                var today = new Date(),
                                    day = 1000 * 60 * 60 * 24;

                                // Set to 00:00:00:000 today
                                today.setUTCHours(0);
                                today.setUTCMinutes(0);
                                today.setUTCSeconds(0);
                                today.setUTCMilliseconds(0);
                                today = today.getTime();
                               //console.log(data.length);
                                for(var i = 0; i < data.length; i++) {
                                    var project = data[i].project;
                                    var tasks = data[i].tasks;
                                    //console.log(project);
                                    var final = [];
                                    for(var j=0; j < tasks.length; j++) {
                                        final.push({
                                            taskName: tasks[j].name,
                                            start: today - 2 * day,
                                            end: today + 14 * day
                                        });
                                    }

                                }


                                // THE CHART
                                Highcharts.ganttChart('analysis', {
                                    title: {
                                        text: 'Gantt Chart Test'
                                    },
                                    xAxis: {
                                        currentDateIndicator: true,
                                        min: today - 3 * day,
                                        max: today + 18 * day
                                    },

                                    series: [{
                                        name: project,
                                        data: final
                                    }]
                                });

Here is the fiddle I am following: https://jsfiddle.net/larsac07/t0r8qz9p/



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire