リアルタイムで変化するグラフを作成しよう.1

レッスン：リアルタイムで変化するグラフを作成しよう.1(投稿日：2021年12月7日)

＜＜前へ

次へ＞＞

動画についてソースコード使用した物一覧よくある質問回路図次の動画

リアルタイムで変化するグラフを作成しよう

ソースコードの内容

	<!doctype html>
	<html lang="jp">
	<head>
	<title>MyIoTアプリ</title>
	<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-database.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	</head>
	<body>
	<div class="container">
	<div class="row mt-3">
	<div class="col-12">
	<div class="h3">Firebase IoT</div>
	</div>

	<div class="col-12">
	<div id="Temp">--℃</div>
	<div id="Hum">--%</div>
	<div id="Press">--Pa</div>
	</div>

	<div>
	<canvas id="myChart"></canvas>
	</div>

	</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script>
	// === include 'setup' then 'config' above ===
	const labels = [];
	const data = {
	labels: labels,
	datasets: [{
	label: 'Temperature',
	backgroundColor: 'rgb(255, 99, 132)',
	borderColor: 'rgb(255, 99, 132)',
	data: [],
	}]
	};
	const myconfig = {
	type: 'line',
	data: data,
	options: {}
	};
	const myChart = new Chart(
	document.getElementById('myChart'),
	myconfig
	);

	console.log(labels);
	console.log(data.datasets[0].data);
	</script>


	<script>
	var config = {
	//自分の情報を入力
	apiKey: "",
	authDomain: "",
	databaseURL: "",
	projectId: "",
	storageBucket: "",
	messagingSenderId: "",
	appId: ""
	};
	firebase.initializeApp(config);

	// Get a reference to the database service
	var database = firebase.database();
	</script>
	<script>
	//データベースの参照
	var Ref = database.ref();

	//既存データを表示
	Ref.on('value', function(obj){
	var msg = obj.val();
	console.log(msg);
	console.log(msg["Temp"]);

	var temp = document.getElementById("Temp");
	temp.innerText = msg["Temp"] + "℃";
	var hum = document.getElementById("Hum");
	hum.innerText = msg["Hum"] + "%";
	var press = document.getElementById("Press");
	press.innerText = msg["Press"] + "Pa";

	//Chart更新
	var now = new Date();
	var Hour = now.getHours();
	var Min = now.getMinutes();
	var Sec = now.getSeconds();

	labels.push(Hour + ":" + Min + ":" + Sec);
	data.datasets[0].data.push(msg["Temp"]);
	myChart.update();
	});
	</script>

	</body>
	</html>