{"id":12775,"date":"2024-08-15T17:10:45","date_gmt":"2024-08-15T14:10:45","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12775"},"modified":"2024-08-15T18:41:50","modified_gmt":"2024-08-15T15:41:50","slug":"visualizing-resource-workload-dhtmlx-scheduler-suites-chart-widget","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/visualizing-resource-workload-dhtmlx-scheduler-suites-chart-widget\/","title":{"rendered":"Visualizing Resource Workload in DHTMLX Scheduler with Suite\u2019s Chart Widget"},"content":{"rendered":"

DHTMLX Scheduler is a comprehensive UI component for handling complex scheduling and task management needs in business-oriented web apps. However, certain scenarios may require custom solutions. For instance, if a project has limited resources i.e. workforce, it is necessary to make sure that their workload is distributed with extra precision. For this purpose, it can be useful to apply a data visualization tool such as a bar chart.<\/p>\n

In this tutorial, you will learn how to connect our Scheduler component to the JavaScript Chart library from the DHTMLX Suite, thereby enhancing control over the resource workload in any view of your scheduling app.<\/p>\n

Guide on Connecting DHTMLX Scheduler with Suite\u2019s Chart Library<\/h5>\n

If you need to add an auxiliary mechanism for managing the workload of resources to our JavaScript scheduling library<\/a>, you can complement it with a bar chart based on the Suite\u2019s Chart widget like in the sample below. Using this sample, you can change the working time of employees, and these changes will be dynamically displayed in the chart. Moreover, you can also hide and show the data on a particular employee in both widgets by simply clicking on names of employees in the chart’s legend.<\/p>\n

\"visualizingCheck the sample ><\/a><\/p>\n

Previously, we shared with you how to add the Calendar<\/a> and List<\/a> controls to DHTMLX Scheduler, so you can be sure that the integration of two DHTMLX products won\u2019t include any hidden pitfalls. But still, we want to highlight the main steps to help you combine DHTMLX Scheduler with the Chart widget<\/a> much faster.<\/p>\n

Step 1: Initializing and Configuring Scheduler<\/h6>\n

In general, DHTMLX Scheduler can be initialized on a page via the scheduler’s markup or the header configuration property. <\/p>\n

In this blog post, we use the second option:<\/p>\n

scheduler.init<\/span>(<\/span>"scheduler_here"<\/span>,<\/span>new<\/span> Date<\/span>(<\/span>2024<\/span>,<\/span> 5<\/span>,<\/span> 24<\/span>)<\/span>,<\/span>"week"<\/span>)<\/span>;<\/span><\/div><\/div>\n

Now, we proceed to the scheduler configuration:<\/p>\n