Agent-readable demo data

Title

Progressive Task Rendering (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

This Gantt chart displays 10,000 tasks. Read more about progressive task rendering.

• Canonical HTML: /demo/gantt/progressive.html
• Markdown companion: /demo/gantt/progressive.md
• Folder: /demo/gantt/
• Root: /demo/
• Catalog: /demo/llms.txt

Inline demo script 1

var dp = new DayPilot.Gantt("dp");

        dp.taskGroupMode = "Auto";

        dp.heightSpec = "Max";
        dp.height = 300;

        dp.scrollDelayCells = 200;

        dp.rowHeaderWidthAutoFit = true;

        dp.startDate = new DayPilot.Date().addDays(-1);
        dp.days = 30;

        // generate and load sample tasks
        var start = new DayPilot.Date().getDatePart();
        var last = null;
        for (var i = 0; i < 10000; i++) {
            var duration = Math.floor(Math.random() * 3) + 1; // 1 to 3
            var end = start.addDays(duration);

            var e = new DayPilot.Task({
                start: start,
                end: end,
                id: DayPilot.guid(),
                text: "Task " + i,
                tags: {
                    info: "info text"
                }
            });
            dp.tasks.add(e);

            last = e.id();
        }

        dp.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";
                }
            }
        ];

        dp.onTaskClicked = function (args) {
            alert("Clicked: " + args.e.id());
        };

        dp.init();