<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ベランダ気象データ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
<nav class="navbar navbar-light bg-light mb-4">
<div class="container">
<span class="navbar-brand mb-0 h1">ベランダ気象データ</span>
</div>
</nav>
<div class="container">
<div class="button-type border-bottom pb-2 mb-2">
種別
<button type="button" class="btn btn-outline-primary active" data-mode="airPressure">気圧</button>
<button type="button" class="btn btn-outline-primary" data-mode="temperature">気温</button>
<button type="button" class="btn btn-outline-primary" data-mode="humidity">湿度</button>
<button type="button" class="btn btn-outline-primary" data-mode="batteryVoltage">バッテリー電圧</button>
<button type="button" class="btn btn-outline-primary" data-mode="solarVoltage">ソーラー電圧</button>
</div>
<div class="period">
期間 <input type="text" class="form-control d-inline-block datepicker" style="width:150px;" id="date-start">
〜 <input type="text" class="form-control d-inline-block datepicker" style="width:150px;" id="date-end">
</div>
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.min.js" integrity="sha512-O2fWHvFel3xjQSi9FyzKXWLTvnom+lOYR/AUEThL/fbP4hv1Lo5LCFCGuTXBRyKC4K4DJldg5kxptkgXAzUpvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
var myChart;
var mode = 'airPressure'; // 初期表示：気圧
var weatherData = {};
weatherData.label = {
'batteryVoltage': 'バッテリー電圧',
'solarVoltage': 'ソーラー電圧',
'airPressure': '気圧',
'temperature': '気温',
'humidity': '湿度'
};
weatherData.date = [];
weatherData.time = [];
weatherData.batteryVoltage = [];
weatherData.solarVoltage = [];
weatherData.airPressure = [];
weatherData.temperature = [];
weatherData.humidity = [];
const str = "<?php echo preg_replace('/\n/',',',file_get_contents('/path/to/file')); ?>";
const str_array = str.split(',');
for (var i=0; i<str_array.length; i++) {
var _str = str_array[i].replace(/ /,',').replace(/\t/g,',').replace(/ /g,'');
var _data = _str.split(',');
weatherData.date[i] = _data[0];
weatherData.time[i] = _data[1];
weatherData.batteryVoltage[i] = _data[2];
weatherData.solarVoltage[i] = _data[3];
weatherData.airPressure[i] = _data[4];
weatherData.temperature[i] = _data[5];
weatherData.humidity[i] = _data[6];
}
weatherData.min = 0;
weatherData.max = str_array.length;
function drawMyChart(){
const ctx = document.getElementById('myChart').getContext('2d');
if (myChart) {
myChart.destroy();
}
myChart = new Chart(ctx, {
type: 'line',
data: {
labels: weatherData.date,
datasets: [{
label: weatherData.label[mode],
data: weatherData[mode],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
x: {
min: weatherData.min,
max: weatherData.max
}
}
}
});
}
drawMyChart();
// グラフ切替
$('.button-type button').click(function(event) {
if( !$(this).hasClass('active') ) {
$('.button-type button').removeClass('active');
$(this).addClass('active');
mode = $(this).data('mode');
drawMyChart()
}
});
// datepicker
$('.datepicker').datepicker({
dateFormat: 'yy/mm/dd',
onSelect: function(dateText, inst){
if ( weatherData.date.indexOf(dateText) === -1 ) {
alert('日付が存在しません');
return false;
}
if ( $(this).attr('id') == 'date-start' ) {
weatherData.min = weatherData.date.indexOf(dateText);
} else {
weatherData.max = weatherData.date.lastIndexOf(dateText);
}
drawMyChart();
}
});
$('.period input').on('input',function(event) {
if (!$(this).val()) {
if ( $(this).attr('id') == 'date-start' ) {
weatherData.min = 0;
} else {
weatherData.max = str_array.length;
}
drawMyChart();
}
});
</script>
</body>
</html>
