Untitled

function drawTimeSeriesChart(tasks) {
  // Create a <canvas> element and add it to the page
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);

  // Define an array of colors to use for each task
  const colors = ["red", "green", "blue", "orange", "purple", "pink", "yellow", "brown", "gray", "black"];

  // Use the Chart.js library to create a time series chart
  const ctx = canvas.getContext("2d");
  const chart = new Chart(ctx, {
    type: "line",
    data: {
      labels: tasks.map(task => task.date), // use the dates as the labels
      datasets: tasks.map((task, index) => {
        // create a dataset for each task
        return {
          label: task.name, // use the task name as the label
          data: [{
            x: task.date, // set the x-value to the task date
            y: task.duration // set the y-value to the task duration
          }],
          backgroundColor: `rgba(${colors[index % colors.length]}, 0.2)`, // set the background color to a light version of the task color
          borderColor: `rgba(${colors[index % colors.length]}, 1)`, // set the border color to the task color
          borderWidth: 1 // set the border width to 1 pixel
        }
      })
    },
    options: {
      scales: {
        xAxes: [{
          type: "time", // use a time scale for the x-axis
          time: {
            unit: "day" // set the unit to day
          }
        }]
      }
    }
  });
}