Agent-readable demo data

Title

JavaScript Gantt Chart | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Read more about the Gantt chart client-side image export.

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

Inline demo script 1

const dp = new DayPilot.Gantt("dp", {
            days: 30,
            columns: [
                {
                    title: "Name",
                    width: 50,
                    property: "text"
                },
                {
                    title: "Info",
                    width: 50,
                    property: "info"
                },
                {
                    title: "Duration",
                    width: 50
                }
            ],
            onBeforeRowHeaderRender: (args) => {
                const duration = args.task.duration();
                const html = `${duration.toString("d")}d ${duration.toString("h")}h`;
                args.row.columns[2].html = html;
            }
        });
        dp.init();


        const app = {
            init() {
                this.loadTaskData();
                this.addEventHandlers();
            },
            loadTaskData() {
                const tasks = [];
                const links = [];

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

                    const e = {
                        start: start,
                        end: end,
                        id: DayPilot.guid(),
                        text: "Task " + i,
                        tags: {
                            info: "info text"
                        },
                        children: [
                            {
                                start: start,
                                end: end,
                                id: DayPilot.guid(),
                                text: "Subtask 1",
                                complete: Math.floor(Math.random() * 101) // 0 to 100
                            },
                            {
                                start: start,
                                end: end,
                                id: DayPilot.guid(),
                                text: "Subtask 2",
                                complete: Math.floor(Math.random() * 101) // 0 to 100
                            },
                            {
                                start: end,
                                id: DayPilot.guid(),
                                text: "Milestone 1",
                                type: "Milestone"
                            }

                        ]
                    };

                    tasks.push(e);

                    if (last) {
                        links.push({
                            id: DayPilot.guid(),  // optional
                            from: last,
                            to: e.id,
                            type: "FinishToStart"
                        });
                    }
                    last = e.id;
                    start = end;

                }

                dp.update({
                    tasks: tasks,
                    links: links
                });
            },
            addEventHandlers() {
                document.getElementById("export-button").addEventListener("click", (ev) => {
                    ev.preventDefault();
                    const area = document.getElementById("area").value;
                    document.getElementById("zoom").style.display = "";

                    const e = dp.exportAs("svg", {
                        area: area,
                        dateFrom: DayPilot.Date.today(),
                        dateTo: DayPilot.Date.today().addDays(10),
                        resourceFrom: dp.tasks.list[0].id,
                        resourceTo: dp.tasks.list[0].children[2].id
                    });
                    const element = e.toElement();
                    element.style.height = e.dimensions().height + "px";
                    element.style.width = e.dimensions().width + "px";

                    const exportElement = document.getElementById("export");
                    while (exportElement.firstChild) {
                        exportElement.firstChild.remove();
                    }
                    exportElement.appendChild(element);

                    return false;
                });

                document.getElementById("download-button").addEventListener("click", (ev) => {
                    ev.preventDefault();
                    const area = document.getElementById("area").value;
                    dp.exportAs("svg", {
                        area: area,
                        dateFrom: DayPilot.Date.today(),
                        dateTo: DayPilot.Date.today().addDays(10),
                        resourceFrom: dp.tasks.list[0].id,
                        resourceTo: dp.tasks.list[0].children[2].id
                    }).download();
                });

                document.getElementById("zoomin").addEventListener("click", (ev) => {
                    ev.preventDefault();

                    const svgElements = document.querySelectorAll("#export svg");
                    Array.from(svgElements).forEach((svgElement) => {
                        const height = svgElement.clientHeight;
                        svgElement.style.height = (height * 1.1) + "px";

                        const width = svgElement.clientWidth;
                        svgElement.style.width = (width * 1.1) + "px";
                    });
                });

                document.getElementById("zoomout").addEventListener("click", (ev) => {
                    ev.preventDefault();

                    const svgElements = document.querySelectorAll("#export svg");
                    Array.from(svgElements).forEach((svgElement) => {
                        const height = svgElement.clientHeight;
                        svgElement.style.height = (height / 1.1) + "px";

                        const width = svgElement.clientWidth;
                        svgElement.style.width = (width / 1.1) + "px";
                    });
                });
            }
        };

        app.init();