IBM Gantt Chart component, integrable into Vanilla JS / jQuery

IBM Gantt Chart component, integrable into Vanilla, jQuery, or React Framework. A Ganttchart is a type of bar chart that can be used to visualize your data (activities and scheduled tasks) in a 2D timeline interface.

Gantt Chart is a JavaScript library that provides an easy way to implement a customizable, professional, and full-featured online Gantt chart generator for scheduling your tasks on your modern web application.

Features:

It works with jQuery, Vanilla JavaScript, and React.js framework.
Collapsible task names.
Fully automatic response tailored to your planning.
Custom date format.
View schedule and custom planning.
It allows the user to zoom in / out the Gantt chart.
It allows the user to filter and search the data.
Supports AJAX data fetch.
Supports any type of data: “json”, “xml”, “html” or “text”.

How to make use of it:

1. Load the stylesheet ibm-gantt-chart.css and JavaScript ibm-gantt-chart.js from the dist folder.

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

2. Create a placeholder for the Gantt chart.

<div id="gantt"></div>

3. Prepare your information in a JS array containing ID, names, and actions as follows.

var data = [
    {
      id: 'NURSES+Anne',
      name: 'Anne',
      activities: [
        {
          id: 'SHIFTS+Emergency+Monday+2+8',
          name: 'Emergency',
          start: 1474880400000,
          end: 1474902000000,
        },
      ],
    },
    {
      id: 'NURSES+Bethanie',
      name: 'Bethanie',
      activities: [],
    },
    {
      id: 'NURSES+Betsy',
      name: 'Betsy',
      activities: [
        {
          id: 'SHIFTS+Emergency+Wednesday+12+18',
          name: 'Emergency',
          start: 1475089200000,
          end: 1475110800000,
        },
        {
          id: 'SHIFTS+Emergency+Saturday+12+20',
          name: 'Emergency',
          start: 1475348400000,
          end: 1475377200000,
        },
        {
          id: 'SHIFTS+Consultation+Friday+8+12',
          name: 'Consultation',
          start: 1475247600000,
          end: 1475262000000,
        },
      ],
    },
    {
      id: 'NURSES+Cathy',
      name: 'Cathy',
      activities: [
        {
          id: 'SHIFTS+Emergency+Sunday+20+2',
          name: 'Emergency',
          start: 1475463600000,
          end: 1475485200000,
        },
        {
          id: 'SHIFTS+Emergency+Saturday+12+20',
          name: 'Emergency',
          start: 1475348400000,
          end: 1475377200000,
        },
        {
          id: 'SHIFTS+Emergency+Monday+18+2',
          name: 'Emergency',
          start: 1474938000000,
          end: 1474966800000,
        },
      ],
    },
    {
      id: 'NURSES+Cindy',
      name: 'Cindy',
      activities: [
        {
          id: 'SHIFTS+Emergency+Saturday+20+2',
          name: 'Emergency',
          start: 1475377200000,
          end: 1475398800000,
        },
        {
          id: 'SHIFTS+Consultation+Friday+8+12',
          name: 'Consultation',
          start: 1475247600000,
          end: 1475262000000,
        },
        {
          id: 'SHIFTS+Consultation+Tuesday+8+12',
          name: 'Consultation',
          start: 1474988400000,
          end: 1475002800000,
        },
      ],
    },
];

4. Config find out how to fetch assets for the Gantt chart.

var config = {
    data: {
      resources: {
        data: data, // resources are provided in an array. Instead, we could configure a request to the server.
        // Activities of the resources are provided along with the 'activities' property of resource objects.
        // Alternatively, they could be listed from the 'data.activities' configuration.
        activities: 'activities',
        name: 'name', // The name of the resource is provided with the name property of the resource object.
        id: 'id', // The id of the resource is provided with the id property of the resource object.
      },
      // As activities are provided along with the resources, this section only describes how to create
      // activity Gantt properties from the activity model objects.
      activities: {
        start: 'start', // The start of the activity is provided with the start property of the model object
        end: 'end', // The end of the activity is provided with the end property of the model object
        name: 'name', // The name of the activity is provided with the name property of the model object
      },
    },
};

5. Configure a toolbar related to the Gantt chart.

var config = {
    toolbar: [
      'title',
      'search',
      'separator',
      {
        type: 'button',
        text: 'Refresh',
        fontIcon: 'fa fa-refresh fa-lg',
        onclick: function(ctx) {
          ctx.gantt.draw();
        },
      },
      'fitToContent',
      'zoomIn',
      'zoomOut',
    ],
};

6. Initialize the library to generate a primary Gantt chart.

new Gantt('gantt', config);

7. Implement the IBM Gantt Chart as a jQuery plugin.

<!-- jQuery Library -->
<script src="jquery.min.js"></script>
<!-- jQuery Datatables plugin -->
<script src="jquery.dataTables.min.js"></script>
<link href="jquery.dataTables.min.css" rel="stylesheet" />
<!-- VIS Library -->
<script src="vis.min.js"></script>
<link href="vis.min.css" rel="stylesheet" type="text/css" />
<!-- IBM Gantt Chart -->
<link href="./dist/ibm-gantt-chart-jquery.css" rel="stylesheet" />
<script src="./dist/ibm-gantt-chart-jquery.js"></script>

8. Implement the IBM Gantt Chart as a React element.

import React from 'react';
import ReactDOM from 'react-dom';
import GanttChart from 'ibm-gantt-chart-react';
import 'ibm-gantt-chart/dist/ibm-gantt-chart.css';
const config = { ... };
ReactDOM.render(<GanttChart config={config} />, document.getElementById('gantt'));

9. Implement the IBM Gantt Chart as a React element.

import React from 'react';
import ReactDOM from 'react-dom';
import GanttChart from 'ibm-gantt-chart-react';
import 'ibm-gantt-chart/dist/ibm-gantt-chart.css';
const config = { ... };
ReactDOM.render(<GanttChart config={config} />, document.getElementById('gantt'));

Fully Featured Gantt Chart Component By IBM, Gantt Chart Plugin/Github, responsive gantt chart, gantt chart from json, two project gantt chart, top 5 gantt chart, jquery simple gantt chart, free asp net gantt chart control, jquery gantt chart open source, github ibm gantt chart