1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <title>Brew Log</title> |
|
5 <meta charset="utf-8" /> |
|
6 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|
7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
|
8 <script src="js/jquery-1.12.4.min.js"></script> |
|
9 <script src="js/Chart.min.js"></script> |
|
10 <script src="js/ch-plug-anno.min.js"></script> |
|
11 <link rel="stylesheet" href="app/styles/web.css"> |
|
12 <style> |
|
13 canvas{ |
|
14 -moz-user-select: none; |
|
15 -webkit-user-select: none; |
|
16 -ms-user-select: none; |
|
17 background: white; |
|
18 } |
|
19 </style> |
|
20 </head> |
|
21 <body> |
|
22 |
|
23 <div id="tmap"></div> |
|
24 <div style="width:95%; margin:0 auto; margin-top: 20px;"> |
|
25 <canvas id="myChart"></canvas> |
|
26 </div> |
|
27 <br> |
|
28 <form action="index.html"><input type="submit" class="button" value="Hoofdmenu"></form> |
|
29 |
|
30 <script> |
|
31 |
|
32 var tokens = []; |
|
33 var query = location.search; |
|
34 query = query.slice(1); |
|
35 query = query.split('&'); |
|
36 $.each(query, function(i,value){ |
|
37 var token = value.split('='); |
|
38 var key = decodeURIComponent(token[0]); |
|
39 var data = decodeURIComponent(token[1]); |
|
40 tokens[key] = data; |
|
41 }); |
|
42 |
|
43 |
|
44 var logfile = tokens["show"]; |
|
45 $('#tmap').append(logfile); |
|
46 |
|
47 |
|
48 $.getJSON(logfile, function(data) { |
|
49 var recipe = data.brew.map(function(item) { |
|
50 return item.Recipe; |
|
51 }); |
|
52 var brewdate = data.brew.map(function(item) { |
|
53 return item.Date; |
|
54 }); |
|
55 var labels = data.brew[0].brewdata.map(function(item) { |
|
56 return item.Label; |
|
57 }); |
|
58 var mlt_sp = data.brew[0].brewdata.map(function(item) { |
|
59 return item.MLT_sp; |
|
60 }); |
|
61 var mlt_pv = data.brew[0].brewdata.map(function(item) { |
|
62 return item.MLT_pv; |
|
63 }); |
|
64 var mlt_pwm = data.brew[0].brewdata.map(function(item) { |
|
65 return item.MLT_pwm; |
|
66 }); |
|
67 var hlt_sp = data.brew[0].brewdata.map(function(item) { |
|
68 return item.HLT_sp; |
|
69 }); |
|
70 var hlt_pv = data.brew[0].brewdata.map(function(item) { |
|
71 return item.HLT_pv; |
|
72 }); |
|
73 var hlt_pwm = data.brew[0].brewdata.map(function(item) { |
|
74 return item.HLT_pwm; |
|
75 }); |
|
76 var annos = data.brew[0].annotations.map(function(item) { |
|
77 return item; |
|
78 }); |
|
79 |
|
80 var ctx = document.getElementById("myChart"); |
|
81 var myChart = new Chart(ctx, { |
|
82 type: 'line', |
|
83 data: { |
|
84 labels: labels, |
|
85 datasets: [{ |
|
86 label: 'MLT sp', |
|
87 backgroundColor: 'rgba(250, 0, 0, 0.4)', |
|
88 borderColor: 'rgba(250, 0, 0, 0.4)', |
|
89 borderDash: [8, 4], |
|
90 pointBorderWidth: 1, |
|
91 pointRadius: 1, |
|
92 pointStyle: 'dash', |
|
93 lineTension: 0, |
|
94 data: mlt_sp, |
|
95 fill: false |
|
96 },{ |
|
97 label: 'MLT pv', |
|
98 backgroundColor: 'rgba(54, 162, 235, 0.9)', |
|
99 borderColor: 'rgba(54, 162, 235, 0.9)', |
|
100 pointBorderWidth: 1, |
|
101 pointRadius: 1, |
|
102 lineTension: 0, |
|
103 data: mlt_pv, |
|
104 fill: false |
|
105 },{ |
|
106 label: 'MLT pwm', |
|
107 backgroundColor: 'rgba(63, 131, 191, 0.4)', |
|
108 borderColor: 'rgba(63, 131, 191, 0.4)', |
|
109 borderDash: [8, 4], |
|
110 pointBorderWidth: 1, |
|
111 pointRadius: 1, |
|
112 pointStyle: 'dash', |
|
113 lineTension: 0, |
|
114 data: mlt_pwm, |
|
115 fill: false |
|
116 },{ |
|
117 label: 'HLT sp', |
|
118 backgroundColor: 'rgba(255, 99, 132, 0.4)', |
|
119 borderColor: 'rgba(255, 99, 132, 0.4)', |
|
120 borderDash: [8, 4], |
|
121 pointBorderWidth: 1, |
|
122 pointRadius: 1, |
|
123 pointStyle: 'dash', |
|
124 lineTension: 0, |
|
125 data: hlt_sp, |
|
126 fill: false |
|
127 },{ |
|
128 label: 'HLT pv', |
|
129 backgroundColor: 'rgba(255, 206, 86, 0.9)', |
|
130 borderColor: 'rgba(255, 206, 86, 0.9)', |
|
131 pointBorderWidth: 1, |
|
132 pointRadius: 1, |
|
133 lineTension: 0, |
|
134 data: hlt_pv, |
|
135 fill: false |
|
136 },{ |
|
137 label: 'HLT pwm', |
|
138 backgroundColor: 'rgba(75, 192, 192, 0.4)', |
|
139 borderColor: 'rgba(75, 192, 192, 0.4)', |
|
140 borderDash: [8, 4], |
|
141 pointBorderWidth: 1, |
|
142 pointRadius: 1, |
|
143 pointStyle: 'dash', |
|
144 lineTension: 0, |
|
145 data: hlt_pwm, |
|
146 fill: false |
|
147 }] |
|
148 }, |
|
149 options: { |
|
150 title: { |
|
151 display: true, |
|
152 fontSize: 18, |
|
153 text: recipe |
|
154 }, |
|
155 responsive: true, |
|
156 legend: { |
|
157 position: 'bottom' |
|
158 }, |
|
159 animation: { |
|
160 duration: 0 |
|
161 }, |
|
162 scales: { |
|
163 xAxes: [{ |
|
164 display: true, |
|
165 scaleLabel: { |
|
166 display: true, |
|
167 labelString: brewdate |
|
168 } |
|
169 }], |
|
170 yAxes: [{ |
|
171 display: true, |
|
172 scaleLabel: { |
|
173 display: true, |
|
174 labelString: 'Temperature' |
|
175 } |
|
176 }] |
|
177 }, |
|
178 annotation: { |
|
179 drawTime: "afterDraw", |
|
180 annotations: annos |
|
181 } |
|
182 } |
|
183 }); |
|
184 /* myChart.toBase64Image(); return pmg image string */ |
|
185 }); |
|
186 </script> |
|
187 |
|
188 </body> |
|
189 </html> |
|
190 |
|