How to make a timeline chart?

Question

Canvas

[{
    "status": "Undefined",
    "start": "00:00:00",
    "duration": 50518
  }, {
    "status": "Unavailable",
    "start": "14:01:58",
    "duration": 11
  }, {
    "status": "Pending",
    "start": "14:02:09",
    "duration": 0
  }, {
    "status": "Available",
    "start": "14:02:09",
    "duration": 952
  }]

I have data like this.
I need to draw a graph of activity per day.
Now it's just on canvas - I count the number of seconds per 1 pixel for a given scale and draw rectangles of different colors.
Question: is there any ready-made solution for this kind of charts?

Answer 1

I use such a library almende.github.io/chap-links-library/js/timeline/d...
only in it the format is slightly different, the start time and end time of the event.
there are many different such libraries, write in Google "timeline js" and choose to your taste

Answer 2

Look towards chartjs

Answer 3

1) www.highcharts.com
2) d3js.org