I need to make a graph of activity data for a person for a day.

Here is the result I would like to obtain in HTML:

Here is the example data in JSON:

{
  "person": "John Doe",
  "activities": [
    {
      "start_time": "08:00",
      "end_time": "09:12",
      "type": "busy",
      "competence": "accounting"
    },
    {
      "start_time": "09:12",
      "end_time": "10:04",
      "type": "ready",
      "competence": "accounting"
    },
    {
      "start_time": "10:04",
      "end_time": "12:00",
      "type": "not ready",
      "competence": "accounting"
    },
    {
      "start_time": "09:00",
      "end_time": "10:00",
      "type": "busy",
      "competence": "support"
    },
    {
      "start_time": "10:00",
      "end_time": "11:00",
      "type": "not ready",
      "competence": "support"
    },
    {
      "start_time": "11:00",
      "end_time": "12:00",
      "type": "ready",
      "competence": "support"
    },
  ]
}

The difficulty is to respect the chronology of the timeline vertically.

In my example, I have only 2 activities but in reality, I have more and it is not a fixed number.

Do you have any idea on how I should proceed?