Agent-readable demo data

Title
jQuery Gantt Chart | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
Read more about the jQuery Gantt Chart.

Inline demo script 1

$(document).ready(function () {
            $("#dp").daypilotGantt({
                startDate: "2014-10-01",
                days: 31,
                columns: [
                    {
                        title: "Name",
                        width: 50,
                        property: "text"
                    },
                    {
                        title: "Info",
                        width: 50,
                        property: "info"
                    },
                    {
                        title: "Duration",
                        width: 50,
                        format: function (args) {
                            var duration = args.task.duration();
                            return duration.toString("d") + "d " + duration.toString("h") + "h";
                        }
                    }
                ],
                tasks: [
                    {
                        id: 1,
                        text: "Group 1",
                        tags: {
                            info: "info text"
                        },
                        children: [
                            {
                                start: "2014-10-02",
                                end: "2014-10-04",
                                id: 2,
                                text: "Subtask 1",
                                complete: Math.floor(Math.random() * 101) // 0 to 100
                            },
                            {
                                start: "2014-10-04",
                                end: "2014-10-07",
                                id: 3,
                                text: "Subtask 2",
                                complete: Math.floor(Math.random() * 101) // 0 to 100
                            },
                            {
                                start: "2014-10-10",
                                id: 4,
                                text: "Milestone 1",
                                type: "Milestone"
                            }

                        ]
                    }
                ],
                links: [
                    {from: 2, to: 3}
                ],
                onTaskClicked: function (args) {
                    alert("Clicked: " + args.e.id());
                }
            });
        });