{"id":16903,"date":"2023-10-16T06:56:36","date_gmt":"2023-10-16T06:56:36","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16903"},"modified":"2023-11-28T14:05:06","modified_gmt":"2023-11-28T14:05:06","slug":"resource-chart-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/10\/16\/resource-chart-javascript\/","title":{"rendered":"How to Create Resource Chart with JavaScript"},"content":{"rendered":"

\"Resource<\/a>In today’s data-driven world, data visualization<\/a> simplifies complex information and empowers individuals to make informed decisions. One particularly valuable chart type<\/a> is the Resource Chart<\/strong>, which facilitates efficient resource allocation. This tutorial will be your essential guide to creating dynamic resource charts using JavaScript.<\/p>\n

A resource chart is a type of Gantt chart<\/a> that visualizes data about resource utilization, such as equipment, employees, and so on. It provides a comprehensive overview, making it easier to make informed decisions promptly. As an illustrative example, in this tutorial, I will represent the FIFA World Cup 2022 Qatar<\/a> schedule by stadium, enabling you to track when and where each game took place.<\/p>\n

Get your coding boots ready, and by the end of this guide, you’ll be well-equipped to create your own JS-based resource chart and have a valuable tool at your disposal for tracking your next favorite tournament, or servers status, or employee project assignments, or anything else of that kind.<\/p>\n

<\/p>\n

Resource Chart to Be Crafted<\/h2>\n

Are you excited to see what we’re about to create? Keep reading, and you\u2019ll learn how to craft a JavaScript resource chart like the one showcased below.<\/p>\n

\"resource-chart-preview\"<\/a><\/p>\n

Intrigued? Let’s kick off this thrilling journey together!<\/p>\n

A. Building Resource Chart<\/h2>\n

The resource chart might seem like a challenging structure at first glance, with horizontal bars representing time periods. However, I assure you that it’s quite straightforward once you get the hang of it. You can construct this chart by following these four basic steps:<\/p>\n

    \n
  1. Create a web page in HTML<\/li>\n
  2. Include the necessary JavaScript files<\/li>\n
  3. Load the data<\/li>\n
  4. Write some JS code to visualize the resource chart<\/li>\n<\/ol>\n

    Now, let\u2019s delve into each step in detail.<\/p>\n

    1. Create a web page in HTML<\/h3>\n

    To begin, create a basic HTML page to host your JavaScript resource chart. Within the body of the HTML document, add an HTML block element such as <div><\/code> that will serve as the container for your upcoming chart. Give it an id which you’ll reference later in your JavaScript code when creating the chart. To ensure the chart utilizes the correct position, define some CSS rules within the <style><\/code> block.<\/p>\n

    Below is an example of a simple web page created this way. I\u2019ve named the <div><\/code> element as \u201ccontainer\u201d and adjusted its height and width to make the chart utilize the entire screen.<\/p>\n

    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <title>JavaScript Resource Gantt Chart<\/title>\r\n  <style type=\"text\/css\">\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
    2. Include the necessary JavaScript files<\/h3>\n
    When it comes to data visualization, JavaScript charting libraries are invaluable tools. The key is to find one that not only suits your needs but also supports the specific chart type you’re looking for.<\/p>\n
    In this tutorial, I\u2019ll use AnyChart<\/a>, a long-living JS charting library that supports resource charts and provides comprehensive documentation<\/a>, and it\u2019s free (unless you integrate it into a commercial application). If you choose to use a different library, the overall process remains essentially the same.<\/p>\n
    You have two primary options for including the necessary JavaScript files of your chosen library: downloading them and using them locally, or linking to them directly via a CDN (Content Delivery Network). In this tutorial, I\u2019ll opt for the CDN approach. Below is what it will look like when linking the required scripts in the <head><\/code> section of your HTML page.<\/p>\n
    The chart’s code will find its home within the <script><\/code> tag in the <body><\/code> section. Alternatively, you can also place it in the <head><\/code> section if that suits your project structure better.<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <title>JavaScript Resource Gantt Chart<\/title>\r\n  <style type=\"text\/css\">\r\n    html,\r\n    body,\r\n    #container {\r\n      width: 100%;\r\n      height: 100%;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n  <\/style>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-gantt.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-data-adapter.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n  <div id=\"container\"><\/div>\r\n  <script>\r\n    \/\/ The place for the following chart\u2019s code.\r\n  <\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Load the data<\/h3>\n
    Now, let’s load the data. In this tutorial, the schedule of the 2022 FIFA World Cup<\/a> will be visualized. The data is available in JSON format on the provided GitHub gist<\/a>.<\/p>\n
    The data consists of a list of objects, with each object representing a stadium. Inside each stadium object, you’ll find details such as its name and city. Additionally, there is a property called “periods,” containing a list of matches that have been organized in that stadium. Each match is represented by the names of the two competing countries and the result of the match.<\/p>\n
    To correctly feed this type of data into the resource chart, utilize the anychart.data.loadJsonFile()<\/code> method. Below is the code snippet that loads the data:<\/p>\n
    anychart.data.loadJsonFile(\"https:\/\/gist.githubusercontent.com\/awanshrestha\/07b9144e8f2539cd192ef9a38f3ff8f5\/raw\/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11\/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json\");<\/code><\/pre>\n
    4. Write some JS code to visualize the resource chart<\/h3>\n
    With the data loaded, you are now ready to move on and see how a few lines of JavaScript code can transform into a fully functional resource chart.<\/p>\n
    Begin by adding the anychart.onDocumentReady()<\/code> function, which encapsulates all the necessary code to ensure that your code executes only when the page is fully loaded.<\/p>\n
    <script>\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The resource chart data and code will be in this section.\r\n  });\r\n<\/script><\/code><\/pre>\n
    Next, load the data and create a data tree.<\/p>\n
    anychart.onDocumentReady(function () {\r\n  \/\/ load the data\r\n  anychart.data.loadJsonFile(\r\n    \"https:\/\/gist.githubusercontent.com\/awanshrestha\/07b9144e8f2539cd192ef9a38f3ff8f5\/raw\/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11\/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json\",\r\n    function (data) {\r\n      \/\/ create a data tree\r\n      var treeData = anychart.data.tree(data, 'as-table\u2019);\r\n    }\r\n  );\r\n});<\/code><\/pre>\n
    Then, utilize the ganttResource()<\/code> method to create the resource Gantt chart and set your data tree using the data()<\/code> method.<\/p>\n
    \/\/ create a resource gantt chart\r\nvar chart = anychart.ganttResource();\r\n\r\n\/\/ set the data for the chart\r\nchart.data(treeData);<\/code><\/pre>\n
    Place the chart within the <div><\/code> container introduced in Step 1, and finally, draw the chart using the draw()<\/code> method.<\/p>\n
    \/\/ set the container \r\nchart.container(\"container\");\r\n\r\n\/\/ draw the chart\r\nchart.draw();<\/code><\/pre>\n
    Voila! You’ve successfully created a simple and fully functional resource chart using JavaScript. Take a look at how it appears in action; the interactive version of this chart is available here<\/a>. For your convenience, the complete code for the basic resource chart is also provided.<\/p>\n
    With this resource chart, you can easily visualize which matches took place in which stadiums, and you can scroll through the matches section on the right to view all the matches. But there’s more to explore, so let’s proceed to customize this interactive data visualization.<\/p>\n