Line | |
---|
1 | <!DOCTYPE html>
|
---|
2 | <html lang="ja">
|
---|
3 | <head>
|
---|
4 | <meta charset="UTF-8">
|
---|
5 | <title>GROVE Light Sensor</title>
|
---|
6 | <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
|
---|
7 | <script src="http://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
|
---|
8 | <script src="chart.js"></script>
|
---|
9 | <script>
|
---|
10 | window.addEventListener('load', function () {
|
---|
11 |
|
---|
12 | var milkcocoa = new MilkCocoa("leadirgzw0b7.mlkcca.com");
|
---|
13 | var datastore = [];
|
---|
14 |
|
---|
15 | var chart = new createChart();
|
---|
16 | chart.setSvg("svgchart");
|
---|
17 | chart.init();
|
---|
18 |
|
---|
19 | milkcocoa.dataStore('test').stream().size(100).next(function(err, datas) {
|
---|
20 | datastore = datas.map(function(d) {
|
---|
21 | return {
|
---|
22 | timestamp : d.timestamp,
|
---|
23 | value : d.value.LUX
|
---|
24 | }
|
---|
25 | });
|
---|
26 |
|
---|
27 | chart.setDatas(datastore);
|
---|
28 | chart.initialDraw();
|
---|
29 | });
|
---|
30 |
|
---|
31 | milkcocoa.dataStore('test').on('push', function(pushed) {
|
---|
32 | datastore.push({
|
---|
33 | timestamp : pushed.timestamp,
|
---|
34 | value : pushed.value.LUX
|
---|
35 | });
|
---|
36 | datastore.shift();
|
---|
37 |
|
---|
38 | chart.setDatas(datastore);
|
---|
39 | chart.updateDraw();
|
---|
40 | });
|
---|
41 |
|
---|
42 | });
|
---|
43 | </script>
|
---|
44 |
|
---|
45 | <style>
|
---|
46 | html, body{
|
---|
47 | background-color: #222;
|
---|
48 | }
|
---|
49 | .chart {
|
---|
50 | width: 1040px;
|
---|
51 | height: 420px;
|
---|
52 | }
|
---|
53 | .domain{
|
---|
54 | stroke-width: 1px;
|
---|
55 | stroke: #f2f2ff;
|
---|
56 | }
|
---|
57 | text{
|
---|
58 | font-size: 11px;
|
---|
59 | fill: #efefef;
|
---|
60 | }
|
---|
61 | path{
|
---|
62 | fill: none;
|
---|
63 | stroke: #FFF5C9;
|
---|
64 | }
|
---|
65 |
|
---|
66 | </style>
|
---|
67 | </head>
|
---|
68 | <body>
|
---|
69 | <p style="text-align: center; color: #fff; font-size: 13px;"><A href="http://blog.mlkcca.com/iot/realtime-data-visualization-with-raspberry-pi-3/" target="_blank">ã°ã©ã表示ã®ãµã³ãã«</A></p>
|
---|
70 | <div id="svgchart" style="margin: 0 auto; width: 1040px;"></div>
|
---|
71 | </body>
|
---|
72 | </html>
|
---|
Note:
See
TracBrowser
for help on using the repository browser.