Gantt View

This example demonstrates how DataViews can present project start and end dates as a Gantt chart using the Gantt column type plugin.

<p>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.</p> <p>The Gantt column plugin&nbsp;has these features:</p> <ul> <li>Visual display of hierarchical relationships, if they exist. This example uses hierarchical data (as defined in the <strong>hierarchy</strong> option array).</li> <li>Automatic column headers. See the month and week headings in the demo.</li> <li>Visual display of the percent complete. In the example, the percent complete is represented by the darker shade.</li> <li>Ability to adjust dates and percent complete by dragging.</li> </ul> <p>To create a Gantt view, all you need to do is reference the <strong>gantt.js</strong> plugin and set its options using the <strong>ganttColumn</strong>&nbsp;option array in the column definition as shown in the source code.</p>
<!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 | GrapeCity 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" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <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: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </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"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <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== */