DOCSEARCHbyAlgolia
Submit Docs

javascriptgantt Chart Library

website·Indexed 29 days ago

https://sunilsolankiji.github.io/js-gantt-docs

A JavaScript library for creating and managing Gantt charts. It includes features for task linking, custom markers, and exporting charts to PNG, PDF, and Excel. The library provides a comprehensive API for task management, date formatting, and event handling, along with customizable templates and configuration options.

Tokens
6.8K
Snippets
55
Records
62
Agent score
75%

What's inside javascriptgantt

  1. Handle task scheduling and progress

    The library supports the following scheduling and progress features:

    • Auto Scheduling: Tasks are automatically scheduled.
    • Task Progress: Progress can be updated via manual input or by dragging the task bar.
    • Date Selection: Start and end dates can be set using drag-and-drop functionality.

  4. Utilize UI utility features

    The library includes several UI enhancements for better usability:

    • Filter: Filter tasks based on specific criteria.
    • Tooltips: Display additional insights via tooltips.
    • Column Resizing: Resize sidebar columns.
    • Full Screen: Toggle an immersive fullscreen mode.
    • Mouse Scroll: Navigate the timeline using the mouse scroll wheel.
    • Localization: Support for multiple languages.

  7. Create and initialize a basic Gantt Chart

    To create a Gantt chart using the javascriptgantt library, you must include the required assets, define a DOM container, and initialize the chart object with configuration options. After updating data or options, call the .render() method to refresh the visualization.
    <!-- 1. Include Library Files -->
<script src="gantt.js"></script>
<link rel="stylesheet" href="gantt.css" type="text/css" />

<!-- 2. Define Container Element -->
<div id="gantt_here"></div>
    // 3. Initialize and Configure
let element = document.getElementById("gantt_here");
const options = {};
const templates = {};

let javascriptgantt = new javascriptgantt(element, options, templates);

// Configure Columns
javascriptgantt.options.columns = [
  {
    name: "text",
    width: 245,
    min_width: 80,
    max_width: 300,
    tree: true,
    label: "Name",
    resize: true,
    template: (task) => {
      return `<span>${task.parent == 0 ? task.text : task.subject}</span>`;
    },
  }
];

// Define Data (Tasks)
javascriptgantt.options.data = [
  { id: 1, text: "Project 1", parent: 0, progress: 50 },
  {
    id: 2,
    text: "Task #1",
    start_date: "05-05-2023",
    end_date: "05-05-2023",
    parent: 1,
    progress: 60,
  }
];

// Define Scales (Timeline headers)
javascriptgantt.options.scales = [
  {
    unit: "week",
    step: 1,
    format: (t) => { return "%d %F"; },
  },
  {
    unit: "day",
    step: 1,
    format: "%d %D",
  }
];

// Define Task Dependencies (Links)
javascriptgantt.options.links = [
  { id: 1, source: 1, target: 2, type: 0 },
  { id: 2, source: 2, target: 3, type: 1 }
];

// Render the chart
javascriptgantt.render();

  8. Install and integrate javascriptgantt Chart Library

    To integrate the javascriptgantt Chart Library, you can install it via npm or manually download the library files from the official website or GitHub repository. Once obtained, include the gantt.js and gantt.css files in your project and reference them in your HTML document.
    npm install javascriptgantt
    <link rel="stylesheet" href="path/to/gantt.css" />
<script src="path/to/gantt.js"></script>

  10. Configure left and right sidebar columns

    Customize the sidebars using the columns (left) and rightGrid (right, optional) arrays. Each column object supports:

    • name: The data field name.
    • width, min_width, max_width: Dimensional constraints.
    • tree: Boolean indicating if the column should act as the tree structure.
    • label: Header text.
    • resize: Boolean for resizability.
    • template: Function returning an HTML string for the cell content.
    • editor: Configuration for inline editing.
    javascriptgantt.options.columns = [
  {
    name: "text",
    width: 245,
    min_width: 80,
    max_width: 300,
    tree: true,
    label: "Name",
    resize: true,
    template: (task) => `<span>${task.parent == 0 ? task.text : task.subject}</span>`,
    editor: {type: "text", map_to: "text"},
  },
  {
    name: "estimated_hours",
    width: 100,
    align: "center",
    label: "Planned Hour",
    template: (task) => `<span>${task.estimated_hours || ""} </span>`,
  },
];

javascriptgantt.options.rightGrid = [
  {
    name: "estimated_hours",
    label: "Total",
    width: 100,
    align: "center",
    template: (task) => `<b>${task.estimated_hours}</b>`,
  }
];

  11. Define the Gantt chart date range

    Set the overall start and end boundaries of the Gantt timeline using startDate and endDate.
    javascriptgantt.options.startDate = "2023-05-01T11:46:17.775Z";
javascriptgantt.options.endDate = "2023-06-10T11:46:17.775Z";

  12. Define task data structure

    The data option accepts an array of task objects. Use the parent property to create nested hierarchies (top-level tasks have parent: 0).
    javascriptgantt.options.data = [
  { id: 1, text: "Project 1", parent: 0, progress: 50, taskColor: "#56a4fdf2" },
  {
    id: 2,
    text: "Task #1",
    start_date: "05-05-2023",
    end_date: "05-05-2023",
    parent: 1,
    progress: 60,
    taskColor: "#56a4fdf2",
  },
  {
    id: 12,
    text: "Final Milestone",
    start_date: "06-17-2023",
    end_date: "06-17-2023",
    parent: 8,
    type: "milestone",
    taskColor: "#56a4fdf2",
  }
];