Rev | Line | |
---|
[254] | 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.