###実現したいこと
Chart.jsを利用して、csvファイルをグラフ化しています。
現状では、2日以上のデータを比較し、前日のデータが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 }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/07 06:04
2017/10/07 06:09