回答編集履歴

Chart.jsを使ったサンプルを追加

2021/01/29 16:31

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -17,3 +17,289 @@
 なお手元で、Chart.jsを使っての散布図リアルタイム更新は普通に作れました。
+# Chart.jsによるサンプル
+コメント欄でChart.jsでの例が欲しいとのことだったので、最低限のコードを示します。
+センシングデータがどのような形式であるのか、質問文では全く示されていないため、
+下記ではダミーデータを作成し表示しています。
+実際はセンシングデータの出力形式に合わせてflask側、html側を変える必要があります。
+アニメーションのオン・オフやグラフ枠の固定などは調べれば出てきますので自力でやってください。
+補足：実際の手元verではChart.bundle.jsはCDNをリンクしています。
+original.py
+```python
+import json
+import random
+import time
+from gevent import pywsgi
+from geventwebsocket.handler import WebSocketHandler
+from flask import Flask, request, render_template
+app = Flask(__name__)
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/publish')
+def publish():
+    if request.environ.get('wsgi.websocket'):
+        ws = request.environ['wsgi.websocket']
+        while True:
+            '''
+            ダミーのサンプルデータ。
+            Chart.jsに渡す場合は、
+            [
+                [{x: 10, y: 15}, {x: 8, y: 20}, {...},...],
+                [{x: **, y: **}, {x:  , y:   }, {...},...],
+                [{x: **, y: **}, {x:  , y:   }, {...},...],
+                ...
+            ]
+            という形をjson.dumpsして渡す。各行がグループとなる。
+            '''
+            ws.send(json.dumps(
+                [[{"x": random.random()*10, "y": random.random()*10} for _ in range(10)]for _ in range(3)]))
+            time.sleep(1)
+    return
+if __name__ == '__main__':
+    app.debug = True
+    server = pywsgi.WSGIServer(('localhost', 8080), app, handler_class=WebSocketHandler)
+    server.serve_forever()
+```
+index.html
+```
+<html>
+<head>
+  <title>graph test</title>
+</head>
+<body>
+  <h1>Real time chart</h1>
+  <canvas id="graph" style="height: 200px;"></canvas>
+  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+  <script type="text/javascript" src="Chart.bundle.js"></script>
+  <script type="text/javascript">
+    var ws = new WebSocket("ws://localhost:8080/publish");
+    // 初期データ
+    var data = [[], [], []];
+    var ctx = document.getElementById('graph').getContext('2d');
+    var myChart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        datasets: [
+          {
+            label: "Group 1",
+            data: data[0],
+            pointRadius: 5,
+            pointBorderRadius: 5,
+            borderColor: '#F00',
+            showLine: false
+          },
+          {
+            label: "Group 2",
+            data: data[1],
+            pointRadius: 5,
+            pointBorderRadius: 5,
+            borderColor: '#0F0',
+            showLine: false
+          },
+          {
+            label: "Group 3",
+            data: data[2],
+            pointRadius: 5,
+            pointBorderRadius: 5,
+            borderColor: '#00F',
+            showLine: false
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        scales: {
+          xAxes: [{
+            type: 'linear',
+            position: 'bottom'
+          }]
+        },
+        legend: {
+          position: 'bottom',
+          lineWidth: 0,
+          labels: {
+            fontSize: 12,
+            boxWidth: 12,
+            usePointStyle: true,
+            generateLabels: function (chart) {
+              return chart.data.datasets.map(function (dataset, i) {
+                return {
+                  text: dataset.label,
+                  fillStyle: dataset.backgroundColor,
+                  hidden: !chart.isDatasetVisible(i),
+                  lineCap: dataset.borderCapStyle,
+                  strokeStyle: dataset.borderColor,
+                  pointStyle: dataset.pointStyle,
+                  datasetIndex: i
+                };
+              })
+            }
+          }
+        },
+      }
+    });
+    //websocket経由で受け取ったデータをparseしてChart.jsのデータに渡す
+    ws.onmessage = function (msg) {
+      myChart.data.datasets.forEach(function (dataset, index) { dataset.data = JSON.parse(msg.data)[index]; });
+      myChart.update();
+    };
+  </script>
+</body>
+</html>
+```