AMeDASグラフ
気象庁のアメダスデータ公開サイトから東京((2024年2月1日より富士(静岡)も)の温度、湿度の 10分ごとのデータを取得してグラフ化します。
データは 3時間分ごとにまとまった JSONで取得できますが、最新の 10日分しか取得できないので、100行ほどの pythonスクリプトで毎日 cronで前日分をまとめて取得し、ついでに露点温度を計算してから PostgreSQL DBに保存しています。(2023年6月5日から)
実際のグラフの表示ページはこちら → https://www.carina.gr.jp/~yamane/AMeDAS/
表示開始日と終了日を指定できますが範囲には特に制限はかけていません。(開始日が終了日より大きい場合は X軸を反転します。バグではありません、仕様です。)
ページ内で ajaxで PostgreSQLからデータを取得して Chart.jsを使用して表示しています。
表示範囲が 30日を超える場合は、ブラウザ側の負荷軽減のため個々のプロット値を tooltipsとして表示する機能を抑制しています。
ちなみに上記ページは ChatGPTでひな型を作って、それを微調整して作っています。
ChatGPTに示した「仕様」はこんな↓ものでした。(Chart.jsのことは指定もしていない)
HTML5と bootstrapを使った以下の仕様を満たすコード。
- 検索開始日時と検索終了日時をカレンダーUIで指定
- 1.で指定された日時を https://foo.dom/some/api に POSTし、測定日時、温度、湿度を ajaxで取得
- 取得したデータを二軸の折れ線グラフで表示
- 検索日時が変更されたら再描画
これに対して返ってきた答えがこちら↓。
以下のHTML5とBootstrapを使用したコードは、指定された仕様を満たすものです。このコードは、jQueryとChart.jsを使用しています。検索開始日時と検索終了日時を指定し、指定された日時をAPIにPOSTリクエストを送り、データを取得し、折れ線グラフで表示します。検索日時が変更された場合、グラフを再描画します。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>温度湿度グラフ</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>温度湿度グラフ</h1>
<div class="form-group">
<label for="start-date">開始日時:</label>
<input type="text" id="start-date" class="form-control">
</div>
<div class="form-group">
<label for="end-date">終了日時:</label>
<input type="text" id="end-date" class="form-control">
</div>
<button id="search-button" class="btn btn-primary">検索</button>
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
$(document).ready(function () {
// カレンダーUIの設定
$('#start-date').datepicker();
$('#end-date').datepicker();
// グラフ初期化
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [
{
label: '温度',
borderColor: 'rgba(75, 192, 192, 1)',
yAxisID: 'temperature',
data: [],
},
{
label: '湿度',
borderColor: 'rgba(255, 99, 132, 1)',
yAxisID: 'humidity',
data: [],
},
],
},
options: {
scales: {
yAxes: [
{
id: 'temperature',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: '温度',
},
},
{
id: 'humidity',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: '湿度',
},
},
],
},
},
});
// 検索ボタンのクリックイベント
$('#search-button').click(function () {
var startDate = $('#start-date').val();
var endDate = $('#end-date').val();
// APIにPOSTリクエストを送信
$.ajax({
type: 'POST',
url: 'https://foo.dom/some/api',
data: {
start_date: startDate,
end_date: endDate,
},
success: function (data) {
// データを取得してグラフに反映
var dates = [];
var temperatures = [];
var humidities = [];
for (var i = 0; i < data.length; i++) {
dates.push(data[i].measurementDate);
temperatures.push(data[i].temperature);
humidities.push(data[i].humidity);
}
chart.data.labels = dates;
chart.data.datasets[0].data = temperatures;
chart.data.datasets[1].data = humidities;
chart.update();
},
error: function (error) {
console.log('エラーが発生しました: ' + error);
},
});
});
});
</script>
</body>
</html>
```
このコードでは、Datepicker、Chart.js、Bootstrapを使用して、検索日時の指定、APIリクエストの送信、データの取得、グラフの描画を実行します。APIのエンドポイントやデータのフォーマットに応じて適切に変更してください。
エラーとかは考慮されていない必要最低限のコードではあるけど、修正して使う事を前提とした初期コードとしては十分かな、と。
ChatGPT恐るべし。(笑)