ibm-gantt-chart

Usage

Here is a simple example to illustrate how to include the Gantt into a web page.

  
    <title>Simple Gantt</title>
    
    

    
    <style>
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #gantt {
        height: 100%;
      }
    </style>
  
  
    <div id="gantt"></div>

    
  

Including this Gantt chart into a Web page consists on:

• Including the Gantt library bundle files, one Javascript and one CSS file.
• Create DOM element that will contain the Gantt chart. This is done here with the declaration:

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

• Create a Javascript object to configure the Gantt.
• Instantiate the Gantt chart object with this configuration object and the id of the DOM element to contain the Gantt chart. As explained below, the Gantt library is packaged for several frameworks (jQuery, React or as a pure Javascript component). Use the one that fits the need of your page. For this example, the Vanilla Javascript component is used.

Data

In the first example, data is provided to the Gantt as an array of resources created on the client side to get a self contained example. The Gantt can also be configured to fetch data from a server and map this data into a Gantt model. The example Activity chart shows how customizable the process of fetching user data and mapping it to a Gantt model can be.

Formatting, filtering and other features

The Gantt library is rich of features for formatting and navigating into user data. The Gantt examples illustrate how to configure and use these features.

Gantt packages

The simple Gantt chart example uses the Gantt chart as a Vanilla Javascript component. The Gantt library also distributes the Gantt as a React component and a jQuery component. For those packages, the configuration of the Gantt is done using the same configuration object. Only the bundle files to include and the how the Gantt object is constructed differ.

1. The Gantt as a React component

   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 = { ... }; // Same format as in the simple Gantt example.
   
   ReactDOM.render(, document.getElementById('gantt'));
   

2. The Gantt as a jQuery component

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