{"id":13400,"date":"2021-08-17T11:21:06","date_gmt":"2021-08-17T11:21:06","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=13400"},"modified":"2022-08-13T11:09:54","modified_gmt":"2022-08-13T11:09:54","slug":"js-resource-gantt-chart","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/08\/17\/js-resource-gantt-chart\/","title":{"rendered":"Building JS Resource Gantt Chart to Visualize Tokyo 2020 Paralympic Schedule"},"content":{"rendered":"

\"A<\/a>Smart resource allocation is a must to achieve a high level of operational efficiency. Aiming to ensure it, project management professionals commonly rely on a special form\u00a0of data visualization<\/a> called a Resource Gantt chart<\/strong>. Creating\u00a0graphics like this may seem daunting at first\u00a0sight.\u00a0But I am here to show you an easy way to build Resource Gantt charts with JS using\u00a0a compelling, topical example.<\/p>\n

Resource Gantt charts, also known as simply Resource charts<\/a>, consist of bars oriented along the horizontal axis. Each bar\u00a0visualizes\u00a0a resource used by an activity, with the length representing the duration while that resource is occupied by that activity. The left and right edges of the bars display the start and\u00a0end times. The resources, or event labels, are\u00a0listed on the left. The dates\u00a0and times are\u00a0shown in the header.<\/p>\n

Tokyo 2020 Paralympic Games<\/a> are just around the corner. So, I decided to visualize their sports program by venue. Follow along with this stepwise tutorial\u00a0and you will learn how to create a\u00a0cool JavaScript Resource Gantt chart\u00a0visualizing the Tokyo 2020 Paralympic schedule<\/strong>!<\/p>\n

<\/p>\n

JS Resource Gantt Chart Preview<\/h2>\n

Below\u00a0is a preview demonstrating how the final chart of the tutorial will look. Take a glance and then see how it will be built right before your eyes.<\/p>\n

\"The<\/p>\n

Creating Resource Gantt Chart with JavaScript<\/h2>\n

The basic process of building a JavaScript Resource Gantt chart, just like any other JS chart, can be split into\u00a0four\u00a0quite straightforward steps: create a page, include scripts, add data, and write some code for the visualization. So, let the games begin!<\/p>\n

1. Create an HTML page<\/h3>\n

The first step is creating a blank HTML page and adding a <div><\/code> element to hold the Resource chart. This block element is given a unique id that will be used for later reference.<\/p>\n

The width and height of the <div><\/code>\u00a0are set to 100% to display the chart over the whole screen but this can be modified as per the requirements.<\/p>\n

<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Resource Gantt Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
2. Include the necessary scripts<\/h3>\n
The next step is to link the required JS scripts to create the chart we need.<\/p>\n
Although there are many\u00a0JavaScript charting libraries out there,\u00a0far from all of them have\u00a0Gantt\u00a0charts, not to mention Resource Gantt charts specifically. In this tutorial, I\u00a0use AnyChart JS Charts<\/a>. This JavaScript (HTML5) charting library is\u00a0a\u00a0good fit here as it supports\u00a0both Project and Resource Gantt charts out of the box under the AnyGantt<\/a> umbrella.\u00a0Plus, it has extensive documentation<\/a>\u00a0and useful examples<\/a>\u00a0that can be experimented with\u00a0in an online JS chart code editor utility called Playground<\/a>. The library is free for non-commercial use.<\/p>\n
So, I will reference its corresponding files. For my JS Resource chart, I need to add AnyChart\u2019s \u2018Core<\/a>\u2019 and \u2018Gantt<\/a>\u2019 modules, as well as the \u2018Data Adapter\u2019<\/a>\u00a0module that will let me load the data in a straightforward manner. Remember that the script files are\u00a0included in the <head><\/code> section of the web page.<\/p>\n
<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Resource Gantt Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-gantt.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ The code for the JS resource chart will be placed here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
3. Add the data<\/h3>\n
AnyChart\u00a0supports\u00a0multiple<\/a> ways\u00a0of loading data to charts like CSV, JSON, Google Sheets,\u00a0etc Here, I go with JSON.<\/p>\n
I have already taken\u00a0data about the Paralympic venues from the official website<\/a> and pre-processed it to include relevant fields for the JS Resource Gantt chart. You can download the JSON file here<\/a>.<\/p>\n
Loading the JSON data from the file:<\/p>\n
anychart.data.loadJsonFile(\"https:\/\/gist.githubusercontent.com\/shacheeswadia\/21da3da501982400b8ca35690b17ea5a\/raw\/d17e3774c6db1502b5d95677a5656ecc43f24526\/resourceChartData.json\", function (data) {})<\/code><\/pre>\n
4. Write the code to build the chart<\/h3>\n
So, the qualifying steps are all done, and now is the time for the main event. One of the best parts about using a\u00a0robust JS charting library is that a basic functional chart is created in just a few lines of code.<\/p>\n
Before anything else, I put all the code inside the anychart.onDocumentReady()<\/code> function to ensure that the page is fully loaded before the code is executed. Next, the data is loaded using the\u00a0anychart.data.loadJsonFile()<\/code> function.\u00a0A Resource Gantt chart requires the data in a tree format. This is done by creating\u00a0a data tree. After this, the chart instance is created\u00a0and the data is set for the chart. To ensure that the bar elements fit into the screen, the fitAll<\/code> function is specified.<\/p>\n
\/\/ create a data tree\r\nvar treeData = anychart.data.tree(data, \"as-tree\");\r\n\r\n\/\/ create a resource gantt chart\r\nvar chart = anychart.ganttResource(); \r\n\r\n\/\/ set the data\r\nchart.data(treeData); \r\n\r\n\/\/ fit the elements to the width of the timeline\r\nchart.fitAll();<\/code><\/pre>\n
The following thing is absolutely optional but in this case, it will make the visualization look even more neat and cute:<\/p>\n
\/\/ set the position of the splitter to match the first column\r\nchart.dataGrid().fixedColumns(true);<\/code><\/pre>\n
The final steps are setting the container id to the previously declared <div><\/code> reference and drawing the resulting JS-based Resource Gantt chart.<\/p>\n
\/\/ set the container id\r\nchart.container(\"container\");\r\n\r\n\/\/ draw the chart\r\nchart.draw();<\/code><\/pre>\n
Isn\u2019t this absolutely unbelievable? A functional, beautiful, interactive JavaScript Resource Gantt chart is built in so few lines of code!<\/p>\n