<!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="https://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>
<div class="chart-container" style="position: relative; height:80vh; width:100%">
<canvas id="myChart"></canvas>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
var myChart;
var mode = 'airPressure'; // 初期表示：気圧
var weatherData = {};
weatherData.label = {
'batteryVoltage': 'バッテリー電圧',
'solarVoltage': 'ソーラー電圧',
'airPressure': '気圧',
'temperature': '気温',
'humidity': '湿度'
};
weatherData.time = [];
weatherData.batteryVoltage = [];
weatherData.solarVoltage = [];
weatherData.airPressure = [];
weatherData.temperature = [];
weatherData.humidity = [];
weatherData.data = [];
// データ取得
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.time[i] = _data[0] + ' ' + _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];
}
//drawMyChart
function drawMyChart(){
for (var i = 0; i < weatherData.time.length; i++) {
weatherData.data[i] = {
x: new Date( weatherData.time[i] ),
y: weatherData[mode][i]
}
}
const ctx = document.getElementById('myChart').getContext('2d');
if (myChart) {
myChart.destroy();
}
// フォントサイズ
Chart.defaults.font.size = 16;
// canvas 背景色
const plugin = {
id: 'custom_canvas_background_color',
beforeDraw: (chart) => {
const ctx = chart.canvas.getContext('2d');
ctx.save();
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, chart.width, chart.height);
ctx.restore();
}
};
myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: weatherData.label[mode],
data: weatherData.data,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
maintainAspectRatio: false,
scales: {
x: {
type: 'time',
time: {
unit: 'day',
},
min: weatherData.min,
max: weatherData.max
}
}
},
plugins: [plugin]
});
}
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){
var type = $(this).attr('id') == 'date-start' ? 'min' : 'max';
weatherData[type] = new Date(dateText);
drawMyChart();
}
});
$('.period input').on('input',function(event) {
if (!$(this).val()) {
var type = $(this).attr('id') == 'date-start' ? 'min' : 'max';
weatherData[type] = '';
drawMyChart();
}
});
</script>
</body>
</html>
