{"id":26105303,"url":"https://github.com/sunilsolankiji/javascriptgantt","last_synced_at":"2025-04-12T18:26:18.766Z","repository":{"id":257824251,"uuid":"810418657","full_name":"Sunilsolankiji/javascriptgantt","owner":"Sunilsolankiji","description":"Complete Documentation of jsgantt","archived":false,"fork":false,"pushed_at":"2024-11-21T20:28:52.000Z","size":7594,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T12:46:48.458Z","etag":null,"topics":["chart","documentation","gantt","gantt-chart","javascript"],"latest_commit_sha":null,"homepage":"https://sunilsolankiji.github.io/js-gantt-docs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sunilsolankiji.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-04T16:55:09.000Z","updated_at":"2024-12-17T17:31:23.000Z","dependencies_parsed_at":"2024-11-13T10:37:39.596Z","dependency_job_id":null,"html_url":"https://github.com/Sunilsolankiji/javascriptgantt","commit_stats":null,"previous_names":["sunilsolankiji/jsgantt","sunilsolankiji/javascriptgantt"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sunilsolankiji%2Fjavascriptgantt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sunilsolankiji%2Fjavascriptgantt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sunilsolankiji%2Fjavascriptgantt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sunilsolankiji%2Fjavascriptgantt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sunilsolankiji","download_url":"https://codeload.github.com/Sunilsolankiji/javascriptgantt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248611928,"owners_count":21133203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","documentation","gantt","gantt-chart","javascript"],"created_at":"2025-03-09T21:04:32.219Z","updated_at":"2025-04-12T18:26:18.759Z","avatar_url":"https://github.com/Sunilsolankiji.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# javascriptgantt Chart Library Documentation  \n  \n\n## Introduction  \nWelcome to the documentation for [javascriptgantt](https://sunilsolankiji.github.io/javascriptgantt/) Chart Library. This library provides a powerful set of tools and functionalities to create interactive Gantt charts for project management. This documentation will guide you through the installation process, usage instructions, and available features of the library.   \n  \n\n## Table of Contents \n- [Installation](#installation)\n- [Getting Started](#getting-started) \n- [Features](#features)   \n    \n---  \n  \n\u003ca name=\"installation\"\u003e\u003c/a\u003e\n## Installation   \n  \nTo integrate the Gantt Chart Library, adhere to the steps below:  \n  \n  1. Download the library files from our website or repository.  \n  2. Integrate the library files (`gantt.js` and `gantt.css`) into your project.  \n  3. Link the library files in your HTML file.  \n  4. You're now ready to start using the javascriptgantt Chart Library!    \n\n\u003ca href=\"https://sunilsolankiji.github.io/javascriptgantt/\"\u003e\n  \u003cimg src=\"./src/assets/images/jsgantt-screenshot.png\"\u003e\n\u003c/a\u003e    \n  \n---  \n  \n\u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n## Getting Started ##\nTo create a basic Gantt Chart, follow these steps:     \n\n**Step 1:** Add the files:   \n~~~html\n\u003cscript src=\"gantt.js\" \u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"gantt.css\" type=\"text/css\"\u003e\n~~~  \n\n**Step 2:** Insert the markup:  \n~~~html\n\u003cdiv id=\"gantt_here\" style='width:100%; height:100vh;'\u003e\u003c/div\u003e\n~~~  \n\n**Step 3:** Invoke the Gantt Chart Library using JavaScript, targeting the container element, and define your tasks, dependencies, and duration.  \n\n~~~js\nlet element = document.getElementById(\"gantt_here\"); \nlet gantt = new javascriptgantt(element);  \ngantt.options.columns = [\n  {\n    name: \"text\",\n    width: 245,\n    min_width: 80,\n    max_width: 300,\n    tree: true,\n    label: \"Name\",\n    resize: true,\n    template: (task) =\u003e {\n      return `\u003cspan\u003e${task.parent == 0 ? task.text : task.subject}\u003c/span\u003e`;\n    },\n  },\n ...\n];\n\ngantt.options.data = [\n  { id: 1, text: \"Project 1\", parent: 0, progress: 50 },\n  {\n    id: 2,\n    text: \"Task #1\",\n    start_date: \"05-05-2023\",\n    end_date: \"05-05-2023\",\n    parent: 1,\n    progress: 60,\n  },\n  ...\n];\n\ngantt.options.scales = [\n  {\n    unit: \"week\",\n    step: 1,\n    format: (t) =\u003e {\n      return \"%d %F\";\n    },\n  },\n  {\n    unit: \"day\",\n    step: 1,\n    format: \"%d %D\",\n  },\n];\n\ngantt.options.links = [\n  { id: 1, source: 1, target: 2, type: 0 },\n  { id: 2, source: 2, target: 3, type: 1 },\n  { id: 3, source: 3, target: 4, type: 2 },\n  { id: 4, source: 12, target: 15, type: 3 },\n];  \n\ngantt.render();\n~~~   \n\n**Note:** Remember to call `gantt.render();` whenever you wish to visualize the updated data.  \n\n[Live demo](https://sunilsolankiji.github.io/javascriptgantt/)      \n\n**Complete Documentation:** [javascriptgantt Documentation](./docs/Gantt-Chart-Documentation.pdf)  \n  \n  ---  \n  \n\u003ca name=\"features\"\u003e\u003c/a\u003e\n## Features     \n\n  * **Task Linking:** Four types - finish-to-start, start-to-start, finish-to-finish, start-to-finish.      \n\n  \u003ca href=\"https://sunilsolankiji.github.io/javascriptgantt/\"\u003e\n    \u003cimg src=\"./src/assets/images/links.gif\"\u003e\n  \u003c/a\u003e  \n\n  * **Drag and Drop:** Shift multiple tasks horizontally and vertically.    \n  * **Filtering:** Conveniently filter out tasks.    \n  * **Tooltips:** Additional insights via tooltips.  \n  * **Grid:** Columns in the grid are fully customizable.  \n  * **Customization:** Modify the time scale, task edit form, and much more.    \n    \n  \u003ca href=\"https://sunilsolankiji.github.io/javascriptgantt/\"\u003e\n    \u003cimg src=\"./src/assets/images/popup.gif\"\u003e\n  \u003c/a\u003e   \n\n  * **Task Progress:** Update task progress via dragging or manually set the percentage.    \n  * **Exports:** Get your charts in PDF, PNG, or Excel formats.    \n  * **Zoom Levels:** Multiple timeline views - hour, day, week, month, quarter, and year.  \n  * **Full Screen:** View your Gantt in full screen for an immersive experience.    \n  * **Task Management:** Expand, collapse, add markers, modify, or delete tasks.     \n  * **Auto Scheduling:** Tasks are automatically scheduled.   \n  * **Date Selection:** Easily select start and end dates through drag and drop. \n  * **Mouse Scroll:** Scroll timeline using mouse click.   \n  * **Aesthetics:** Customize the task colors via a color picker.   \n\n  \u003ca href=\"https://sunilsolankiji.github.io/javascriptgantt/\"\u003e\n    \u003cimg src=\"./src/assets/images/taskColor.gif\"\u003e\n  \u003c/a\u003e       \n    \n  * **Localization:** Multilingual support to cater to a global audience.   \n  * **Themes:** Dark mode for those late-night work sessions.  \n\n  \u003ca href=\"https://sunilsolankiji.github.io/javascriptgantt/\"\u003e\n    \u003cimg src=\"./src/assets/images/theme.gif\"\u003e\n  \u003c/a\u003e  \n  \n  You can see the full list of features in the [documentation](./docs/Gantt-Chart-Documentation.pdf)   \n    \n        \n  [Try it Yourself:](https://stackblitz.com/edit/js-bdaa47?file=index.js): Dive into hands-on examples and truly understand the potential of the library.    \n    \n  ---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunilsolankiji%2Fjavascriptgantt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsunilsolankiji%2Fjavascriptgantt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunilsolankiji%2Fjavascriptgantt/lists"}