Gantt Chart Control

Technologies > User Interface Add-Ins > Controls > Gantt Chart

Gantt Chart Control contains these sections:

File Structure

  • schema/ab-core/controls/gantt/ab-html-gantt-control.js
  • schema/ab-core/controls/gantt/ab-html-gantt-control.css
  • schema/ab-core/controls/gantt/ab-html-gantt-control-baselines.css
  • schema/ab-core/controls/gantt/ab-html-gantt-control.axvw
  • schema/ab-core/controls/gantt/ab-html-gantt-control-strings.js

Add Gantt Chart Control to View

  1. Add a dataSource for each level, and a dataSource for links to predecessor relationships, in the .axvw file.

  2. Add Gantt chart control's view file:

    <panel type="view" id="ganttControlView" file="ab-html-gantt-control.axvw"/>

  3. Add a panel with a DIV element to hold the Gantt chart:

    <panel type="html" id="ganttchart" dataSource="none"> <html> <div id="ganttContainer" style='width:100%; height:100%;'></div> </html> </panel>

  4. Initialize Gantt chart control with configuration properties:

    //specify the data config for projects var projects = {viewName:'ab-ex-dhtmlx-gantt.axvw', dataSourceId:'abGanttActivityDsProjects' , restriction: '', restrictionFieldsFromParent:[], restrictionFieldsForChild:['project.project_id'], fields:{id:'project.project_id', title:'project.project_name', description:'project.description', text:'project.project_id', start_date:'project.date_start', end_date:'project.date_end', progress:'0', type:'project'}}; //specify the data config for work packages var work_pkgs = {viewName:'ab-ex-dhtmlx-gantt.axvw', dataSourceId:'abGanttActivityDsWorkPackages' , restriction: '', restrictionFieldsFromParent:['work_pkgs.project_id'], restrictionFieldsForChild: ['work_pkgs.work_pkg_id', 'work_pkgs.project_id'], fields:{id:'work_pkgs.project_id;work_pkgs.work_pkg_id', title:'work_pkgs.work_pkg_id', description:'work_pkgs.description', text:'work_pkgs.work_pkg_id', start_date:'work_pkgs.date_est_start', end_date:'work_pkgs.date_est_end', progress:'0'}}; //specify the data config for activities var activities = {viewName:'ab-ex-dhtmlx-gantt.axvw', dataSourceId:'abGanttActivityDsActivityLogItems' , restriction: '', restrictionFieldsFromParent:['activity_log.work_pkg_id', 'activity_log.project_id'], restrictionFieldsForChild:[], fields:{id:'activity_log.activity_log_id', description:'activity_log.wbs_title', title:'activity_log.wbs_title', text:'activity_log.activity_log_id', start_date:'activity_log.date_scheduled', end_date:'activity_log.date_scheduled_end', progress:'0', type:'activity_log.activity_type', planned_start:'activity_log.date_planned_for', planned_end:'activity_log.date_planned_end'}}; //set up data's hierarchical relationship: projects - level 1; work packages - level 2; activities - level 3 work_pkgs.child = activities; projects.child = work_pkgs; //specify the link config var links = {viewName: 'ab-ex-dhtmlx-gantt.axvw', dataSourceId: 'abGanttActivityDsActivityLogItems', restriction:restriction, sourceField: 'activity_log.predecessors', targetField: 'activity_log.activity_log_id',type: 0}; //holidays to exclude var holidayRecords = this.abPropjetHolidayDatesDS.getRecords(); var holidays = holidayRecords.map(function(record) {return new Date(record.getValue('afm_holiday_dates.cal_date'))}); var ganttControl = new HtmlGanttControl({ panel: 'ganttchartPanel', container: 'ganttContainer', dataConfig: projects, linksConfig: links, holidays: holidays });

    Configuration Properties

    Property

    Description

    		Example
    columns The columns displayed in right-side tree panel

    [{name:"text", label:"Action Item", tree:true, min_width:200, width:300, resize:true },
    {name:"title", label:"Title", min_width:150, width:200, resize:true },
    {name:"start_date", label:"Start time", align:"center" , resize:true},
    {name:"duration", label:"Duration", align:"center" }]

    container The id of DIV object to contain the Gantt chart ganttContainer
    dataConfig Configuration object for data
    headerHeight Header height in pixels 50
    holidays Array of dates to exclude Gets holiday dates from afm_holiday_dates to exclude them
    linksConfig Configuration for links
    panel The id of the HTML panel in the view ganttchartPanel
    readonly boolean false|true False by default
    rowHeight Row height in pixels 30
    taskHeight Task bar height in pixels 15

    Configuration Properties for dataConfig

    Property Description Example
    child Specify data configuration for next Hierarchical level down
    dataSourceId The id of the dataSource defined in axvw file abGanttActivityDsProjects
    dsParameters Pass run-time dataSource parameter values {project_id: 'BUILD-HQ-NEW'} (project_id is a parameter defined in dataSource)
    fields A map to define correspond field names for database query or pass specified values to Gantt JSON data fields :{ id :'project.project_id', text :'project.project_id', title :'project.project_name', description :'project.description', start_date :'project.date_start', end_date :'project.date_end', progress :'0', type :'project'} Its corresponding data: { id : "BUILD-HQ-NEW", text : "BUILD-HQ-NEW", title : "HEADQUARTER BUILDING - NEW CONSTRUCTION", description : "Demolition of HQ 17 - int. walls" , start_date : "2016-01-19", end_date : "2019-04-01" , level : 0, open: "true", progress : "0", type : "project"}
    restriction Ab.view.Restriction object to restrict database records var restriction = new Ab.view.Restriction(); restriction.addClause('project.project_id', 'BUILD-HQ-NEW', '=');
    restrictionFieldsForChild Restriction field names for child in Array restrictionFieldsForChild :['work_pkgs.work_pkg_id', 'work_pkgs.project_id']
    restrictionFieldsFromParent Restriction field names from parent in Array restrictionFieldsFromParent :['activity_log.work_pkg_id', 'activity_log.project_id']
    viewName The file name of axvw view to define dataSources ab-ex-dhtmlx-gantt.axvw

    Configuration Properties for linksConfig

    Property Description Example
    dataSourceId The id of the dataSource defined in axvw file abGanttActivityDsActivityLogItems
    dsParameters Pass run-time dataSource parameter values {project_id: 'BUILD-HQ-NEW'} (project_id is a parameter defined in dataSource)
    restriction Ab.view.Restriction object to restrict database records var restriction = new Ab.view.Restriction(); restriction.addClause('activity_log.project_id', 'BUILD-HQ-NEW', '=');
    sourceField The field name of the source activity_log.predecessors
    targetField The field name of the target activity_log.activity_log_id
    type An integer value to describe task relationships such as predecessors DHTMLX Gantt defines link type as: { "finish_to_start": 0 , "start_to_start": 1 , "finish_to_finish": 2 , "start_to_finish": 3 } 0 → finish_to_start as default type value
    viewName The file name of axvw view to define dataSource ab-ex-dhtmlx-gantt.axvw

  5. Call refresh() API to render and display the chart:

    //grasp the restrictions and values for dataSource parameters from console if possible ganttControl.refresh(restrictionsForData, restrictionForLinks, dsParameters);

Methods

Method Parameters Example Value
collapseAll

customizeTooltip

task : task data object to access data properties


expandAll

exportReport

title : report title

exportConfig : object to configure the export

exportConfig : {outputType: 'pdf', orientation: 'landscape'}

outputType : pdf|docx|ppt

orientation : landscape|portrait

getTask taskId : task id value
refresh

restrictionsForData : object based on Ab.view.Restriction only for first level or Array of Ab.view.Restriction for multiple levels

restrictionForLinks : object based on Ab.view.Restriction

datasourceParameterValues : object based on dataSource parameter definitions in AXVW


render

selectTask taskId : task id value
showBaselines isHidden : boolean
undo

updateTask taskId : task id value
zoom

startDate : start date object

endDate : end date object

var fromDate = consolePanel.getFieldValue('activity_log.date_scheduled.from');
var toDate = consolePanel.getFieldValue(' activity_log.date_scheduled.to ');

this.ganttControl.zoom(new Date(fromDate), new Date(toDate))

zoomIn

zoomOut


For details, check /schema/ab-products/solutions/programming/gantt/ab-ex-html-gantt-chart.axvw, and its javaScript file.

Events

addEventListener(eventName, listener)

removeEventListener(eventName)

Supported events

Event Name Description Usage
onAfterLinkAdd

After a new link is added by drag and drop

Update corresponding database records
onAfterTaskUpdate

Fired after dragging the task

Update task database record
onBeforeLinkAdd

Fired before a new link is added by drag and drop

Check if a new link is valid
onBeforeTaskChanged

Fired before dragging the task

Check if modifying the task is allowed
onTaskDblClick

Fired when double clicking on a tree node or a task bar

Open a form dialog to change the task record

Localization

Localization Help Method Parameters Example
Util.formatDate(date, format)

date : a date object – required

format : 'long' or 'short' – optional, default is 'long' format 

Util.formatDate(new Date(2019, 09, 19)) → October 19, 2019
Util.formatDate(new Date(2019, 09, 19), 'short') → 10/19/2019
Util.localize(string) string : English string to be localized 
Util.localize('Title')

How to localize customized tooltips:

//create gantt chart control object var ganttControl = new HtmlGanttControl({panel: 'projFcpmWipGantt_panelHtml', container: 'gantt', linksConfig: {}, dataConfig: work_pkgs, readonly:true}); //define its customized tooltips ganttControl.custimizeTooltip = function(task){ var title = 'Project'; if(task.level === 1){ title = 'Work Package'; }else if(task.level === 2){ title = 'Activity'; } title = Util.localize(title); if(task.title && task.title!==''){ title = "<b>"+title+":</b> "+task.title+"<br/>"; }else{ title = "<b>"+title+":</b> "+task.id+"<br/>"; } if(task.description && task.description!==''){ title = title+ "<b>"+Util.localize("Description")+":</b> " + task.description+"<br/>"; } return title+"<b>"+Util.localize("Start Date")+":</b> " +Util.formatDate(task.start_date)+"<br/> <b>"+Util.localize("End Date")+":</b> " +Util.formatDate(task.end_date); };

How to localize customized columns:

//When defining your own columns to the control, localize all UI Texts var textFilter = "<div>"+Util.localize("Action Item")+" <input data-text-filter id='search' type='text' size='10' placeholder='"+Util.localize("Search...") + "' oninput='gantt.$doFilter(this.value, event)' tabindex='1000'></div>"; var ganttControl = new HtmlGanttControl({panel: 'ganttchart', container: 'gantt', linksConfig: linksConfig, dataConfig: projects, holidays: this.getHolidays(), sort:false, columns: [ {name:"text", label:textFilter, tree:true, min_width:150, width:220, resize:true }, {name:"start_date", label:Util.localize("Start"), width:110, align:"center" , resize:true}, {name:"end_date", label:Util.localize("End"), width:110, align:"center" } ] });

Server-Side Services

Use work flow rule "AbCommonResources-GanttService" to call Gantt services to grasp data and links.

  1. getData(dataConfig) to grasp array of data in JSON format:

    dataConfig as configuration for data.

Get data

var projects = {viewName:'ab-ex-dhtmlx-gantt.axvw', dataSourceId:'abGanttActivityDsProjects' , restriction: restriction, restrictionFieldsFromParent:[], restrictionFieldsForChild:['project.project_id'], fields:{id:'project.project_id', title:'project.project_name', description:'project.description', text:'project.project_id', start_date:'project.date_start', end_date:'project.date_end', progress:'0', type:'project'}}; var work_pkgs = {viewName:'ab-ex-dhtmlx-gantt.axvw', dataSourceId:'abGanttActivityDsWorkPackages' , restriction: '', restrictionFieldsFromParent:['work_pkgs.project_id'], restrictionFieldsForChild: ['work_pkgs.work_pkg_id', 'work_pkgs.project_id'], fields:{id:'work_pkgs.project_id;work_pkgs.work_pkg_id', title:'work_pkgs.work_pkg_id', description:'work_pkgs.description', text:'work_pkgs.work_pkg_id', start_date:'work_pkgs.date_est_start', end_date:'work_pkgs.date_est_end', progress:'0'}}; var activities = {viewName:'ab-ex-dhtmlx-gantt.axvw', dataSourceId:'abGanttActivityDsActivityLogItems' , restriction: '', restrictionFieldsFromParent:['activity_log.work_pkg_id', 'activity_log.project_id'], restrictionFieldsForChild:[], fields:{id:'activity_log.activity_log_id', description:'activity_log.wbs_title', title:'activity_log.wbs_title', text:'activity_log.activity_log_id', start_date:'activity_log.date_scheduled', end_date:'activity_log.date_scheduled_end', progress:'0', type:'activity_log.activity_type', planned_start:'activity_log.date_planned_for', planned_end:'activity_log.date_planned_end'}}; work_pkgs.child = activities; projects.child = work_pkgs; var result = Workflow.callMethod("AbCommonResources-GanttService-getData", projects); //result.data: Array of data return result.data;

  1. getLinks(linksConfig) to grasp array of links in JSON format:

    linksConfig as a configuration for links (link is the terminology defined by DHTMLX Gantt to describe task relationships such as predecessors).

Get links

var linksConfig= {viewName: 'ab-ex-dhtmlx-gantt.axvw', dataSourceId: 'abGanttActivityDsActivityLogItems', restriction:restriction, sourceField: 'activity_log.predecessors', targetField: 'activity_log.activity_log_id',type: 0}; var result = Workflow.callMethod("AbCommonResources-GanttService-getLinks", linksConfig); //result.data: Array of links return result.data;

  1. getDataAndLinks(dataAndLinksConfig) to grasp data and links:

Get data and links

var result = Workflow.callMethod("AbCommonResources-GanttService-getDataAndLinks", {data:dataConfig, links:linksConfig}); //result.data: {data:Array of data, links:Array of links} return result.data;

Sample view

http://localhost:8080/archibus/schem...-activity.axvw