Display Gantt Charts

Contents

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.

Screenshot: The Gantt chart is displayed on the header space of the Kintone App.

Prepare the App

Create the form

Create an App (External link) 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”

Screenshot: The fields placed into the form.

Set the Libraries

CSS

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

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

JavaScript

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

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 (External link).

  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, '&')
      .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 (External link).

 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 (External link) should look like the following.

Screenshot: The necessary files have benn uploaded on the JavaScript and CSS Cusomization screen.

caution
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.