Untitled

function drawTimeSeriesChart(tasks) {
  // Import the tinycolor2 library using a <script> tag
  const script = document.createElement("script");
  script.src = "https://cdn.jsdelivr.net/npm/tinycolor2@1.4.1/tinycolor.js";
  document.head.appendChild(script);

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

  // 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: tinycolor({ h: 360 / tasks.length * index, s: 1, l: 0.5 }).toRgbString(), // generate a unique color for the task
          borderColor: tinycolor({ h: 360 / tasks.length * index, s: 1, l: 0.8 }).toRgbString(), // generate a unique color for the task
          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
          }
        }]
      }
    }
  });
}