{"id":4243,"date":"2017-09-08T19:45:39","date_gmt":"2017-09-08T15:45:39","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=4243"},"modified":"2023-05-05T12:58:51","modified_gmt":"2023-05-05T09:58:51","slug":"using-d3-visualize-workload-dhtmlxgantt","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/using-d3-visualize-workload-dhtmlxgantt\/","title":{"rendered":"Using D3 to Visualize Workload in dhtmlxGantt"},"content":{"rendered":"

Gantt charts are essential for project management. They are very helpful when you need to see the sequencing of all tasks, the overall timeline of a project and plan deadlines. To further improve planning functionality, you can visualize daily amounts of work for each person. It allows distributing workload in a more effective way. D3 is one of those useful tools that make visualizing data happier. So I\u2019ll show you how to expand your dhtmlxGantt chart<\/a> with D3. As a result, the app will also display working hours for every employee on specific dates. You can get the demo from GitHub<\/a> and view it online<\/a>.<\/p>\n

Initializing Gantt<\/h2>\n

Let\u2019s plan the layout of the app first. The layout will consist of two parts: the Gantt chart and the extra chart for the workload. The second chart will have two columns, just like the Gantt itself. The first column will display a list of all the employees. The second column will display a number of hours for each employee. In fact, it will be an extension for the Gantt timescale and will provide additional information about employees.<\/p>\n

\"dhtmlx<\/p>\n

Let\u2019s begin with initializing the Gantt chart<\/a>. Next, I\u2019ll add two panels for displaying workload and create a single div<\/em> for the app:<\/p>\n

<div<\/span> class<\/span>=<\/span>'widget'<\/span>><\/span>
\n  <div<\/span> id<\/span>=<\/span>'gantt_block'<\/span>><\/<\/span>div<\/span>><\/span>
\n  <div<\/span> class<\/span>=<\/span>'workload_users'<\/span>><\/span>Users list<\/<\/span>div<\/span>><\/span>
\n  <div<\/span> class<\/span>=<\/span>'workload_jobs'<\/span>><\/span>Tasks list<\/<\/span>div<\/span>><\/span>
\n<\/<\/span>div<\/span>><\/span>
\n
\n<script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span>
\n  gantt.init("gantt_block");
\n  gantt.load("data.json");
\n<\/<\/span>script<\/span>><\/span><\/div><\/div>\n

For correct rendering, don\u2019t forget to remove space around the app:<\/p>\n

html,<\/span> body {<\/span>
\n  padding<\/span>:<\/span> 0<\/span>;<\/span>
\n  margin<\/span>:<\/span> 0<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Let\u2019s style the layout of the app. According to the design, there should be two rows and two columns. So, I\u2019ll create a grid layout for the app:<\/p>\n

.widget{<\/span>
\n  display<\/span>:<\/span> grid;<\/span>
\n  grid-template-columns<\/span>:<\/span> 420px<\/span> 1fr;<\/span>
\n  grid-template-rows<\/span>:<\/span> 400px<\/span> 200px<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

The Gantt chart will span 2 columns in the first row:<\/p>\n

#gantt_block<\/span>{<\/span>
\n  grid-column<\/span>:<\/span> 1<\/span> \/ 3<\/span>;<\/span> \/* from col 1 to 3 (excl) *\/<\/span>
\n  grid-row<\/span>:<\/span> 1<\/span>;<\/span>
\n  height<\/span>:<\/span> 380px<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

And finally, here\u2019s the place for the future chart of workload in the second row:<\/p>\n

.workload_users{<\/span>
\n  grid-column<\/span>:<\/span> 1<\/span>;<\/span>
\n  grid-row<\/span>:<\/span> 2<\/span>;<\/span>
\n}<\/span>
\n.workload_jobs{<\/span>
\n  grid-column<\/span>:<\/span> 2<\/span>;<\/span>
\n  grid-row<\/span>:<\/span> 2<\/span>;<\/span>
\n  overflow<\/span>:<\/span> hidden<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Live demo >><\/a><\/p>\n

Adding List of Users<\/h2>\n

Next step is adding info about the employees on the project. Apart from the workload chart, employees\u2019 names will be displayed in the gantt grid and will serve as options for assigning tasks.<\/p>\n

Let\u2019s create the list of employees:<\/p>\n

gantt.serverList<\/span>(<\/span>"users"<\/span>,<\/span> [<\/span>
\n  {<\/span> label:<\/span>"Not Assigned"<\/span>,<\/span> key:<\/span>0<\/span>,<\/span> job:<\/span>" },
\n  { label:"<\/span>John Doe",     key:1, job:"<\/span>Developer" },
\n  \/\/others
\n]);<\/span><\/div><\/div>\n

In the real app, you can load the same data from a server-side.<\/p>\n

To display a list of names in the gantt grid, let\u2019s reconfigure the grid. By default there are four columns, I\u2019ll leave three of them (the Task name, the Start date and the Add columns) and add the column for owners of tasks:<\/p>\n

gantt.config<\/span>.columns<\/span> =<\/span> [<\/span>
\n  {<\/span>name:<\/span>"text"<\/span>,<\/span> label:<\/span>"Task name"<\/span>,<\/span> tree:<\/span>true<\/span>,<\/span> width:<\/span>170<\/span> }<\/span>,<\/span>
\n  {<\/span>name:<\/span>"owner"<\/span>,<\/span> align:<\/span> "center"<\/span>,<\/span> template:<\/span> function<\/span>(<\/span>item)<\/span> {<\/span>
\n    return<\/span> gantt.getLabel<\/span>(<\/span>'assignedTo'<\/span>,<\/span> item.assignedTo<\/span>)<\/span> }<\/span>,<\/span> width:<\/span> 120<\/span>}<\/span>,<\/span>
\n  {<\/span>name:<\/span>"start_date"<\/span>,<\/span> align:<\/span> "center"<\/span>,<\/span> width:<\/span> 90<\/span>}<\/span>,<\/span>
\n  {<\/span>name:<\/span>"add"<\/span>,<\/span> width:<\/span>40<\/span>}<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

The contents of the Owner<\/em> column are taken from the assignedTo<\/em> property in the tasks data. Unlike the default columns, this column also needs a header, so let\u2019s provide it:<\/p>\n

gantt.locale<\/span>.labels<\/span>.column_owner<\/span> =<\/span> "Owner"<\/span>;<\/span><\/div><\/div>\n

Now it\u2019s time to enable assigning tasks to specific employees. Let\u2019s reconfigure the Edit<\/em> form (aka the lightbox<\/em>). By default, the lightbox has two sections: task description and time period. Let\u2019s also add a section for choosing a person for the task:<\/p>\n

gantt.config<\/span>.lightbox<\/span>.sections<\/span> =<\/span> [<\/span>
\n  {<\/span>name:<\/span> "description"<\/span>,<\/span> height:<\/span> 38<\/span>,<\/span> map_to:<\/span> "text"<\/span>,<\/span> type:<\/span> "textarea"<\/span>,<\/span> focus:<\/span> true<\/span>}<\/span>,<\/span>
\n  {<\/span>name:<\/span> "owner"<\/span>,<\/span> height:<\/span> 22<\/span>,<\/span> map_to:<\/span> "assignedTo"<\/span>,<\/span> type:<\/span> "select"<\/span>,<\/span> options:<\/span> gantt.serverList<\/span>(<\/span>"users"<\/span>)<\/span>}<\/span>,<\/span>
\n  {<\/span>name:<\/span> "time"<\/span>,<\/span> type:<\/span> "duration"<\/span>,<\/span> map_to:<\/span> "auto"<\/span>}<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

Employees are selected from the user list that I added previously.<\/p>\n

Just like in the case of the grid area, the new section needs a name:<\/p>\n

gantt.locale<\/span>.labels<\/span>.section_owner<\/span> =<\/span> "Owner"<\/span>;<\/span><\/div><\/div>\n

Okay, the Gantt shows the names, and the lightbox is up and ready to serve:<\/p>\n

\"dhtmlx<\/p>\n

Live demo >><\/a><\/p>\n

Adding the Method to Get Workload per Day<\/h2>\n

The Gantt is configured and it\u2019s time to work on the workload chart. First thing, I need to provide the data for the chart. The list of users is ready, and I need to calculate individual working hours.<\/p>\n

Let\u2019s define the function that will return a table with numbers — an object with arrays with working hours per day for each assignee.<\/p>\n

The function will create the data<\/em> object with zero filled arrays. The length of each array equals to the number of days in the Gantt timescale:<\/p>\n

function<\/span> getJobData(<\/span>)<\/span>{<\/span>
\n
\n  var<\/span> state =<\/span> gantt.getState<\/span>(<\/span>)<\/span>;<\/span>
\n  var<\/span> users =<\/span> gantt.serverList<\/span>(<\/span>"users"<\/span>)<\/span>;<\/span>
\n
\n  var<\/span> data =<\/span> {<\/span>}<\/span>;<\/span>
\n  var<\/span> line =<\/span> [<\/span>]<\/span>;<\/span>
\n
\n  var<\/span> d =<\/span> new<\/span> Date<\/span>(<\/span>state.min_date<\/span>)<\/span>;<\/span>
\n  while (<\/span>d <<\/span> state.max_date<\/span>)<\/span>{<\/span>
\n   line.push<\/span>(<\/span>0<\/span>)<\/span>;<\/span>
\n   d.setDate<\/span>(<\/span>d.getDate<\/span>(<\/span>)<\/span>+<\/span>1<\/span>)<\/span>;<\/span>
\n }<\/span>
\n
\n for<\/span> (<\/span>var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> users.length<\/span>;<\/span> i++<\/span>)<\/span>
\n  data[<\/span>users[<\/span>i]<\/span>.key<\/span>]<\/span> =<\/span> [<\/span>]<\/span>.concat<\/span>(<\/span>line)<\/span>;<\/span>
\n  \/\/data generating logic<\/span>
\n
\n  return<\/span> data;<\/span>
\n}<\/span><\/div><\/div>\n

The table is created, and now I need to fill the table with correct working hours per person. Let\u2019s iterate through all the tasks and add working hours to people, to whom the tasks are assigned. I\u2019ll add 8 hours for each day of the task duration:<\/p>\n

gantt.eachTask<\/span>(<\/span>task =><\/span> {<\/span>
\n 
\n   var<\/span> t =<\/span> new<\/span> Date<\/span>(<\/span>task.start_date<\/span>)<\/span>;<\/span>
\n   var<\/span> line =<\/span> data[<\/span>task.assignedTo<\/span> ||<\/span> 0<\/span>]<\/span>;<\/span>
\n   while (<\/span>t <<\/span> task.end_date<\/span>)<\/span>{<\/span>
\n     i =<\/span> Math<\/span>.round<\/span>(<\/span>(<\/span>t -<\/span> state.min_date<\/span>)<\/span>\/<\/span>(<\/span>1000<\/span>*<\/span>60<\/span>*<\/span>60<\/span>*<\/span>24<\/span>)<\/span>)<\/span>;<\/span>
\n     line[<\/span>i]<\/span> +=<\/span> 8<\/span>;<\/span>
\n     t.setDate<\/span>(<\/span>t.getDate<\/span>(<\/span>)<\/span>+<\/span>1<\/span>)<\/span>;<\/span>
\n   }<\/span>
\n
\n }<\/span>)<\/span>;<\/span><\/div><\/div>\n

Then let\u2019s make sure that projects and milestones are excluded from calculations. I\u2019ll add this check at the beginning of the eachTask<\/em> method:<\/p>\n

  if<\/span> (<\/span>task.type<\/span> ===<\/span> "project"<\/span>  ||<\/span> task.type<\/span> ===<\/span> "milestone"<\/span>)<\/span>
\n    return<\/span>;<\/span><\/div><\/div>\n

Now I can load the data and calculate the workload:<\/p>\n

gantt.load<\/span>(<\/span>"data.json"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n  console.log<\/span>(<\/span>getJobData(<\/span>)<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Live demo >><\/a><\/p>\n

Visualizing Workload<\/h2>\n

Let\u2019s move on to the chart itself. There\u2019s going to be a list of employees on the left, just below the gantt grid. Let\u2019s use D3 and create the list:<\/p>\n

function<\/span> renderD3Diagram(<\/span>)<\/span>{<\/span>
\n
\n  d3.select<\/span>(<\/span>".workload_users"<\/span>)<\/span>.selectAll<\/span>(<\/span>".eachPerson"<\/span>)<\/span>
\n   .data<\/span>(<\/span>gantt.serverList<\/span>(<\/span>"users"<\/span>)<\/span>)<\/span>
\n   .enter<\/span>(<\/span>)<\/span>.append<\/span>(<\/span>"div"<\/span>)<\/span>      \/\/append a new div<\/span>
\n   .text<\/span>(<\/span>item =><\/span> item.label<\/span>)<\/span>       \/\/add the text from data<\/span>
\n   .attr<\/span>(<\/span>"class"<\/span>,<\/span> "eachPerson"<\/span>)<\/span>;<\/span>   \/\/add class to div<\/span>
\n       
\n  \/\/...chart<\/span>
\n}<\/span><\/div><\/div>\n

Next, I\u2019ll style the list with CSS, and here\u2019s what I\u2019ll have:<\/p>\n

\"gantt<\/p>\n

Next, let\u2019s draw the chart itself. Chart lines will represent each employee and will consist of boxes for every day in the Gantt timescale. Let\u2019s divide the task into subtasks:<\/p>\n