jQuery でcanvas を使用し、ガントチャートを作成したい

やりたいこと

jQuery でcanvas を使用し、ガントチャートを作成したいです。
データ(0か1)を機械から受け取り、それに応じてガントチャートでは赤、緑、黄で表示させています。
ガントチャートは1秒ごとに図形が描画されていく仕様です。
Ajaxで「Python (Flask)」と「jQuery」を使って取得したデータをcanvasを使って図形を描画させたいのですが、良き方法がわかりません。

基本として、このように取得したデータをcanvasに反映させることは可能なのでしょうか？

大まかな質問で申し訳ございません。
参考になりそうなサイトだけでも構わないのでご教授いただけると幸いです。

試したこと

現在はJavaScriptでガントチャートを実装している状態です。このままではデータと紐付けることができていない状況です。

JavaScript
1var canvas1 = document.getElementById("myCanvas1");
2var ctx1 = canvas1.getContext("2d");
3let client_w = document.getElementById("myCanvas1").clientWidth;
4
5var e = new Date();
6var time = parseInt(e.getHours()*3600) + parseInt(e.getMinutes()*60) + parseInt(e.getSeconds());
7var startpoint = (time/86400)*client_w*0.5;
8var cw = 0.0065
9
10
11
12console.log(time, startpoint, client_w);
13
14setInterval(repeat, 1000);
15
16function repeat() {
17  var e = new Date();
18	time = parseInt(e.getHours()*3600) + parseInt(e.getMinutes()*60) + parseInt(e.getSeconds());
19
20	if (time >= 86399){
21		startpoint = 0;
22		ctx1.clearRect(0, 30, client_w, 60)
23	}
24
25
26    ctx1.fillStyle = "rgb(0, 225, 0)";
27    console.log(time, client_w);
28    ctx1.fillRect(startpoint, 30, 0.0065, 60);
29    startpoint = startpoint + cw;
30
31    console.log(startpoint);
32}
33

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<title>Gunchart</title>
5	<meta charset="utf-8">
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7		<link rel="stylesheet" href="./assets/bootstrap.css">
8		<link rel="stylesheet" href="./assets/bootstrap.min.css">
9		<link rel="stylesheet" href="./assets/custome.css">
10</head>
11
12<script>
13$(function() {
14    function get_data(){
15        $.ajax({
16            url : '/data',
17            type : 'GET',
18            dataType : 'json',
19        })
20        //通信成功時の処理
21        .done(function(data){
22            $('#result1').text(data['production']['machine1']);
23            $('#result2').text(data['production']['machine2']);
24            $('#result3').text(data['production']['machine3']);
25            $('#result4').text(data['production']['machine4']);
26            $('#result5').text(data['production']['machine5']);
27            $('#result6').text(data['production']['machine6']);
28            $('#result7').text(data['production']['machine7']);
29            $('#result8').text(data['production']['machine8']);
30            $('#result9').text(data['production']['machine9']);
31            $('#result10').text(data['production']['machine10']);
32            $('#result11').text(data['production']['machine11']);
33            $('#result12').text(data['production']['machine12']);
34            $('#result13').text(data['production']['machine13']);
35            $('#result14').text(data['production']['machine14']);
36            $('#result15').text(data['production']['machine15']);
37            $('#result16').text(data['production']['machine16']);
38            $('#result17').text(data['production']['machine17']);
39            $('#result18').text(data['production']['machine18']);
40            $('#result19').text(data['production']['machine19']);
41            $('#result20').text(data['production']['machine20']);
42            $('#result21').text(data['production']['machine21']);
43            $('#result22').text(data['production']['machine22']);
44            $('#result23').text(data['production']['machine23']);
45            $('#result24').text(data['production']['machine24']);
46        })
47        //通信失敗時の処理
48        .fail(function(){
49            window.alert('データが取れていません');
50        })
51        console.log("更新しています")
52    }
53    get_data();
54    setInterval(get_data, 10000);
55});
56
57
58</script>
59
60
61<body>
62	<div class="set" style="display:flex;justify-content: space-between;">
63		<div class="row" style="margin-bottom: 25px; margin-top: 5px;">
64				<div class="col-md-12" style="padding-right: 0px; padding-left: 5px;">
65						<div class="row" style="padding-right: 5px; padding-left: 10px;  margin-left: 5px;">
66
67								<div class="col-md-12">
68										<div class="row">
69												<div class="col-md-2 black_style1">
70													<div class="container">
71															<p id="result1"></p>
72													</div>
73												</div>
74												<div class="col-md-2 black_style1">
75														<div class="text_style4">指示数</div>
76														<div class="text_style4">
77																<input type="text" style="width: 50px; height: 15px; margin: -10px;" id="machineorder1" onkeydown="machineOrder('1',event)">
78														</div>
79												</div>
80												<div class="col-md-2 black_style1">
81														<div class="text_style2">稼働率 %</div>
82														<div class="text_style2" id="rate1"></div>
83												</div>
84												<div class="col-md-2 black_style1">
85														<div class="text_style2">進捗 </div>
86														<div class="text_style2" id="instruction1"></div>
87												</div>
88												<div class="col-md-2 black_style1">
89														<div class="text_style2">サイクルタイム</div>
90														<div class="text_style2" id="cycletime1"></div>
91												</div>
92												<div class="col-md-2 black_style1">
93														<div class="text_style2" >ダウンタイム</div>
94														<div class="text_style2" id="stoptime1"></div>
95												</div>
96										</div>
97										<div class="row">
98												<div class="col-md-12 black_style2">
99														<div style="width: 100%;" >
100																<div style="height: 20px;" id="chart1">
101
102																		<canvas class="canvas_style" id="myCanvas1"></canvas>
103
104																</div>
105																<div style="display:flex;justify-content: space-between;">
106																		<div class="text_style1">0</div>
107																		<div class="text_style1">2</div>
108																		<div class="text_style1">4</div>
109																		<div class="text_style1">6</div>
110																		<div class="text_style1">8</div>
111																		<div class="text_style1">10</div>
112																		<div class="text_style1">12</div>
113																		<div class="text_style1">14</div>
114																		<div class="text_style1">16</div>
115																		<div class="text_style1">18</div>
116																		<div class="text_style1">20</div>
117																		<div class="text_style1">22</div>
118																		<div class="text_style1">24</div>
119																</div>
120														</div>
121												</div>
122										</div>
123								</div>
124						</div>
125				</div>
126		</div>
127</body>
128</html>