Gantt View | Data Views | MESCIUS DataViewsJS JavaScript Demos

This example demonstrates how DataViews can present project start and end dates as a Gantt chart using the Gantt column type plugin. You can move the dates around by editing the data itself or manually by clicking and dragging the dates in the chart. The Gantt column plugin has these features: Visual display of hierarchical relationships, if they exist. This example uses hierarchical data (as defined in the hierarchy option array). Automatic column headers. See the month and week headings in the demo. Visual display of the percent complete. In the example, the percent complete is represented by the darker shade. Ability to adjust dates and percent complete by dragging. To create a Gantt view, all you need to do is reference the gantt.js plugin and set its options using the ganttColumn option array in the column definition as shown in the source code.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/DataViews/GanttView/GanttView/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="rendering, schedule, chart, gantt" />
<meta
name="description"
content="This example demonstrates how DataViews can present project start and end dates as a Gantt chart using the Gantt column type plugin."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gantt View | Data Views | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.gantt.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.gantt.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="popupTemplate" style="display: none">
<div class="dialog-body">
<div>
<div class="dialog-ids">
<div class="dialog-header">start date:</div>
<input type="date" class="dialog-content" data-column="start" />
</div>
<div class="dialog-ids" style="margin-left: 40px">
<div class="dialog-header">end date:</div>
<input type="date" class="dialog-content" data-column="end" />
</div>
</div>
<div class="dialog-header">description:</div>
<textarea class="dialog-text" style="height: 60px; font-style: italic" data-column="description"></textarea>
<div class="dialog-header">resources:</div>
<textarea class="dialog-text" style="height: 28px" data-column="resources"></textarea>
</div>
</template>
<div id="grid" class="grid"></div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

var cols = [
{
id: 'id',
caption: 'Id',
dataField: 'id',
width: 80,
},
{
id: 'start',
caption: 'Start',
dataField: 'start',
width: 100,
dataType: 'date',
format: 'mmm dd,yyyy',
},
{
id: 'end',
caption: 'End',
dataField: 'end',
width: 100,
dataType: 'date',
format: 'mmm dd,yyyy',
},
{
id: 'gantt',
ganttColumn: {
timeLineScale: 'month',
scale: 300,
start: 'start',
end: 'end',
text: 'description',
},
width: '*',
},
{
id: 'description',
caption: 'Description',
dataField: 'description',
visible: false,
},
{
id: 'resources',
caption: 'Resources',
dataField: 'resources',
visible: false,
},
{
id: 'predecessorID',
caption: 'predecessorID',
dataField: 'predecessorID',
visible: false,
allowEditing: false,
},
{
id: 'parentID',
caption: 'parentID',
dataField: 'parentID',
visible: false,
allowEditing: false,
},
];
var layout = new GC.DataViews.GridLayout({
colHeaderHeight: 48,
rowHeight: 48,
allowEditing: true,
editRowTemplate: '#popupTemplate',
editMode: 'popup',
hierarchy: {
keyField: 'id',
parentField: 'parentID',
collapsed: false,
column: 'id',
footer: {
visible: false,
},
},
});
new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout); // focus data.view by default
document.getElementById('grid').focus();

var data = [
{
id: '1',
description: 'SITE DESIGN',
start: 'Jan 01,2018',
end: 'Jan 10,2018',
percentComplete: 0.3,
resources: 'Steve, David, Wilson, Clark, Smith',
},
{
id: '2',
parentID: '1',
description: 'MARKET RESEARCH',
start: 'Jan 01,2018',
end: 'Jan 10,2018',
percentComplete: 0.7,
resources: 'Steve, David',
},
{
id: '3',
parentID: '1',
predecessorID: '2',
description: 'VISUAL DESIGN',
start: 'Jan 11,2018',
end: 'Jan 16,2018',
percentComplete: 0.1,
resources: 'Wilson',
},
{
id: '4',
parentID: '1',
predecessorID: '3',
description: 'PROGRAMMING',
start: 'Jan 16,2018',
end: 'Jan 29,2018',
percentComplete: 0.45,
resources: 'Steve, Clark, Smith',
},
{
id: '5',
parentID: '1',
predecessorID: '4',
description: 'TESTING',
start: 'Jan 19,2018',
end: 'June 01,2018',
percentComplete: 0.25,
resources: 'David, Wilson, Clark, Smith',
},
{
id: '6',
description: 'kick off',
start: 'Jan 02,2018',
end: 'Jan 02,2018',
content: '',
},
{
id: '7',
description: 'MARKETING',
start: 'Jan 03,2018',
end: 'Jan 22,2018',
percentComplete: 0.42,
resources: 'Garcia, Baker, Parker, Hill',
},
{
id: '8',
parentID: '7',
predecessorID: '6',
description: 'DETERMINE CREATIVE CONCEPT',
start: 'Jan 03,2018',
end: 'Jan 11,2018',
percentComplete: 0.56,
resources: 'Garcia, Baker',
},
{
id: '9',
parentID: '7',
predecessorID: '6',
description: 'PREPARING MESSAGES',
start: 'Jan 03,2018',
end: 'Jan 09,2018',
percentComplete: 0.74,
resources: 'Parker, Hill',
},
{
id: '10',
parentID: '7',
predecessorID: '8,9',
description: 'LAUNCH MARKETING PROGRAM',
start: 'Jan 12,2018',
end: 'Jan 22,2018',
percentComplete: 0.08,
resources: 'Garcia, Baker, Parker, Hill',
},
{
id: '11',
predecessorID: '13,10',
description: 'PRE RELEASE',
start: 'Jan 30,2018',
end: 'Jan 30,2018',
},
{
id: '12',
description: 'BUDGET',
start: 'Jan 01,2018',
end: 'Jan 03,2018',
percentComplete: 0.87,
resources: 'Scott, Green',
},
{
id: '13',
predecessorID: '12',
description: 'CONFORMING',
start: 'Jan 17,2018',
end: 'Jan 21,2018',
percentComplete: 0.1,
resources: 'Scott, Green',
},
{
id: '14',
predecessorID: '5,11',
description: 'FINAL RELEASE',
start: 'June 03,2018',
end: 'June 03,2018',
},
];

.gc-cell {
line-height: 40px;
}
.dialog-header {
font-weight: bold;
margin: 0.5em 0 0.5em 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dialog-body {
padding: 1em;
}
.dialog-ids {
display: inline-block;
}
.dialog-content {
width: 192px;
}
.dialog-text {
resize: none;
width: 424px;
}
.gc-popup-editing-area {
width: 454px;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFWaWV3cy9HYW50dFZpZXcvR2FudHRWaWV3L3B1cmVqcy9zdHlsZXMuc2NzcyIsIkRhdGFWaWV3cy9HYW50dFZpZXcvR2FudHRWaWV3L3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsaUJBQUE7QUNDRjs7QURFQTtFQUNFLGlCQUFBO0VBQ0EsdUJBQUE7RUFDQSx5QkFBQTtNQUFBLHFCQUFBO1VBQUEsaUJBQUE7QUNDRjs7QURFQTtFQUNFLFlBQUE7QUNDRjs7QURFQTtFQUNFLHFCQUFBO0FDQ0Y7O0FERUE7RUFDRSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxZQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtBQ0NGIiwiZmlsZSI6IkRhdGFWaWV3cy9HYW50dFZpZXcvR2FudHRWaWV3L3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmdjLWNlbGwge1xuICBsaW5lLWhlaWdodDogNDBweDtcbn1cblxuLmRpYWxvZy1oZWFkZXIge1xuICBmb250LXdlaWdodDogYm9sZDtcbiAgbWFyZ2luOiAwLjVlbSAwIDAuNWVtIDA7XG4gIHVzZXItc2VsZWN0OiBub25lO1xufVxuXG4uZGlhbG9nLWJvZHkge1xuICBwYWRkaW5nOiAxZW07XG59XG5cbi5kaWFsb2ctaWRzIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xufVxuXG4uZGlhbG9nLWNvbnRlbnQge1xuICB3aWR0aDogMTkycHg7XG59XG5cbi5kaWFsb2ctdGV4dCB7XG4gIHJlc2l6ZTogbm9uZTtcbiAgd2lkdGg6IDQyNHB4O1xufVxuXG4uZ2MtcG9wdXAtZWRpdGluZy1hcmVhIHtcbiAgd2lkdGg6IDQ1NHB4O1xufVxuIiwiLmdjLWNlbGwge1xuICBsaW5lLWhlaWdodDogNDBweDtcbn1cblxuLmRpYWxvZy1oZWFkZXIge1xuICBmb250LXdlaWdodDogYm9sZDtcbiAgbWFyZ2luOiAwLjVlbSAwIDAuNWVtIDA7XG4gIHVzZXItc2VsZWN0OiBub25lO1xufVxuXG4uZGlhbG9nLWJvZHkge1xuICBwYWRkaW5nOiAxZW07XG59XG5cbi5kaWFsb2ctaWRzIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xufVxuXG4uZGlhbG9nLWNvbnRlbnQge1xuICB3aWR0aDogMTkycHg7XG59XG5cbi5kaWFsb2ctdGV4dCB7XG4gIHJlc2l6ZTogbm9uZTtcbiAgd2lkdGg6IDQyNHB4O1xufVxuXG4uZ2MtcG9wdXAtZWRpdGluZy1hcmVhIHtcbiAgd2lkdGg6IDQ1NHB4O1xufSJdfQ== */