はじめに
- Macに温湿度と気圧のデータを取り込んで、エクセルでグラフ表示しましたが、毎度エクセルを起動させてマクロボタンを押すのは面倒だと思いWebで表示させるようにしました。
-マイコンはArduino開発環境を使用しています。サーバはWebサーバで、PHPとJavaScriptを用いて構築しているため、MacでもWindowsでも動作します。マイコンからのデータをPHPサーバに取り込み、Web上でグラフとして表示できるようにしました
Web表示
- 出来上がり
Web構成
-以前に作ったPHPサーバを活用。https://yshigu.net/entry/2025/04/13/190249
-全体画面はindex.html。グラフ作成はmychart.js。データはxiao.csvです
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="mychart.js"></script>
<title>chart of results</title>
</head>
<body>
<!--ここにグラフが挿入されます-->
<div style="width: 100%; height: 100%;">
<canvas id="myChart" style="width: 110%; height: auto;"></canvas>
</div>
</body>
</html>
- my chart.js
// 2) CSVから２次元配列に変換
function csv2Array(str) {
var csvData = [];
var lines = str.split("\n");
for (var i = 0; i < lines.length; ++i) {
var cells = lines[i].split(",");
csvData.push(cells);
}
return csvData;
}
function drawBarChart(data) {
// 3)chart.jsのdataset用の配列を用意
var tmpLabels = [], tmpData1 = [], tmpData2 = [], tmpData3 = [], tmpData4 = [], tmpData5 = [];
for (var row in data) {
tmpLabels.push(data[row][0])
tmpData4.push(data[row][2] - 1000 )
tmpData3.push(data[row][3])
tmpData1.push(data[row][4])
tmpData2.push(data[row][5])
tmpData5.push( -1 * data[row][6])
};
// 4)chart.jsで描画
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: tmpLabels,
datasets: [
{ label: "temp", data: tmpData1, fill: false, pointRadius: 0, borderWidth: 1.5, borderColor: "red" },
{ label: "humi", data: tmpData2, fill: false, pointRadius: 0, borderWidth: 1.5, borderColor: "blue" },
{ label: "volt", data: tmpData3, fill: false, pointRadius: 0, borderWidth: 1.0, borderColor: "green" },
{ label: "pres - 1000", data: tmpData4, fill: false, pointRadius: 0, borderWidth: 1.0, borderColor: "cyan" },
{ label: "abs(受信感度)", data: tmpData5, tension: 0.4, fill: false, pointRadius: 0, borderWidth: 0.5, borderColor: "magenta" }
]
},
options: {
title: {
display: true,
text: '温湿度と大気圧'
},
scales: {
yAxes: [
{
position: "left", // 図の右側に配置
ticks: { // Ｙ軸目盛り
min: -10, // 最小値
max: 90, // 最大値
stepSize: 5, // 間隔
fontColor: "blue" // 色
},
gridLines: { // 水平補助線の定義
color: "rgba(0, 0, 255, 0.2)"
},
scaleLabel: { // Ｙ軸のラベル
display: true,
fontSize: 16,
fontColor: "blue",
labelString: " "
}
},
{
position: "right", // 図の右側に配置
ticks: { // Ｙ軸目盛り
min: -10, // 最小値
max: 90, // 最大値
stepSize: 5, // 間隔
fontColor: "blue" // 色
},
gridLines: { // 水平補助線の定義
color: "rgba(0, 0, 255, 0.2)"
},
scaleLabel: { // Ｙ軸のラベル
display: true,
fontSize: 16,
fontColor: "blue",
labelString: " "
}
} ],
xAxes: [
{
gridLines: { // 垂直補助線の定義
display: false // 消す
}
}
]
}
}
});
}
function main() {
// 1) ajaxでCSVファイルをロード
var req = new XMLHttpRequest();
var filePath = './to/savedir/xiao.csv';
req.open("GET", filePath, true);
req.onload = function() {
// 2) CSVデータ変換の呼び出し
data = csv2Array(req.responseText);
// 3) chart.jsデータ準備、4) chart.js描画の呼び出し
drawBarChart(data);
}
req.send(null);
}
main();
最後に
ここまでご覧いただき、ありがとうございました。もし誤りがあれば、ご指摘いただけますと幸いです
