Display Gantt Charts

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

Prepare the App

Create an App with the following fields:

Field Type Field Name Field Code Options
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"

 

US_3.png 

 

Sample Code

JavaScript Libraries

This customization will use the jQuery and jQueryGantt libraries found in the kintone CDN. Specify the following URLs in the JavaScript and CSS Customization settings of the App.

  • jQuery
    https://js.kintone.com/jquery/2.1.1/jquery.min.js
  • jQueryGantt
    https://js.kintone.com/jquerygantt/20140623/jquery.fn.gantt.min.js

JavaScript file

Save the following code as a JavaScript file and upload it to the JavaScript and CSS Customization settings of the App.

CSS Libraries

Open the JavaScript and CSS Customization settings and specify the following library found in the kintone CDN.

  • jQueryGantt
    https://js.kintone.com/jquerygantt/20140623/css/style.css

CSS files

Save the following codes as a CSS file and upload it to the JavaScript and CSS Customization settings to add a bit more flavor to the style.

 

US_2.PNG

 

Save the App's settings, and update the App.

The Result

Add a number of records into the App and navigate to the record list to view the Gantt chart. The Gantt chart should be displayed above the list of records.

US_1.PNG

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!