e-tipsmemo

ごった煮

Ryzen サーバー 電力測定⑤/Chart.js

前回はjsonで電力測定値をクライアントに送れるようになった。
e-tipsmemo.hatenablog.com
これをきれいにグラフ化したい。
そこでChart.jsを使う。
Chart.jsによる折線グラフ作成<Chart.js<Javascript<木暮仁

とりあえず必要

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

表示部分は

  <body>
    <input type="text" name="message" value="">
    <input type="button" name="buttonMsg" value="send message">
    <input type="button" name="buttonDiscon" value="disconnect">
	<div class="contents">
    <canvas id="voltageChart"></canvas>
	</div>
	<div class="contents">
    <canvas id="currentChart"></canvas>
	</div>
	<div class="contents">
    <canvas id="powerChart"></canvas>
	</div>
  </body>

divで囲んでおかないとサイズをいい感じに変更できない。

とりあえずテストデータとして、

var testdata = ["{\"time\":\"2019/01/14 02:50:00\",\"voltage\":102.209,\"current\":108.00781,\"wattage\":5.3}",
		"{\"time\":\"2019/01/14 02:50:02\",\"voltage\":102.271,\"current\":111.39844,\"wattage\":5.53}",
		"{\"time\":\"2019/01/14 02:50:04\",\"voltage\":102.258,\"current\":106.765625,\"wattage\":5.315}",
		"{\"time\":\"2019/01/14 02:50:07\",\"voltage\":102.396,\"current\":108.74219,\"wattage\":5.335}",
		"{\"time\":\"2019/01/14 02:50:09\",\"voltage\":102.541,\"current\":107.453125,\"wattage\":5.49}",
		"{\"time\":\"2019/01/14 02:50:11\",\"voltage\":102.285,\"current\":106.94531,\"wattage\":5.3}",
		"{\"time\":\"2019/01/14 02:50:13\",\"voltage\":102.409,\"current\":107.10156,\"wattage\":5.245}",
		"{\"time\":\"2019/01/14 02:50:15\",\"voltage\":102.432,\"current\":107.921875,\"wattage\":5.26}",
		"{\"time\":\"2019/01/14 02:50:17\",\"voltage\":102.257,\"current\":106.21875,\"wattage\":5.275}",
		"{\"time\":\"2019/01/14 02:50:19\",\"voltage\":102.519,\"current\":109.40625,\"wattage\":5.45}",
		"{\"time\":\"2019/01/14 02:50:21\",\"voltage\":102.267,\"current\":107.38281,\"wattage\":5.255}",
		"{\"time\":\"2019/01/14 02:50:23\",\"voltage\":102.383,\"current\":106.03125,\"wattage\":5.245}",
		"{\"time\":\"2019/01/14 02:50:25\",\"voltage\":102.499,\"current\":108.07031,\"wattage\":5.265}",
		"{\"time\":\"2019/01/14 02:50:27\",\"voltage\":102.413,\"current\":106.65625,\"wattage\":5.27}"];

var hoge = [];
var v = [];
var c = [];
var p = [];
for(var i=0;i<testdata.length;i++)
{
	var t = JSON.parse(testdata[i]);
	hoge.push(t['time']);
	v.push(t['voltage']);
	c.push(t['current']);
	p.push(t['wattage']);
}

その後、chartを作成する。
電圧、電流、電力のグラフを作ったがとりあえず一つだけ。

var vctx;

vctx = $('#voltageChart').get(0).getContext('2d');

const vchartDataSet = {
type: 'line',
data: {
  labels: hoge,
  datasets: [{
	label: 'voltage',
	data: v,
	tension: 0.3,
	backgroundColor: 'rgba(125, 0, 0, 0.3)',
	borderColor: 'red'
  }]
},
options: {
  responsive: true,
  maintainAspectRatio: false
}
};

new Chart(vctx, vchartDataSet);

f:id:katakanan:20190115003352p:plain
次はこれをwebsocketのon_messageで更新するようにする。