Chart.jsで日付に合わせてグラフをプロットしたい

###実現したいこと
Chart.jsを利用して、csvファイルをグラフ化しています。
現状では、２日以上のデータを比較し、前日のデータが0:00以外からはじまっていると、前日のデータが左詰めにされてしまいます。
例）19:00からデータが始まっていると、19:00のデータが0:00スタートになってしまう。
途中から始まっていても、時間に合わせてプロットができるようにしたいです。

様々な解決方法を考えましたが、行き詰まってしまいます。
助言をいただけたら幸いです。

graph.php

php
1<!DOCTYPE>
2<html>
3<head>
4<meta charset='utf-8'>
5<script src="../../js/jquery-1.12.4.min.js"></script>
6<script src="../../js/jquery.js"></script>
7<script src="../../js/chart.js"></script>
8<script src="js/graph.js"></script>
9<script src="../../js/galleria-1.5.7.js"></script>
10<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
11<title></title>
12</head>
13<body>
14	<!--グラフ描画-->
15
16	<div class="wrapper">
17		<div class="main">
18			<div class="box">
19				<h2>温度 [℃]</h2>
20				<canvas id="temperature" class="graph"></canvas>
21			</div>
22			<div class="box">
23				<h2>湿度 [％]</h2>
24				<canvas id="humidity" class="graph"></canvas>
25			</div>
26		</div>
27	</div>
28
29	<br>
30</body>
31</html>
32```data.csv
33```csv
342017-10-06 19:00,25,51
352017-10-06 20:00,26,51
362017-10-06 21:00,25,51
372017-10-06 22:00,25,52
382017-10-06 23:00,24,54
392017-10-07 00:00,24,55
402017-10-07 01:00,24,55
412017-10-07 02:00,23,58
422017-10-07 03:00,24,57
432017-10-07 04:00,23,60
442017-10-07 05:00,24,59
452017-10-07 06:00,24,60
462017-10-07 07:00,24,57
472017-10-07 08:00,24,55
482017-10-07 09:00,24,60
492017-10-07 10:00,25,57
502017-10-07 11:00,25,59

JavaScript
1count = 0;
2
3// 1桁の数字を0埋めで2桁にする
4var toDoubleDigits = function(num) {
5  num += "";
6  if (num.length === 1) {
7    num = "0" + num;
8  }
9 return num;
10};
11// CSV to Array 2D
12var csvToArray = function(path) {
13  var csvData = new Array;
14  var data = new XMLHttpRequest();
15  data.open("GET", path, false);
16  data.send(null);
17  var LF = String.fromCharCode(10);
18  var lines = data.responseText.split(LF);
19  for (var i = 0; i < lines.length;++i) {
20    var cells = lines[i].split(",");
21    if( cells.length != 1 ) {
22      csvData.push(cells);
23    }
24  }
25  return csvData;
26}
27
28var getDateData = function(date, src) {
29  var dst = new Array();
30  for(var i = 0; i < src.length; i++)
31  if (src[i][0].indexOf(date) !== -1) {
32    dst.push(src[i]);
33  }
34  return dst;
35};
36
37var arrayT = function(array){
38  var arrayT = [];
39  for (var i = 0; i < array.length; i++) {
40    for (var j = 0; j < array[i].length; j++) {
41      (i > 0)? arrayT[j].push(array[i][j]) :arrayT[j] = [array[i][j]];
42    }
43  }
44  return arrayT;
45}
46
47var replaceElement = function(array, before, after) {
48  for(var i=0; i < array.length; i++){
49    array[i] = array[i].replace(before, after);
50  }
51  return array;
52}
53
54var getDate = function(day) {
55  var date = new Date();
56  date.setDate(date.getDate() + day);
57  var year  = date.getFullYear();
58  var month = toDoubleDigits(date.getMonth() + 1);
59  var day   = toDoubleDigits(date.getDate());
60  return String(year) + "-" + String(month) + "-" + String(day);
61}
62
63var drawGraph = function(id, today, yesterday, labels){
64  var ctx = document.getElementById(id).getContext('2d');
65
66  var line1 = {
67    label:getDate(count),
68    data:today,
69    fill: false,
70    lineTension: 0,
71    backgroundColor: "#DE4E33",
72    borderColor: "#DE4E33",
73    pointHoverBackgroundColor: "#DE4E33",
74    pointHoverBorderColor: "#DE4E33",
75  };
76
77  var line2 = {
78    label:getDate(count -1),
79    data:yesterday,
80    fill: false,
81    lineTension: 0,
82    backgroundColor: "#4E33DE",
83    borderColor: "#4E33DE",
84    pointHoverBackgroundColor: "4E33DE",
85    pointHoverBorderColor: "4E33DE",
86  }
87  // ラベル(横軸)
88  var label = labels;
89  var xAxes = [{
90    gridLines:{
91      color: "#5f5f5f",
92    },
93    ticks: {
94      fontColor: "#000",
95      fontSize: 12
96    }
97  }]
98  var yAxes = [{
99    gridLines:{
100      color: "#5f5f5f",
101    },
102    ticks: {
103      fontColor: "#000",
104      fontSize: 15,
105    }
106  }]
107  var scales = {xAxes, yAxes};
108  var legend = {labels:{fontColor:"#000", fontSize: 15}, position:"bottom"};
109  // グラフ全体の設定
110  var option = {scales, legend};
111
112  // データの設定
113  var config = {
114    type: 'line',
115    data: { labels: label, datasets: [line1, line2]},
116    options: option,
117
118  }
119  var myChart = new Chart(ctx, config);
120
121};
122
123window.onload = function () {
124  var count = 0;
125  var csvData = csvToArray("csv/data.csv");
126  //var today = "2016-12-12 ";
127  //var yesterday = "2017-09-23 ";
128    var today = getDate(count);
129    var yesterday = getDate(count -1);
130    var dataToday = getDateData(today, csvData);
131    var dataTodayT = arrayT(dataToday);
132    var label = replaceElement(dataTodayT[0], today, ""); // 0:00, 1:00, 2:00
133    //alert(label);
134    var label = ['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00'];
135    //alert(label);
136    var dataYesterday = getDateData(yesterday, csvData);
137    var dataYesterdayT = arrayT(dataYesterday);
138
139    if(dataYesterday.length > 0){
140      drawGraph('temperature', dataTodayT[1], dataYesterdayT[1], label);
141      drawGraph('humidity', dataTodayT[2], dataYesterdayT[2], label);
142    }
143    else {
144      drawGraphToday('temperature', dataTodayT[1],label);
145      drawGraphToday('humidity', dataTodayT[2],label);
146      document.getElementById("next").disabled = "true";
147      document.getElementById("back").disabled = "true";
148    }
149  }