Draggable & Resizable SVG Gantt Chart – Frappe Gantt

Category: Chart & Graph , Javascript | April 15, 2023
Author:frappe
Views Total:1,827 views
Official Page:Go to website
Last Update:April 15, 2023
License:MIT

Preview:

Draggable & Resizable SVG Gantt Chart – Frappe Gantt

Description:

Frappe Gantt is a draggable, resizable, multilingual, modern-looking Gantt Chart library written in JavaScript and SVG.

It provides an interactive data visualization solution for Project Management, Resource Scheduling, Production Planning, Marketing Campaigns, and other time series based application scenarios.

See Also:

How to use it:

1. Download and import the Frappe Gantt’s files.

<link rel="stylesheet" href="dist/frappe-gantt.css" />
<script src="dist/frappe-gantt.js"></script>

2. Create a container for the Gantt Chart.

<div class="gantt-container"></div>

3. Prepare the data representing your tasks.

const tasks = [
      {
        start: '2023-01-01',
        end: '2023-02-01',
        name: 'Redesign CSSScript.com',
        id: "Task 0",
        progress: 20
      },
      {
        start: '2023-01-15',
        end: '2023-03-15',
        name: 'Redesign jQueryScript.net',
        id: "Task 1",
        progress: 5,
        dependencies: 'Task 0'
      },
      {
        start: '2023-03-01',
        end: '2023-04-15',
        name: 'Redesign VueScript.Com',
        id: "Task 2",
        progress: 10,
        dependencies: 'Task 1'
      },
      {
        start: '2023-05-01',
        end: '2023-06-15',
        name: 'Redesign ReactScript.Com',
        id: "Task 3",
        progress: 5,
        dependencies: 'Task 2'
      },
      {
        start: '2023-05-15',
        end: '2023-07-30',
        name: 'Redesign 365webresources.Com',
        id: "Task 4",
        progress: 0,
        dependencies: 'Task 2'
      },
      {
        start: '2023-08-01',
        end: '2023-09-15',
        name: 'Redesign ScriptByAI.Com',
        id: "Task 5",
        progress: 0,
        dependencies: 'Task 4',
        custom_class: 'bar-milestone'
      },
      {
        start: '2023-10-01',
        end: '2023-11-30',
        name: 'Create A New Website',
        id: "Task 6",
        progress: 0
      }
]

4. Initialize the Gantt Chart and specify the target container.

const myChart = new Gantt(".gantt-container", tasks, {
      // options here
});

5. The library provides six views to fit your projects:

  • ‘Quarter Day’
  • ‘Half Day’
  • ‘Day’ (default)
  • ‘Week’
  • ‘Month’
  • ‘Year’
const myChart = new Gantt(".gantt-container", tasks, {
      view_mode: 'Year',
});

6. Change the language.

const myChart = new Gantt(".gantt-container", tasks, {
      // or 'es', 'it', 'ru', 'ptBr', 'fr', 'tr', 'zh', 'de', 'hu'
      language: 'en', 
});

7. Add custom HTML to the tooltip popup.

const myChart = new Gantt(".gantt-container", tasks, {
      custom_popup_html: function(task) {
        // the task object will contain the updated
        // dates and progress value
        const end_date = task._end.format('MMM D');
        return `
        <div class="details-container">
          <h5>${task.name}</h5>
          <p>Expected to finish by ${end_date}</p>
          <p>${task.progress}% completed!</p>
        </div>
        `;
      }
});

8. More configuration options.

const myChart = new Gantt(".gantt-container", tasks, {
      header_height: 50,
      column_width: 30,
      step: 24,
      bar_height: 20,
      bar_corner_radius: 3,
      arrow_curve: 5,
      padding: 18,
      date_format: 'YYYY-MM-DD',
      popup_trigger: 'click',
});

9. Callback functions.

const myChart = new Gantt(".gantt-container", tasks, {
      on_click: task => {
        console.log(task);
      },
      on_date_change: (task, start, end) => {
        console.log(task, start, end);
      },
      on_progress_change: (task, progress) => {
        console.log(task, progress);
      },
      on_view_change: (mode) => {
        console.log(mode);
      },
});

10. Change the view mode manually.

myChart.change_view_mode('Week')

You Might Be Interested In:


Leave a Reply