Chartjs Stacked bar graph with forEach for labels

Kayd Anderson 0
Viewed 86

sorry if this has been answered already but I cant figure how to include labels in my for each. Im getting my data from spring boot with the data called 'employees' and there is 20 something employees in the 'employees' data. I loop through and add the employee names to the x axis and the personMonths to the y axis. Each employee has a project, sometimes an employee has more than one project. I managed to get a stacked bar graph working. The Spring/thymeleaf data looks like this, this is one employee with 4 projects:


    const employees = [
    {"name":"Nat","contractFrom":"01.4.2022","contractTo":"01.3.2025","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"4","monthTo":"12","personMonths":9.0,"employee":null,"empty":false}]
      },
      {"name":"Kate","contractFrom":"01.7.2021","contractTo":"No date entered","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"11","monthTo":"12","personMonths":2.0,"employee":null,"empty":false
    },{"projectId":"87141502","projectName":"Project9","startDate":"10/22","endDate":"10/22","monthFrom":"1","monthTo":"10","personMonths":10.0,"employee":null,"empty":true}]
    },
      {"name":"Adam","contractFrom":"15.07.2021","contractTo":"14.07.2024","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":false
    },                                                                                             {"projectId":"87141502","projectName":"Project9","startDate":"10/22","endDate":"10/22","monthFrom":"9","monthTo":"9","personMonths":1.0,"employee":null,"empty":true},{"projectId":"61241516","projectName":"Project12","startDate":"05/22","endDate":"04/25","monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":true},{"projectId":"61241510","projectName":"Project16","startDate":"10/19","endDate":"09/22","monthFrom":"1","monthTo":"8","personMonths":8.0,"employee":null,"empty":true}]
      },
      {"name":"Dan","contractFrom":"01.8.2021","contractTo":"01.7.2024","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":false},{"projectId":"61241513","projectName":"Project8","startDate":"01/22","endDate":"03/23","monthFrom":"5","monthTo":"12","personMonths":8.0,"employee":null,"empty":true},{"projectId":"61241510","projectName":"Project16","startDate":"10/19","endDate":"09/22","monthFrom":"6","monthTo":"9","personMonths":4.0,"employee":null,"empty":true}]
      },
      {"name":"John","contractFrom":"01.3.2022","contractTo":"01.4.2025","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"8","monthTo":"12","personMonths":5.0,"employee":null,"empty":false},{"projectId":"61241515","projectName":"Project13","startDate":"09/22","endDate":"08/25","monthFrom":"9","monthTo":"12","personMonths":4.0,"employee":null,"empty":true},{"projectId":"61241510","projectName":"Project16","startDate":"10/19","endDate":"09/22","monthFrom":"3","monthTo":"8","personMonths":6.0,"employee":null,"empty":true}]
      },
      {"name":"Frank","contractFrom":"01.6.2022","contractTo":"01.7.2025","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":false},{"projectId":"61241513","projectName":"Project8","startDate":"01/22","endDate":"03/23","monthFrom":"6","monthTo":"9","personMonths":4.0,"employee":null,"empty":true},{"projectId":"612415","projectName":"Project21","startDate":"08/21","endDate":"07/25","monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":true}]
      },
      {"name":"Mic","contractFrom":"","contractTo":"No date entered","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"1","monthTo":"3","personMonths":1.5,"employee":null,"empty":false},{"projectId":"61741501","projectName":"Project4","startDate":"10/21","endDate":"09/22","monthFrom":"1","monthTo":"9","personMonths":4.5,"employee":null,"empty":true},{"projectId":"61641502","projectName":"Project5","startDate":"04/22","endDate":"09/22","monthFrom":"4","monthTo":"9","personMonths":3.0,"employee":null,"empty":true}]
      },
      {"name":"Michael","contractFrom":"01.11.2021","contractTo":"01.10.2024","projects":[{"projectId":"61241513","projectName":"Project8","startDate":"01/22","endDate":"03/23","monthFrom":"10","monthTo":"12","personMonths":3.0,"employee":null,"empty":true}]
      },
      {"name":"Mia","contractFrom":"01.5.2022","contractTo":"01.10.2023","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"5","monthTo":"12","personMonths":8.0,"employee":null,"empty":false}]
      },
      {"name":"Wendy","contractFrom":"15.11.2021","contractTo":"14.11.2024","projects":[{"projectId":"61341508","projectName":"Project3","startDate":"01/22","endDate":"12/24","monthFrom":"1","monthTo":"12","personMonths":12.0,"employee":null,"empty":true}]
      },
      {"name":"Rina","contractFrom":"15.09.2021","contractTo":"01.5.2022","projects":[{"projectId":"61141504","projectName":"Project11","startDate":"12/22","endDate":"12/22","monthFrom":"1","monthTo":"5","personMonths":5.0,"employee":null,"empty":true}]
      },
      {"name":"Luke","contractFrom":"15.01.2022","contractTo":"15.04.2023","projects":[{"projectId":"61241512","projectName":"Project6","startDate":"01/22","endDate":"03/23","monthFrom":"0","monthTo":"12","personMonths":11.5,"employee":null,"empty":true}]
      },
      {"name":"Harry","contractFrom":"01.12.2020","contractTo":"01.5.2025","projects":[{"projectId":"61241514","projectName":"Project7","startDate":"01/22","endDate":"03/23","monthFrom":"1","monthTo":"12","personMonths":12.0,"employee":null,"empty":true}]
      },
      {"name":"Bill","contractFrom":"01.4.2021","contractTo":"01.3.2025","projects":[{"projectId":"61241509","projectName":"Project17","startDate":"10/20","endDate":"09/23","monthFrom":"1","monthTo":"12","personMonths":12.0,"employee":null,"empty":true}]
      },
      {"name":"Zane","contractFrom":"01.4.2021","contractTo":"01.3.2025","projects":[{"projectId":"87441507","projectName":"Project14","startDate":"10/22","endDate":" 04/2024","monthFrom":"11","monthTo":"12","personMonths":2.0,"employee":null,"empty":true},{"projectId":"61341507","projectName":"Project15","startDate":"01/19","endDate":"06/22?","monthFrom":"1","monthTo":"4","personMonths":4.0,"employee":null,"empty":true},{"projectId":"61241510","projectName":"Project16","startDate":"10/19","endDate":"09/22","monthFrom":"5","monthTo":"9","personMonths":5.0,"employee":null,"empty":true},{"projectId":"61241509","projectName":"Project17","startDate":"10/20","endDate":"09/23","monthFrom":"10","monthTo":"10","personMonths":1.0,"employee":null,"empty":true},{"projectId":"61241510","projectName":"Project18","startDate":"03/21","endDate":"10/23","monthFrom":"3","monthTo":"4","personMonths":2.0,"employee":null,"empty":true}]
      },
      {"name":"Barry","contractFrom":"01.3.2021","contractTo":"01.3.2023","projects":[{"projectId":"13415000","projectName":"Project1","startDate":null,"endDate":null,"monthFrom":"9","monthTo":"12","personMonths":4.0,"employee":null,"empty":false},                                                       {"projectId":"87141503","projectName":"Project10","startDate":"10/22","endDate":"10/22","monthFrom":"3","monthTo":"8","personMonths":6.0,"employee":null,"empty":true},{"projectId":"61141504","projectName":"Project11","startDate":"12/22","endDate":"12/22","monthFrom":"7.0","monthTo":"12","personMonths":6.0,"employee":null,"empty":false}]
      },
      {"name":"Nigel","contractFrom":"15.04.2021","contractTo":"01.4.2022","projects":[{"projectId":"61241510","projectName":"Project18","startDate":"03/21","endDate":"10/23","monthFrom":"1","monthTo":"4","personMonths":4.0,"employee":null,"empty":true}]
      },
      {"name":"Tony","contractFrom":"01.10.2021","contractTo":"01.9.2024","projects":[{"projectId":"61141504","projectName":"Project11","startDate":"12/22","endDate":"12/22","monthFrom":"8","monthTo":"9","personMonths":2.0,"employee":null,"empty":true},                                                   {"projectId":"61241511","projectName":"Project20","startDate":"06/21","endDate":"05/25","monthFrom":"1","monthTo":"10.0","personMonths":10.0,"employee":null,"empty":false}]
      },
      {"name":"Ross","contractFrom":"15.12.2021","contractTo":"15.12.2024","projects":[{"projectId":"87141506","projectName":"Project19","startDate":"03/21","endDate":"02/25","monthFrom":"1","monthTo":"12","personMonths":12.0,"employee":null,"empty":true}]
      },
      {"name":"Ray","contractFrom":"15.06.2022","contractTo":"01.10.2023","projects":[{"projectId":"61241510","projectName":"Project18","startDate":"03/21","endDate":"10/23","monthFrom":"5","monthTo":"12","personMonths":8.0,"employee":null,"empty":true}]
      },
      {"name":"Colin","contractFrom":"","contractTo":"No date entered","projects":[]}
    ];```
    
    [Here is my graph][1]
    
    What Im after is to have the project names above where the 'project months' is hard coded at the top. Also if possible different colours for different projects. Here is my code, please help, many thanks.
    ```
    
    
        var employeeData = [];
            employees.forEach(function(empl){
                empl.projects.forEach(function(employeeProject) {
                    var names = employeeProject.projectName;
                var employee = {x: empl.name, y: employeeProject.personMonths};
                employeeData.push(employee);
    
                })
        })
    
        const labelChart = 'Person Months'
    
    // setup
        const data = {
    //      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          datasets: [{
            label: 'project months',
            data: employeeData,
            backgroundColor: 'rgba(235, 56, 56, 0.4)',
            borderColor: 'rgba(255, 26, 104, 1)'
          }]
        };
    
        // config
        const config = {
          type: 'bar',
          data,
          options: {
            scales: {
              y: {
                beginAtZero: true
              }
            },
            plugins: {
                tooltip: {
                    yAlign: 'bottom',
                    titleMarginBottom: 0
                }
            }
          }
        };
    
        // render init block
        const myChart = new Chart(
          document.getElementById('myChart'),
          config
        );

Updated graph image Another Image with codepen data

{
  name: 'John Smith', 
  contractFrom: '01.3.2021',
  contractTo: '01.3.2023',
  projects: [{
    projectId: '0001', 
    projectName: 'project1', 
    startDate: '9/22', 
    endDate: '8/24', 
    monthFrom: '9', 
    monthTo: '12', 
    personMonths: 1.0
  }]
}, {
  name: 'Bob Kennedy', 
  contractFrom: '01.3.2021',
  contractTo: '01.3.2023',
  projects: [{
    projectId: '0001', 
    projectName: 'project1', 
    startDate: '9/22', 
    endDate: '8/24', 
    monthFrom: '9', 
    monthTo: '12', 
    personMonths: 2.0
  }, {
    projectId: '0002', 
    projectName: 'Project 2', 
    startDate: '10/22', 
    endDate: '10/22', 
    monthFrom: '3', 
    monthTo: '8', 
    personMonths: 3.0
  }]
}, {
  name: 'Kevin Red', 
  contractFrom: '01.3.2021',
  contractTo: '01.3.2023',
  projects: [{
    projectId: '0001', 
    projectName: 'project1', 
    startDate: '9/22', 
    endDate: '8/24', 
    monthFrom: '9', 
    monthTo: '12', 
    personMonths: 4.0
  }, {
    projectId: '0002', 
    projectName: 'Project 2', 
    startDate: '10/22', 
    endDate: '10/22', 
    monthFrom: '3', 
    monthTo: '8', 
    personMonths: 5.0
  }, {
    projectId: '0003', 
    projectName: 'Project 3', 
    startDate: '12/22', 
    endDate: '12/22', 
    monthFrom: '10', 
    monthTo: '12', 
    personMonths: 6.0
  }, {
    projectId: '0004', 
    projectName: 'Project 4', 
    startDate: '12/22', 
    endDate: '12/22', 
    monthFrom: '10', 
    monthTo: '12', 
    personMonths: 7.0
  }]
},
  {
  name: 'James Brown', 
  contractFrom: '01.3.2021',
  contractTo: '01.3.2023',
  projects: [{
    projectId: '0001', 
    projectName: 'project1', 
    startDate: '9/22', 
    endDate: '8/24', 
    monthFrom: '9', 
    monthTo: '12', 
    personMonths: 8.0
  }, {
    projectId: '0002', 
    projectName: 'Project 2', 
    startDate: '10/22', 
    endDate: '10/22', 
    monthFrom: '3', 
    monthTo: '8', 
    personMonths: 9.0
  }, {
    projectId: '0003', 
    projectName: 'Project 3', 
    startDate: '12/22', 
    endDate: '12/22', 
    monthFrom: '10', 
    monthTo: '12', 
    personMonths: 10.0
  }, {
    projectId: '0004', 
    projectName: 'Project 4', 
    startDate: '12/22', 
    endDate: '12/22', 
    monthFrom: '10', 
    monthTo: '12', 
    personMonths: 11.0
  }]
}
];```
spring-thymeleaf stacked-bar-chart foreach chart.js javascript
1 Answers

If I understood well, I think you could create the labels for the chart getting all employees name. Then you can extract all datasets getting all projects for employee, setting the label as project name, the data as an array with all person months of employee (in my example I have got only 4 employees therefore data.length = 4).

See snippet or codepen: https://codepen.io/stockinail/pen/BaxjwWM

// ------------------
// data to show on te chart
// ------------------
const employees = [
{
  name: 'John Smith', 
  contractFrom: '01.3.2021',
  contractTo: '01.3.2023',
  projects: [{
    projectId: '0001', 
    projectName: 'project1', 
    startDate: '9/22', 
    endDate: '8/24', 
    monthFrom: '9', 
    monthTo: '12', 
    personMonths: 1.0
  }]
}, {
  name: 'Bob Kennedy', 
  contractFrom: '01.3.2021',
  contractTo: '01.3.2023',
  projects: [{
    projectId: '0001', 
    projectName: 'project1', 
    startDate: '9/22', 
    endDate: '8/24', 
    monthFrom: '9', 
    monthTo: '12', 
    personMonths: 2.0
  }, {
    projectId: '0002', 
    projectName: 'Project 2', 
    startDate: '10/22', 
    endDate: '10/22', 
    monthFrom: '3', 
    monthTo: '8', 
    personMonths: 3.0
  }]
}, {
  name: 'Kevin Red', 
  contractFrom: '01.3.2021',
  contractTo: '01.3.2023',
  projects: [{
    projectId: '0001', 
    projectName: 'project1', 
    startDate: '9/22', 
    endDate: '8/24', 
    monthFrom: '9', 
    monthTo: '12', 
    personMonths: 4.0
  }, {
    projectId: '0002', 
    projectName: 'Project 2', 
    startDate: '10/22', 
    endDate: '10/22', 
    monthFrom: '3', 
    monthTo: '8', 
    personMonths: 5.0
  }, {
    projectId: '0003', 
    projectName: 'Project 3', 
    startDate: '12/22', 
    endDate: '12/22', 
    monthFrom: '10', 
    monthTo: '12', 
    personMonths: 6.0
  }, {
    projectId: '0004', 
    projectName: 'Project 4', 
    startDate: '12/22', 
    endDate: '12/22', 
    monthFrom: '10', 
    monthTo: '12', 
    personMonths: 7.0
  }]
},
  {
  name: 'James Brown', 
  contractFrom: '01.3.2021',
  contractTo: '01.3.2023',
  projects: [{
    projectId: '0001', 
    projectName: 'project1', 
    startDate: '9/22', 
    endDate: '8/24', 
    monthFrom: '9', 
    monthTo: '12', 
    personMonths: 8.0
  }, {
    projectId: '0002', 
    projectName: 'Project 2', 
    startDate: '10/22', 
    endDate: '10/22', 
    monthFrom: '3', 
    monthTo: '8', 
    personMonths: 9.0
  }, {
    projectId: '0003', 
    projectName: 'Project 3', 
    startDate: '12/22', 
    endDate: '12/22', 
    monthFrom: '10', 
    monthTo: '12', 
    personMonths: 10.0
  }, {
    projectId: '0004', 
    projectName: 'Project 4', 
    startDate: '12/22', 
    endDate: '12/22', 
    monthFrom: '10', 
    monthTo: '12', 
    personMonths: 11.0
  }]
}];
// ---------------------
// scans all data, creating an array as result with all employees names
// this array represents the "labels" of the scale X
// ---------------------
const labels = employees.reduce(function(result, item) {
  // adds the employee name to the array to return
  result.push(item.name);
  return result;
}, []); // <-- in the reduce, the [] is the initial value of variable "result"
// ---------------------
// random colors generator
// this can be removed and use specific color 
// or other plugins to use series of color
// ---------------------
const randomColorGenerator = function () { 
  return '#' + (Math.random().toString(16) + '0000000').slice(2, 8); 
};
// ---------------------
// scans all data, creating an object as result with all prjects
// the object has got as property name the ID of the project and as value the dataset object.
// in the chart, 1 dataset is equals to 1 project
// the scan is done for each employee and then for each project of each employee
// the cycle checks if the project is already created for another employee
// ---------------------
const projects = employees.reduce(function(result, item) {
  // scans project
  item.projects.forEach(function(prj){
    // gets project ID 
    const prjId = prj.projectId;
    // checks if already the related dataset is already created
    if (!result[prjId]) {
      // if not, adds to the object the dataset with project ID as property of the object
      result[prjId] = {
        label: prj.projectName, // name of dataset is project name
        data: [], // the data, in this phase, is empty, it will fill afterwards
        backgroundColor: randomColorGenerator()
      };
    }
  });
  return result;
}, {}); // <-- in the reduce, the {} is the initial value of variable "result"
// ---------------------
// scans all data, to fill the datasets (related to the projects) withe data, taken from the data.
// Some employees couldn't have any engagement on some projects therefore 0 is added to the data
// the chart will have the folloing matrix:
// 
// employee | prj1              | prj2              | ... | prjn             |
// emp1     | personMonths or 0 | personMonths or 0 | ... |personMonths or 0 |
// ---------------------
employees.forEach(function(item) {
  // scans all projects previously extracted, againts the employee projects
  for (const prjId of Object.keys(projects)) {
    const prj = projects[prjId];
    // checks if the employee was engaged for this project
    const empPrj = item.projects.filter(el => el.projectId === prjId);
    // if the array is not empty, the the employee was engaged in teh project
    // then adds personMonths the teh data array.
    if (empPrj.length) {
      prj.data.push(empPrj[0].personMonths); 
    } else {
    // if here, the employee wasn't engaged in teh project then add 0.
      prj.data.push(0); 
    }
  }
});

const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels, // employees names
    datasets: Object.values(projects)  // projects 
  },
  options: {
    scales: {
      x: {
        stacked: true
      },
      y: {
        stacked: true
      }
    }
  }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

user20579250
Related