[Chartjs]-How to display datasets correctly on a graph using Chart.js

I hope I understood your question and your data strucure (as I said in my comment to your question).

Bringing your data structure to the one chart.js is expecting is not so easy. That’s why my code looks very difficult. That’s why I put a few comments in there and I let all the console.logs in there so you can easily see what is happening.

Feel free to ask any questions you have. I’m sure it takes some time to understand all.

Complete code in the JSBin

let canvas = document.getElementById("chart");
let ctx = canvas.getContext("2d");

let data = {}
data.DashboardTicketList = {
  0: {
    TicketsAssignedTo: 'Tim',
    TicketsClassificationType: 'TERMINADO',
    TicketsCount: 1,    
  },
  1: {
    TicketsAssignedTo: 'Tim',
    TicketsClassificationType: 'ASIGNADO',
    TicketsCount: 7
  },
  2: {
    TicketsAssignedTo: 'Tim',
    TicketsClassificationType: 'CERRADO',
    TicketsCount: 5    
  },
  3: {
    TicketsAssignedTo: 'Melanie',
    TicketsClassificationType: 'ASIGNADO',
    TicketsCount: 7
  },
  4: {
    TicketsAssignedTo: 'Melanie',
    TicketsClassificationType: 'CERRADO',
    TicketsCount: 7
  },
  5: {
    TicketsAssignedTo: 'Steffen',
    TicketsClassificationType: 'TERMINADO',
    TicketsCount: 0
  },
  6: {
    TicketsAssignedTo: 'Steffen',
    TicketsClassificationType: 'ASIGNADO',
    TicketsCount: 10
  },
  7: {
    TicketsAssignedTo: 'Steffen',
    TicketsClassificationType: 'CERRADO',
    TicketsCount: 7
  },
  8: {
    TicketsAssignedTo: 'Talia',
    TicketsClassificationType: 'TERMINADO',
    TicketsCount: 5
  },
  9: {
    TicketsAssignedTo: 'Talia',
    TicketsClassificationType: 'ASIGNADO',
    TicketsCount: 7
  },
  10: {
    TicketsAssignedTo: 'Talia',
    TicketsClassificationType: 'EN ESPERA USUARIO',
    TicketsCount: 6
  } 
}

const status = [
  'ABIERTO', 
  'ASIGNADO', 
  'EN PROCESO', 
  'EN ESPERA USUARIO', 
  'TERMINADO', 
  'CERRADO'
]

const colors = {
  'ASIGNADO': '#F7A65C',
  'ABIERTO': '#F76363',
  'CERRADO': '#6CE5CE',
  'TERMINADO': '#4285f4',
  'EN PROCESO': '#F2CB5F',
  'EN ESPERA USUARIO': '#B283ED'
}

let peopleData = {}
let classificationData = {}
let chartData = {
  labels: [],
  datasets: []
}

// loop through complete data
for (let idx in data.DashboardTicketList) {
  let cData = data.DashboardTicketList[idx]
  //console.log(cData)
  // change data structure to all people
  if (!peopleData.hasOwnProperty(cData.TicketsAssignedTo)) {
    peopleData[cData.TicketsAssignedTo] = {}
  }
  peopleData[cData.TicketsAssignedTo][cData.TicketsClassificationType] = cData.TicketsCount

  // Get all different TicketsClassificationTypes (object to eliminate duplicates)
  if (!classificationData.hasOwnProperty(cData.TicketsClassificationType)) {
    classificationData[cData.TicketsClassificationType] = true
  }
}

// Get array of all different TicketsClassificationTypes
let classificationDataArray = Object.keys(classificationData)
//console.log('classData', classificationData)
//console.log('classDataArray', classificationDataArray)
//console.log('peopleData', peopleData)

// Assign 0 to all people with no specific TicketsClassificationType; may be improved
for (let idx in peopleData) {
  let cPerson = peopleData[idx]
  for (let i = 0; i < classificationDataArray.length; i++) {
    if (!cPerson.hasOwnProperty(classificationDataArray[i])) {
      cPerson[classificationDataArray[i]] = 0
    }
  }
}

// Get chart labels from peopleData
chartData.labels = Object.keys(peopleData)

// Sort TicketsClassificationType to order from status array; may be improved
for (let i = 0; i < status.length; i++) {
  for (let j = 0; j < classificationDataArray.length; j++) {
    if (status[i] === classificationDataArray[j]) {
      let cClass = classificationDataArray[j]
      //console.log('cClass', cClass)
      let cData = []

      for (let idx2 in peopleData) {
        //console.log('peopleData[idx2]', peopleData[idx2])
        cData.push(peopleData[idx2][cClass])
      }

      chartData.datasets.push({
        label: cClass,
        data: cData,
        backgroundColor: colors[cClass]
      })
      break
    }
  }
}

/*
let count = false;
for (let idx in dataChart) {
  if (dataChart[idx] > 0) {
    count = true;
    break;
  }
}

if (count) {
  document.getElementById('noDataEmployee').style.display = 'none';
} else {
  document.getElementById('noDataEmployee').style.display = 'block';
}
*/

let options = {
  responsive: true,
  //maintainAspectRatio: false,
  scales: {
    xAxes: [{
      stacked: true,
      ticks: {
        beginAtZero: true
      }
    }],
    yAxes: [{
      stacked: true,
      ticks: {
        beginAtZero: true
      }
    }]
  },
  legend: {
    position: 'bottom',
    padding: 5,
    labels: {
      pointStyle: 'circle',
      usePointStyle: true
    }
  }
}

let myNewChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: options,
});