回答編集履歴

1

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

2021/01/29 16:31

投稿

退会済みユーザー
test CHANGED
@@ -17,3 +17,289 @@
17
17
 
18
18
 
19
19
  なお手元で、Chart.jsを使っての散布図リアルタイム更新は普通に作れました。
20
+
21
+
22
+
23
+ # Chart.jsによるサンプル
24
+
25
+ コメント欄でChart.jsでの例が欲しいとのことだったので、最低限のコードを示します。
26
+
27
+ センシングデータがどのような形式であるのか、質問文では全く示されていないため、
28
+
29
+ 下記ではダミーデータを作成し表示しています。
30
+
31
+ 実際はセンシングデータの出力形式に合わせてflask側、html側を変える必要があります。
32
+
33
+
34
+
35
+ アニメーションのオン・オフやグラフ枠の固定などは調べれば出てきますので自力でやってください。
36
+
37
+ 補足:実際の手元verではChart.bundle.jsはCDNをリンクしています。
38
+
39
+
40
+
41
+ original.py
42
+
43
+ ```python
44
+
45
+ import json
46
+
47
+ import random
48
+
49
+ import time
50
+
51
+ from gevent import pywsgi
52
+
53
+ from geventwebsocket.handler import WebSocketHandler
54
+
55
+ from flask import Flask, request, render_template
56
+
57
+
58
+
59
+ app = Flask(__name__)
60
+
61
+
62
+
63
+ @app.route('/')
64
+
65
+ def index():
66
+
67
+ return render_template('index.html')
68
+
69
+
70
+
71
+ @app.route('/publish')
72
+
73
+ def publish():
74
+
75
+ if request.environ.get('wsgi.websocket'):
76
+
77
+ ws = request.environ['wsgi.websocket']
78
+
79
+ while True:
80
+
81
+ '''
82
+
83
+ ダミーのサンプルデータ。
84
+
85
+ Chart.jsに渡す場合は、
86
+
87
+ [
88
+
89
+ [{x: 10, y: 15}, {x: 8, y: 20}, {...},...],
90
+
91
+ [{x: **, y: **}, {x: , y: }, {...},...],
92
+
93
+ [{x: **, y: **}, {x: , y: }, {...},...],
94
+
95
+ ...
96
+
97
+ ]
98
+
99
+ という形をjson.dumpsして渡す。各行がグループとなる。
100
+
101
+ '''
102
+
103
+ ws.send(json.dumps(
104
+
105
+ [[{"x": random.random()*10, "y": random.random()*10} for _ in range(10)]for _ in range(3)]))
106
+
107
+
108
+
109
+ time.sleep(1)
110
+
111
+ return
112
+
113
+
114
+
115
+ if __name__ == '__main__':
116
+
117
+ app.debug = True
118
+
119
+ server = pywsgi.WSGIServer(('localhost', 8080), app, handler_class=WebSocketHandler)
120
+
121
+ server.serve_forever()
122
+
123
+ ```
124
+
125
+  
126
+
127
+ index.html
128
+
129
+ ```
130
+
131
+ <html>
132
+
133
+ <head>
134
+
135
+ <title>graph test</title>
136
+
137
+ </head>
138
+
139
+ <body>
140
+
141
+ <h1>Real time chart</h1>
142
+
143
+ <canvas id="graph" style="height: 200px;"></canvas>
144
+
145
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
146
+
147
+ <script type="text/javascript" src="Chart.bundle.js"></script>
148
+
149
+
150
+
151
+ <script type="text/javascript">
152
+
153
+ var ws = new WebSocket("ws://localhost:8080/publish");
154
+
155
+ // 初期データ
156
+
157
+ var data = [[], [], []];
158
+
159
+
160
+
161
+ var ctx = document.getElementById('graph').getContext('2d');
162
+
163
+ var myChart = new Chart(ctx, {
164
+
165
+ type: 'line',
166
+
167
+ data: {
168
+
169
+ datasets: [
170
+
171
+ {
172
+
173
+ label: "Group 1",
174
+
175
+ data: data[0],
176
+
177
+ pointRadius: 5,
178
+
179
+ pointBorderRadius: 5,
180
+
181
+ borderColor: '#F00',
182
+
183
+ showLine: false
184
+
185
+ },
186
+
187
+ {
188
+
189
+ label: "Group 2",
190
+
191
+ data: data[1],
192
+
193
+ pointRadius: 5,
194
+
195
+ pointBorderRadius: 5,
196
+
197
+ borderColor: '#0F0',
198
+
199
+ showLine: false
200
+
201
+ },
202
+
203
+ {
204
+
205
+ label: "Group 3",
206
+
207
+ data: data[2],
208
+
209
+ pointRadius: 5,
210
+
211
+ pointBorderRadius: 5,
212
+
213
+ borderColor: '#00F',
214
+
215
+ showLine: false
216
+
217
+ }
218
+
219
+ ]
220
+
221
+ },
222
+
223
+ options: {
224
+
225
+ responsive: true,
226
+
227
+ scales: {
228
+
229
+ xAxes: [{
230
+
231
+ type: 'linear',
232
+
233
+ position: 'bottom'
234
+
235
+ }]
236
+
237
+ },
238
+
239
+ legend: {
240
+
241
+ position: 'bottom',
242
+
243
+ lineWidth: 0,
244
+
245
+ labels: {
246
+
247
+ fontSize: 12,
248
+
249
+ boxWidth: 12,
250
+
251
+ usePointStyle: true,
252
+
253
+ generateLabels: function (chart) {
254
+
255
+ return chart.data.datasets.map(function (dataset, i) {
256
+
257
+ return {
258
+
259
+ text: dataset.label,
260
+
261
+ fillStyle: dataset.backgroundColor,
262
+
263
+ hidden: !chart.isDatasetVisible(i),
264
+
265
+ lineCap: dataset.borderCapStyle,
266
+
267
+ strokeStyle: dataset.borderColor,
268
+
269
+ pointStyle: dataset.pointStyle,
270
+
271
+ datasetIndex: i
272
+
273
+ };
274
+
275
+ })
276
+
277
+ }
278
+
279
+ }
280
+
281
+ },
282
+
283
+ }
284
+
285
+ });
286
+
287
+ //websocket経由で受け取ったデータをparseしてChart.jsのデータに渡す
288
+
289
+ ws.onmessage = function (msg) {
290
+
291
+ myChart.data.datasets.forEach(function (dataset, index) { dataset.data = JSON.parse(msg.data)[index]; });
292
+
293
+ myChart.update();
294
+
295
+ };
296
+
297
+ </script>
298
+
299
+ </body>
300
+
301
+
302
+
303
+ </html>
304
+
305
+ ```