Display Gantt Charts

Overview
Sample Image
Prepare the App
Set the Libraries
Sample Code

Overview

This sample displays the record list in the To Do App in the form of a Gantt chart:

The Gantt chart will display if there are one or more records in the list.
The colors set in the Gantt chart will vary according to the value of the "Priority" field of the To Do App.
The Gantt chart will be displayed on the Header Space Element of the App, which lies above the list of records.

Sample Image

The Gantt chart is displayed when the user navigates to the Record List page of the App.

Prepare the App

Create the form

Create an App with the following fields.

Field Type	Field Name	Field Code	Notes
Text	To Do	To_Do
Date	From	From
Date	To	To
Drop-down	Priority	Priority	Set the following 6 options: "A", "B", "C", "D", "E", "F"

Set the Libraries

CSS

This example uses the jQuery.Gantt library found in the Kintone CDN . Set the following URL into the Upload CSS File for PC option of the App's JavaScript and CSS Customization settings .

https://js.kintone.com/jquerygantt/20210106/css/style.css

JavaScript

This example uses jQuery v3.6.0 and jQuery.Gantt libraries found in the Kintone CDN . Set the following URL into the Upload JavaScript for PC option of the App's JavaScript and CSS Customization settings .

https://js.kintone.com/jquery/3.6.0/jquery.min.js https://js.kintone.com/jquerygantt/20210106/jquery.fn.gantt.min.js

Sample Code

Set the JavaScript file

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings .

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132


/*
 sample-ganttchart.js
 */

(function() {

  'use strict';

  var TITLE = 'To_Do'; // Set the field code of title
  var STARTDATE = 'From'; // Set the field code of start date
  var ENDDATE = 'To'; // Set the field code of end date
  var PRIORITY = 'Priority'; // Set the field code of priority

  // Date conversion for Gantt
  function convertDateTime(str) {
    if (str !== '') {
      return '/Date(' + (new Date(str)).getTime() + ')/';
    }
    return '';
  }

  // Escape HTML
  function escapeHtml(str) {
    return str
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  // Record list event
  kintone.events.on('app.record.index.show', function(event) {

    var records = event.records;
    var data = [];

    // Don't display when there are no records
    if (records.length === 0) {
      return;
    }
    var elSpace = kintone.app.getHeaderSpaceElement();

    // Add styles
    elSpace.style.marginLeft = '15px';
    elSpace.style.marginRight = '15px';
    elSpace.style.border = 'solid 1px #ccc';

    // Create Gantt chart element
    var elGantt = document.getElementById('gantt');
    if (elGantt === null) {
      elGantt = document.createElement('div');
      elGantt.id = 'gantt';
      elSpace.appendChild(elGantt);
    }

    // Set months, days of week, messages
    var ganttMonths, ganttDow,
      ganttWaitmessage = '';

    ganttMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    ganttDow = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    ganttWaitmessage = 'Please Wait...';

    // Set record data
    for (var i = 0; i < records.length; i++) {

      var colorGantt = 'ganttGray';
      switch (records[i][PRIORITY].value) {
        case 'A':
          colorGantt = 'ganttRed';
          break;
        case 'B':
          colorGantt = 'ganttOrange';
          break;
        case 'C':
          colorGantt = 'ganttGreen';
          break;
        case 'D':
          colorGantt = 'ganttBlue';
          break;
        case 'E':
          colorGantt = 'ganttYellow';
          break;
        case 'F':
          colorGantt = 'ganttGray';
          break;
        default:
          colorGantt = 'ganttGray';
      }

      var descGantt = '<strong>' + escapeHtml(records[i][TITLE].value) + '</strong>';
      if (records[i][STARTDATE].value) {
        descGantt += '<br />From: ' + escapeHtml(records[i][STARTDATE].value);
      }
      if (records[i][ENDDATE].value) {
        descGantt += '<br />To: ' + escapeHtml(records[i][ENDDATE].value);
      }
      if (records[i][PRIORITY].value) {
        descGantt += '<br />' + escapeHtml(records[i][PRIORITY].value);
      }

      var obj = {
        id: escapeHtml(records[i].$id.value),
        name: escapeHtml(records[i][TITLE].value),
        values: [{
          from: convertDateTime(records[i][STARTDATE].value),
          to: convertDateTime(records[i][ENDDATE].value),
          desc: descGantt,
          label: escapeHtml(records[i][TITLE].value),
          customClass: escapeHtml(colorGantt)
        }]
      };
      data.push(obj);
    }

    // Set Gantt object
    $(elGantt).gantt({
      source: data,
      navigate: 'scroll',
      scale: 'days', // days,weeks,months
      maxScale: 'months',
      minScale: 'days',
      months: ganttMonths,
      dow: ganttDow,
      left: '70px',
      itemsPerPage: 100,
      waitText: ganttWaitmessage,
      scrollToToday: true
    });
  });
})();

Set the CSS file

Prepare the following CSS in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload CSS for PC option of the JavaScript and CSS Customization settings .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


/*
sample-addin.css
*/

.fn-gantt .ganttGray {
    background-color: #d3d3d3;
}
.fn-gantt .ganttGray .fn-label {
    color: #444;
}
.fn-gantt .ganttYellow {
    background-color: #ffff99;
}
.fn-gantt .ganttYellow .fn-label {
    color: #444;
}
.fn-gantt .leftPanel, .fn-gantt .bar{
    z-index: 0;
}

Update the Settings

The files set in the JavaScript and CSS Customization settings should look like the following.

Attention

Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the jQuery and the jQueryGantt libraries are uploaded before the sample JavaScript file. The order of the uploads can be changed by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.

Click Save, and then on Update App. Add a few records into the App and navigate to the Record List page. A Gantt Chart should be displayed above the list of records. Bar charts within the Gantt Chart should be displayed depending on the fields set within each record.