Press "Enter" to skip to content

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.

Fully Featured Gantt Chart Component By IBM, Gantt Chart Plugin/Github, responsive gantt chart, gantt chart from json, two project gantt chart

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',
          name: 'Emergency',
          start: 1474880400000,
          end: 1474902000000,
        },
      ],
    },
    {
      id: 'NURSES+Bethanie',
      name: 'Bethanie',
      activities: [],
    },
    {
      id: 'NURSES+Betsy',
      name: 'Betsy',
      activities: [
        {
          id: 'SHIFTS+Emergency+Wednesday',
          name: 'Emergency',
          start: 1475089200000,
          end: 1475110800000,
        },
        {
          id: 'SHIFTS+Emergency+Saturday',
          name: 'Emergency',
          start: 1475348400000,
          end: 1475377200000,
        },
        {
          id: 'SHIFTS+Consultation+Friday',
          name: 'Consultation',
          start: 1475247600000,
          end: 1475262000000,
        },
      ],
    },
    {
      id: 'NURSES+Cathy',
      name: 'Cathy',
      activities: [
        {
          id: 'SHIFTS+Emergency+Sunday',
          name: 'Emergency',
          start: 1475463600000,
          end: 1475485200000,
        },
        {
          id: 'SHIFTS+Emergency+Saturday',
          name: 'Emergency',
          start: 1475348400000,
          end: 1475377200000,
        },
        {
          id: 'SHIFTS+Emergency+Monday',
          name: 'Emergency',
          start: 1474938000000,
          end: 1474966800000,
        },
      ],
    },
    {
      id: 'NURSES+Cindy',
      name: 'Cindy',
      activities: [
        {
          id: 'SHIFTS+Emergency+Saturday',
          name: 'Emergency',
          start: 1475377200000,
          end: 1475398800000,
        },
        {
          id: 'SHIFTS+Consultation+Friday',
          name: 'Consultation',
          start: 1475247600000,
          end: 1475262000000,
        },
        {
          id: 'SHIFTS+Consultation+Tuesday',
          name: 'Consultation',
          start: 1474988400000,
          end: 1475002800000,
        },
      ],
    },
];

4. Config finds 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'));

top 5 gantt chart, jquery simple gantt chart, free asp net gantt chart control, jquery gantt chart open source, github ibm gantt chart


See Demo And Download

Official Website(IBM): Click Here

This superior jQuery/javascript plugin is developed by IBM. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.