# jQuery Gantt Chart | DayPilot Pro for JavaScript Demo

> Read more about the [jQuery Gantt Chart](https://doc.daypilot.org/gantt/jquery/).

## Links

- Canonical HTML: /demo/gantt/jquery.html
- Source HTML folder: /demo/gantt/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
$(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());
                }
            });
        });
```