source: rtos_arduino/trunk/examples/IotText/sample3/index.html@ 254

Last change on this file since 254 was 254, checked in by mmatsu, 8 years ago
File size: 1.5 KB
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>
10window.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>
46html, 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}
57text{
58 font-size: 11px;
59 fill: #efefef;
60}
61path{
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.