<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
</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">
<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>
<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>
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];
}
function drawMyChart(){
const ctx = document.getElementById('myChart').getContext('2d');
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
}]
}
});
}
drawMyChart();
$('.button-type button').click(function(event) {
if( !$(this).hasClass('active') ) {
$('.button-type button').removeClass('active');
$(this).addClass('active');
if (myChart) {
myChart.destroy();
}
mode = $(this).data('mode');
drawMyChart()
}
});
</script>
</body>
</html>